From 1cfc786947fe1367ae2b61732e277f945b32493c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Corentin=20S=C3=A9chet?= Date: Wed, 22 May 2024 15:46:28 +0200 Subject: [PATCH] css: polish navbar integration --- locale/fr/LC_MESSAGES/site.po | 53 ++++---- src/assets/js/nav.js | 68 ++++++---- src/lib/css/controls.scss | 24 ++++ src/lib/css/variables.scss | 29 ++-- src/lib/nav.html | 52 +++----- src/lib/nav.scss | 240 +++++++++++++++------------------- src/pages/index/games.scss | 4 +- src/pages/index/news.scss | 2 +- src/style.scss | 1 + 9 files changed, 231 insertions(+), 242 deletions(-) create mode 100644 src/lib/css/controls.scss diff --git a/locale/fr/LC_MESSAGES/site.po b/locale/fr/LC_MESSAGES/site.po index bcf6824..1167935 100644 --- a/locale/fr/LC_MESSAGES/site.po +++ b/locale/fr/LC_MESSAGES/site.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: PROJECT VERSION\n" "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n" -"POT-Creation-Date: 2024-05-22 02:27+0200\n" +"POT-Creation-Date: 2024-05-22 15:44+0200\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME \n" "Language: fr\n" @@ -19,21 +19,21 @@ msgstr "" "Content-Transfer-Encoding: 8bit\n" "Generated-By: Babel 2.15.0\n" -#: src/lib/nav.html:18 +#: src/lib/nav.html:21 msgid "Collective" msgstr "Collectif" -#: src/lib/nav.html:21 src/pages/index/games.html:1 +#: src/lib/nav.html:22 src/pages/index/games.html:1 msgid "Games" msgstr "Jeux" -#: src/lib/nav.html:24 +#: src/lib/nav.html:23 msgid "News" -msgstr "Actualités" +msgstr "Actus" -#: src/lib/nav.html:27 -msgid "Contact Us" -msgstr "Nous Contacter" +#: src/lib/nav.html:24 +msgid "Contact" +msgstr "Contact" #: src/pages/index/presentation.html:9 msgid "" @@ -45,11 +45,11 @@ msgid "" msgstr "" "Bienvenue dans le monde soyeux de la compagnie des grenouilles, où les " "gros rêves sont livrés dans des petits paquets. Nous ne sommes pas votre " -"turbo-corporation habituelle avec des équipes de fifous et des bureaux au " -"cœur du 16ème arrondissement. Non, nous sommes justes deux âmes PASSIONNÉES " -"lovées près de quelques transistors, animés par l'envie insatiable de " -"confectionner des pépites de joie, que nous vendrons ensuite au baudaud " -" contre une somme relativement anectodique." +"turbo-corporation habituelle avec des équipes de fifous et des bureaux au" +" cœur du 16ème arrondissement. Non, nous sommes justes deux âmes " +"PASSIONNÉES lovées près de quelques transistors, animés par l'envie " +"insatiable de confectionner des pépites de joie, que nous vendrons " +"ensuite au baudaud contre une somme relativement anectodique." #: src/pages/index/presentation.html:19 msgid "" @@ -64,19 +64,19 @@ msgid "" "treacherous waters of game development." msgstr "" "Nous sommes les spécialiste de l'aventure façon canapé-cocktail, que " -"n'importe qui peu picorer mais que seuls les vrais PGM peuvent maîtriser" -", façon peu subtile de marketter une cible aussi large que le Nevada." -"Voyez-nous comme les Davids du Goliath de l'industrie du jeu vidéo " +"n'importe qui peu picorer mais que seuls les vrais PGM peuvent maîtriser," +" façon peu subtile de marketter une cible aussi large que le Nevada" +".Voyez-nous comme les Davids du Goliath de l'industrie du jeu vidéo " "(https://stjv.fr). Nos jeux sont petits, mais vous ne pourrez vous " -"empêcher d'y revenir, tels de jolis cachets d'oxycodone. Mais, vous " -"vous demandez peut-être comment deux personnes peuvent se partager la " -"barre dans cet océan de pixels ? C'est grâce à cette douce, douce magie " -"de la prise de décision collective. (N.D.T : Chat GPT n'a clairement " -"jamais fait partie d'une organisation de gauche pour sortir des trucs " -"aussi cons). Nous sommes le yin et yang, nous tempérant l'un l'autre " -"nos écueils et nos force, lorsque nous navigons dans les eaux scabreuses" -" du développement de logiciels vidéo-ludiques (N.D.T, mais par contre il" -" sait admirablement amener une pointe d'érotisme là où on en attend pas)." +"empêcher d'y revenir, tels de jolis cachets d'oxycodone. Mais, vous vous " +"demandez peut-être comment deux personnes peuvent se partager la barre " +"dans cet océan de pixels ? C'est grâce à cette douce, douce magie de la " +"prise de décision collective. (N.D.T : Chat GPT n'a clairement jamais " +"fait partie d'une organisation de gauche pour sortir des trucs aussi " +"cons). Nous sommes le yin et yang, nous tempérant l'un l'autre nos " +"écueils et nos force, lorsque nous navigons dans les eaux scabreuses du " +"développement de logiciels vidéo-ludiques (N.D.T, mais par contre il sait" +" admirablement amener une pointe d'érotisme là où on en attend pas)." #: src/pages/index/presentation.html:33 msgid "" @@ -91,6 +91,7 @@ msgid "" "where small is mighty, and fun knows no bounds!" msgstr "" -#: src/pages/index/presentation.html:45 +#: src/pages/index/presentation.html:46 msgid "Members" msgstr "Membres" + diff --git a/src/assets/js/nav.js b/src/assets/js/nav.js index 4ac2979..164ad90 100644 --- a/src/assets/js/nav.js +++ b/src/assets/js/nav.js @@ -1,41 +1,53 @@ class NavBar extends HTMLElement { - connectedCallback() { - document.addEventListener("scroll", this.onScroll.bind(this)) - } + #dockingTimeout + connectedCallback() { + document.addEventListener("scroll", this.onScroll.bind(this)) + this.addEventListener('transitionend', this.onTransitionEnd.bind(this)) + this.onScroll() + } - onScroll(evt) { - const scrollThreshold = this.getAttribute('scroll-threshold') - if(window.scrollY > scrollThreshold) { - this.classList.add("nav-bar__scrolled") - } - else { - this.classList.remove("nav-bar__scrolled") - } + onScroll() { + const scrollThreshold = parseInt(this.getAttribute('dock-logo-scroll-threshold')) + const style = getComputedStyle(document.body) + + if(window.scrollY > scrollThreshold && !this.classList.contains("nav-bar__docked")) { + this.classList.add("nav-bar__docking") + this.classList.add("nav-bar__docked") } + else if(window.scrollY <= scrollThreshold){ + this.classList.remove("nav-bar__docked") + } + } + + onTransitionEnd(evt) { + if(evt.target.classList.contains('nav-bar--logo') && evt.propertyName == 'top') { + this.classList.remove("nav-bar__docking") + } + } } class ToggleNavBarButton extends HTMLElement { - connectedCallback() { - this.addEventListener('click', this.onClick.bind(this)) - const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize'; - window.addEventListener(windowsChangeEvent, this.close.bind(this)) - } + connectedCallback() { + this.addEventListener('click', this.onClick.bind(this)) + const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize'; + window.addEventListener(windowsChangeEvent, this.close.bind(this)) + } - get navbar() { - const navbar = this.closest('nav-bar') - console.assert(navbar !== undefined) - return navbar - } + get navbar() { + const navbar = this.closest('nav-bar') + console.assert(navbar !== undefined) + return navbar + } - onClick(evt) { - this.navbar.classList.toggle('nav-bar__open') - evt.preventDefault() - } + onClick(evt) { + this.navbar.classList.toggle('nav-bar__open') + evt.preventDefault() + } - close() { - this.navbar.classList.remove('nav-bar__open') - } + close() { + this.navbar.classList.remove('nav-bar__open') + } } window.customElements.define('nav-bar', NavBar) diff --git a/src/lib/css/controls.scss b/src/lib/css/controls.scss new file mode 100644 index 0000000..654bc17 --- /dev/null +++ b/src/lib/css/controls.scss @@ -0,0 +1,24 @@ +%button { + --background: var(--color-accent); + --background-hover: var(--background); + --color: var(--color-on-accent); + + border-radius: var(--border-radius-small); + padding: var(--space-small) var(--space-medium); + + background: var(--background); + color: var(--color); + opacity: 0.9; + + font-size: var(--fz-4); + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + + &:hover { + opacity: 1.0; + background: var(--background-hover); + } +} + diff --git a/src/lib/css/variables.scss b/src/lib/css/variables.scss index 2cef4c2..93c715c 100644 --- a/src/lib/css/variables.scss +++ b/src/lib/css/variables.scss @@ -1,13 +1,17 @@ $mobile-breakpoint: "max-width: 768px"; :root { - --color: #161616; + --color-text: #161616; - --primary-color: #E04855; - --on-primary: white; + --color-primary: #aa1d29; + --color-on-primary: white; - --dark: #282828; - --on-dark: #E04855; + --color-accent: #161616; + --color-on-accent: #f2a6ac; + + --color-dark: #303030; + --color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%); + --color-on-dark: #f2a6ac; --space-xsmall: 5px; --space-small: 10px; @@ -22,14 +26,9 @@ $mobile-breakpoint: "max-width: 768px"; --fz-3: 1.5rem; --fz-4: 1.125rem; - --box-shadow: 0px 5px 5px 0px rgba(22,22,22,0.5); - --button-shadow: inset 0 0 0.5px 1px hsla(0, 0%, - 100%, 0.075), - /* shadow ring 👇 */ - 0 0 0 1px hsla(0, 0%, 0%, 0.05), - /* multiple soft shadows 👇 */ - 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), - 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), - 0 3.5px 6px hsla(0, 0%, 0%, 0.09);; -} + --border-radius-small: 3px; + --border-radius-medium: 7px; + --elevation-high: 0px 5px 5px 0px rgba(22, 22, 22, 0.5); + --transitions-duration: 0.2s; +} diff --git a/src/lib/nav.html b/src/lib/nav.html index 67b556c..46c64dd 100644 --- a/src/lib/nav.html +++ b/src/lib/nav.html @@ -1,46 +1,24 @@ {% macro language_button(code, label) -%} - - {{ code }} - + {% if context.current_language != code %} + + {{ code }} + + {% endif %} {%- endmacro %} - +
+
- - + {{ gettext('Collective') }} + {{ gettext('Games') }} + {{ gettext('News') }} + {{ gettext('Contact') }}
-
-
- -
-
-
- {{ context.language() }} - {{ language_button('fr', 'Site en français') }} +
+
+ {{ language_button('fr', 'Version Française') }} {{ language_button('en', 'English version') }}
diff --git a/src/lib/nav.scss b/src/lib/nav.scss index 76a5edc..85491c8 100644 --- a/src/lib/nav.scss +++ b/src/lib/nav.scss @@ -1,211 +1,185 @@ -.nav-bar { - --background: var(--dark); - --mobile-nav-height: 47px; +%nav-button { + @extend %button; + --background: transparent; + --background-hover: var(--color-accent); +} + +.nav-bar { + --desktop-height: 75px; + --desktop-logo-width: 145px; + // Put the logo up this number of pixel when scrolling + --desktop-dock-logo-offset: -73px; + + --mobile-height: 47px; + --mobile-logo-width: 100px; + + // Put the logo up this number of pixel when scrolling + --mobile-dock-logo-offset: -52px; - display: grid; position: sticky; top: 0; - height: 82px; padding: 0; + display: grid; grid-template-columns: auto minmax(0px, var(--width)) auto; - background: var(--background); - box-shadow: var(--box-shadow); + box-shadow: var(--elevation-high); + background: var(--color-dark-gradient); @media ($mobile-breakpoint) { - height: var(--mobile-nav-height); margin-bottom: 65px; } &--content { - margin: 0; - display: grid; grid-area: 1 / 2 / 2 / 3; - grid-template-columns: 155px 1fr auto; - } + height: var(--desktop-height); + margin: 0; - &--brand { - position: relative; - grid-area: 1 / 1 / 2 / 2; - padding: 0; - transition: margin-top 0.2s ease-out; + display: grid; + grid-template-columns: 1fr auto auto; @media ($mobile-breakpoint) { - width: 100px; + height: var(--mobile-height); } } - &__scrolled &--brand { - margin-top: -80px; - } - - @media ($mobile-breakpoint) { - &__scrolled &--brand, &__open &--brand { - margin-top: -52px; - } - } - - &--logo-wrapper { - width: 100%; - background: var(--dark); - position: absolute; - display: grid; - box-shadow: var(--box-shadow); - padding: var(--space-small); - transition: padding-bottom 0.2s ease-out; - } - - &__scrolled &--logo-wrapper { - padding-bottom: 0; - box-shadow: none; - } - &--logo { - width: 100%; + position: absolute; + box-shadow: var(--elevation-high); + top: 0; + width: var(--desktop-logo-width); + padding: var(--space-small); + + background: var(--color-dark); + transition: top var(--transitions-duration) ease-out; + + @media($mobile-breakpoint) { + width: var(--mobile-logo-width); + } + } + + &__docked &--logo, &__open &--logo { + top: var(--desktop-dock-logo-offset); + box-shadow: none; + background: transparent; + + @media ($mobile-breakpoint) { + top: var(--mobile-dock-logo-offset); + } + } + + // Override the transparent background and box-shadow: none until the + // docking transition ends (see nav.js) + &__docking &--logo { + background: var(--color-dark); + box-shadow: var(--elevation-high); } &--menu { - grid-area: 1 / 2 / 2 / 3; - overflow: hidden; - background: var(--background); - display: grid; - grid-template-columns: 1fr auto; + justify-self: end; + align-self: center; + + display: flex; @media ($mobile-breakpoint) { + z-index: -1; + position: absolute; - top: var(--mobile-nav-height); + top: -500px; width: 100%; - max-height: 0; - display: flex; + + box-shadow: var(--elevation-high); + padding: 0 var(--space-medium); + flex-direction: column; - transition: all 0.2s ease-out; + gap: var(--space-small); + + background: var(--color-dark); + transition: all var(--transitions-duration) ease-in-out; } } &__open &--menu { - max-height: 230px; - } - - &--menu-section { - display: flex; - flex-direction: row; - justify-content: space-around; - padding: 0; - margin: 0; - @media ($mobile-breakpoint) { - flex-direction: column; - - &:not(:last-child) { - border-bottom: 2px solid var(--primary-color); - } - } + top: 0; + padding-top: calc(var(--mobile-height) + var(--space-small)); + padding-bottom: var(--space-small); } &--menu-item { list-style: none; - flex-grow: 1; - display: flex; - } &--menu-link { - flex-grow: 1; - display: flex; - justify-content: center; - align-items: center; + @extend %nav-button; + } - font-family: Knewave; - font-size: var(--fz-4); - color: var(--primary-color); - text-transform: uppercase; - text-decoration: none; + &--separator { + align-self: center; + height: 40%; + width: 2px; + margin: 0 var(--space-small); - @media ($mobile-breakpoint) { - padding: var(--space-small); - justify-content: start; - } + background: var(--color-on-accent); - &:hover { - background: var(--primary-color); - color: var(--on-primary); + @media($mobile-breakpoint) { + display: none; } } - &--language-section { - grid-area: 1 / 3 / 2 / 4; + &--languages { + align-self: center; + padding: 0 var(--space-xsmall); + display: flex; - align-items: center; gap: var(--space-small); + + @media($mobile-breakpoint) { + grid-area: 1 / 3 / 2 / 4; + } } &--language-link { - border-radius: 3px; - border: 1px solid transparent; - padding: var(--space-small); + @extend %nav-button; + padding: var(--space-small); - display: flex; - flex-direction: column; - - background: var(--dark); - color: var(--primary-color); - - font-size: var(--fz-4); - font-weight: bold; - text-decoration: none; - text-transform: uppercase; - - @media ($mobile-breakpoint) { + @media($mobile-breakpoint) { padding: var(--space-xsmall); } - - &:hover, &:focus { - border-color: var(--primary-color); - } - - &:after { - content: ""; - background: transparent; - height: 3px; - } - - &__active:after { - background: var(--primary-color); - } } &--toggle-button { display: none; - cursor: pointer; - margin: 0 var(--space-small) 0 var(--space-medium); - align-self: center; grid-area: 1 / 4 / 2 / 5; + align-self: center; + margin: 0 var(--space-medium); + + cursor: pointer; @media ($mobile-breakpoint) { display: block; } .bar { - display: block; - position: initial; - background-color: var(--primary-color); width: 25px; height: 3px; - transition: all 0.3s ease-out; margin: 5px 0; + + display: block; + background-color: var(--color-on-accent); + transition: all 0.3s ease-out; } } &__open &--toggle-button { .bar { - opacity: 0; - - &:first-child { - opacity: 1; + &:nth-child(1) { transform: translateY(8px) rotate(-45deg); } - &:last-child { - opacity: 1; + &:nth-child(2) { + opacity: 0; + } + + &:nth-child(3) { transform: translateY(-8px) rotate(45deg); } } diff --git a/src/pages/index/games.scss b/src/pages/index/games.scss index c29285e..8d46d30 100644 --- a/src/pages/index/games.scss +++ b/src/pages/index/games.scss @@ -19,13 +19,13 @@ display: flex; flex-direction: column; align-items: center; - background: var(--primary-color); + background: var(--primary); color: var(--dark); } &--more-button { background: var(--dark); - color: var(--primary-color); + color: var(--primary); padding: var(--space-small) var(--space-medium); text-decoration: none; font-family: Knewave; diff --git a/src/pages/index/news.scss b/src/pages/index/news.scss index 1c705ab..01e7803 100644 --- a/src/pages/index/news.scss +++ b/src/pages/index/news.scss @@ -27,7 +27,7 @@ display: flex; flex-direction: column; align-items: center; - background: var(--primary-color); + background: var(--primary); color: var(--dark); } } diff --git a/src/style.scss b/src/style.scss index 0ef47df..0508a7a 100644 --- a/src/style.scss +++ b/src/style.scss @@ -1,6 +1,7 @@ @import 'lib/css/variables.scss'; @import 'lib/css/content.scss'; +@import 'lib/css/controls.scss'; @import 'lib/css/reset.scss'; @import 'lib/css/typo.scss';