css: polish navbar integration
This commit is contained in:
parent
ce55d56bbb
commit
1cfc786947
|
|
@ -8,7 +8,7 @@ msgid ""
|
||||||
msgstr ""
|
msgstr ""
|
||||||
"Project-Id-Version: PROJECT VERSION\n"
|
"Project-Id-Version: PROJECT VERSION\n"
|
||||||
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\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"
|
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
|
||||||
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
|
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
|
||||||
"Language: fr\n"
|
"Language: fr\n"
|
||||||
|
|
@ -19,21 +19,21 @@ msgstr ""
|
||||||
"Content-Transfer-Encoding: 8bit\n"
|
"Content-Transfer-Encoding: 8bit\n"
|
||||||
"Generated-By: Babel 2.15.0\n"
|
"Generated-By: Babel 2.15.0\n"
|
||||||
|
|
||||||
#: src/lib/nav.html:18
|
#: src/lib/nav.html:21
|
||||||
msgid "Collective"
|
msgid "Collective"
|
||||||
msgstr "Collectif"
|
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"
|
msgid "Games"
|
||||||
msgstr "Jeux"
|
msgstr "Jeux"
|
||||||
|
|
||||||
#: src/lib/nav.html:24
|
#: src/lib/nav.html:23
|
||||||
msgid "News"
|
msgid "News"
|
||||||
msgstr "Actualités"
|
msgstr "Actus"
|
||||||
|
|
||||||
#: src/lib/nav.html:27
|
#: src/lib/nav.html:24
|
||||||
msgid "Contact Us"
|
msgid "Contact"
|
||||||
msgstr "Nous Contacter"
|
msgstr "Contact"
|
||||||
|
|
||||||
#: src/pages/index/presentation.html:9
|
#: src/pages/index/presentation.html:9
|
||||||
msgid ""
|
msgid ""
|
||||||
|
|
@ -45,11 +45,11 @@ msgid ""
|
||||||
msgstr ""
|
msgstr ""
|
||||||
"Bienvenue dans le monde soyeux de la compagnie des grenouilles, où les "
|
"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 "
|
"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 "
|
"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 "
|
" cœur du 16ème arrondissement. Non, nous sommes justes deux âmes "
|
||||||
"lovées près de quelques transistors, animés par l'envie insatiable de "
|
"PASSIONNÉES lovées près de quelques transistors, animés par l'envie "
|
||||||
"confectionner des pépites de joie, que nous vendrons ensuite au baudaud "
|
"insatiable de confectionner des pépites de joie, que nous vendrons "
|
||||||
" contre une somme relativement anectodique."
|
"ensuite au baudaud contre une somme relativement anectodique."
|
||||||
|
|
||||||
#: src/pages/index/presentation.html:19
|
#: src/pages/index/presentation.html:19
|
||||||
msgid ""
|
msgid ""
|
||||||
|
|
@ -64,19 +64,19 @@ msgid ""
|
||||||
"treacherous waters of game development."
|
"treacherous waters of game development."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
"Nous sommes les spécialiste de l'aventure façon canapé-cocktail, que "
|
"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"
|
"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."
|
" 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 "
|
".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 "
|
"(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 "
|
"empêcher d'y revenir, tels de jolis cachets d'oxycodone. Mais, vous vous "
|
||||||
"vous demandez peut-être comment deux personnes peuvent se partager la "
|
"demandez peut-être comment deux personnes peuvent se partager la barre "
|
||||||
"barre dans cet océan de pixels ? C'est grâce à cette douce, douce magie "
|
"dans cet océan de pixels ? C'est grâce à cette douce, douce magie de la "
|
||||||
"de la prise de décision collective. (N.D.T : Chat GPT n'a clairement "
|
"prise de décision collective. (N.D.T : Chat GPT n'a clairement jamais "
|
||||||
"jamais fait partie d'une organisation de gauche pour sortir des trucs "
|
"fait partie d'une organisation de gauche pour sortir des trucs aussi "
|
||||||
"aussi cons). Nous sommes le yin et yang, nous tempérant l'un l'autre "
|
"cons). Nous sommes le yin et yang, nous tempérant l'un l'autre nos "
|
||||||
"nos écueils et nos force, lorsque nous navigons dans les eaux scabreuses"
|
"écueils et nos force, lorsque nous navigons dans les eaux scabreuses du "
|
||||||
" du développement de logiciels vidéo-ludiques (N.D.T, mais par contre il"
|
"développement de logiciels vidéo-ludiques (N.D.T, mais par contre il sait"
|
||||||
" sait admirablement amener une pointe d'érotisme là où on en attend pas)."
|
" admirablement amener une pointe d'érotisme là où on en attend pas)."
|
||||||
|
|
||||||
#: src/pages/index/presentation.html:33
|
#: src/pages/index/presentation.html:33
|
||||||
msgid ""
|
msgid ""
|
||||||
|
|
@ -91,6 +91,7 @@ msgid ""
|
||||||
"where small is mighty, and fun knows no bounds!"
|
"where small is mighty, and fun knows no bounds!"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/index/presentation.html:45
|
#: src/pages/index/presentation.html:46
|
||||||
msgid "Members"
|
msgid "Members"
|
||||||
msgstr "Membres"
|
msgstr "Membres"
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,53 @@
|
||||||
class NavBar extends HTMLElement {
|
class NavBar extends HTMLElement {
|
||||||
connectedCallback() {
|
#dockingTimeout
|
||||||
document.addEventListener("scroll", this.onScroll.bind(this))
|
|
||||||
}
|
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
document.addEventListener("scroll", this.onScroll.bind(this))
|
||||||
|
this.addEventListener('transitionend', this.onTransitionEnd.bind(this))
|
||||||
|
this.onScroll()
|
||||||
|
}
|
||||||
|
|
||||||
onScroll(evt) {
|
onScroll() {
|
||||||
const scrollThreshold = this.getAttribute('scroll-threshold')
|
const scrollThreshold = parseInt(this.getAttribute('dock-logo-scroll-threshold'))
|
||||||
if(window.scrollY > scrollThreshold) {
|
const style = getComputedStyle(document.body)
|
||||||
this.classList.add("nav-bar__scrolled")
|
|
||||||
}
|
if(window.scrollY > scrollThreshold && !this.classList.contains("nav-bar__docked")) {
|
||||||
else {
|
this.classList.add("nav-bar__docking")
|
||||||
this.classList.remove("nav-bar__scrolled")
|
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 {
|
class ToggleNavBarButton extends HTMLElement {
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this.addEventListener('click', this.onClick.bind(this))
|
this.addEventListener('click', this.onClick.bind(this))
|
||||||
const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize';
|
const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize';
|
||||||
window.addEventListener(windowsChangeEvent, this.close.bind(this))
|
window.addEventListener(windowsChangeEvent, this.close.bind(this))
|
||||||
}
|
}
|
||||||
|
|
||||||
get navbar() {
|
get navbar() {
|
||||||
const navbar = this.closest('nav-bar')
|
const navbar = this.closest('nav-bar')
|
||||||
console.assert(navbar !== undefined)
|
console.assert(navbar !== undefined)
|
||||||
return navbar
|
return navbar
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick(evt) {
|
onClick(evt) {
|
||||||
this.navbar.classList.toggle('nav-bar__open')
|
this.navbar.classList.toggle('nav-bar__open')
|
||||||
evt.preventDefault()
|
evt.preventDefault()
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
this.navbar.classList.remove('nav-bar__open')
|
this.navbar.classList.remove('nav-bar__open')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.customElements.define('nav-bar', NavBar)
|
window.customElements.define('nav-bar', NavBar)
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,13 +1,17 @@
|
||||||
$mobile-breakpoint: "max-width: 768px";
|
$mobile-breakpoint: "max-width: 768px";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--color: #161616;
|
--color-text: #161616;
|
||||||
|
|
||||||
--primary-color: #E04855;
|
--color-primary: #aa1d29;
|
||||||
--on-primary: white;
|
--color-on-primary: white;
|
||||||
|
|
||||||
--dark: #282828;
|
--color-accent: #161616;
|
||||||
--on-dark: #E04855;
|
--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-xsmall: 5px;
|
||||||
--space-small: 10px;
|
--space-small: 10px;
|
||||||
|
|
@ -22,14 +26,9 @@ $mobile-breakpoint: "max-width: 768px";
|
||||||
--fz-3: 1.5rem;
|
--fz-3: 1.5rem;
|
||||||
--fz-4: 1.125rem;
|
--fz-4: 1.125rem;
|
||||||
|
|
||||||
--box-shadow: 0px 5px 5px 0px rgba(22,22,22,0.5);
|
--border-radius-small: 3px;
|
||||||
--button-shadow: inset 0 0 0.5px 1px hsla(0, 0%,
|
--border-radius-medium: 7px;
|
||||||
100%, 0.075),
|
--elevation-high: 0px 5px 5px 0px rgba(22, 22, 22, 0.5);
|
||||||
/* 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);;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
--transitions-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,24 @@
|
||||||
{% macro language_button(code, label) -%}
|
{% macro language_button(code, label) -%}
|
||||||
<a class="
|
{% if context.current_language != code %}
|
||||||
nav-bar--language-link
|
<a class="nav-bar--language-link" href="/{{code}}/" aria-label="{{label}}"
|
||||||
{% if context.current_language == code %}nav-bar--language-link__active{% endif %}
|
>
|
||||||
"
|
{{ code }}
|
||||||
href="/{{code}}/"
|
</a>
|
||||||
aria-label="{{label}}"
|
{% endif %}
|
||||||
>
|
|
||||||
{{ code }}
|
|
||||||
</a>
|
|
||||||
{%- endmacro %}
|
{%- endmacro %}
|
||||||
|
|
||||||
<nav-bar class="nav-bar" id="nav-bar">
|
<nav-bar class="nav-bar" dock-logo-scroll-threshold="130">
|
||||||
<div class="nav-bar--content">
|
<div class="nav-bar--content">
|
||||||
|
<img class="nav-bar--logo" src="/img/nav-logo.png"></img>
|
||||||
<div class="nav-bar--menu">
|
<div class="nav-bar--menu">
|
||||||
<ul class="nav-bar--menu-section">
|
<a href="#" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
|
||||||
<li class="nav-bar--menu-item">
|
<a href="#" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
|
||||||
<a href="#" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
|
<a href="#" class="nav-bar--menu-link">{{ gettext('News') }}</a>
|
||||||
</li>
|
<a href="#" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
|
||||||
<li class="nav-bar--menu-item">
|
|
||||||
<a href="#" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-bar--menu-item">
|
|
||||||
<a href="#" class="nav-bar--menu-link">{{ gettext('News') }}</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-bar--menu-item">
|
|
||||||
<a href="#" class="nav-bar--menu-link">{{ gettext('Contact Us') }}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="nav-bar--menu-section">
|
|
||||||
<li class="nav-bar--menu-item">
|
|
||||||
<a href="#" class="nav-bar--menu-link">Itch.io</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-bar--brand">
|
<div class="nav-bar--separator"></div>
|
||||||
<div class="nav-bar--logo-wrapper">
|
<div class="nav-bar--languages">
|
||||||
<img class="nav-bar--logo" src="/img/nav-logo.png"></img>
|
{{ language_button('fr', 'Version Française') }}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="nav-bar--language-section">
|
|
||||||
{{ context.language() }}
|
|
||||||
{{ language_button('fr', 'Site en français') }}
|
|
||||||
{{ language_button('en', 'English version') }}
|
{{ language_button('en', 'English version') }}
|
||||||
</div>
|
</div>
|
||||||
<toggle-nav-bar-button class="nav-bar--toggle-button">
|
<toggle-nav-bar-button class="nav-bar--toggle-button">
|
||||||
|
|
|
||||||
240
src/lib/nav.scss
240
src/lib/nav.scss
|
|
@ -1,211 +1,185 @@
|
||||||
.nav-bar {
|
%nav-button {
|
||||||
--background: var(--dark);
|
@extend %button;
|
||||||
--mobile-nav-height: 47px;
|
--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;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 82px;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
grid-template-columns: auto minmax(0px, var(--width)) auto;
|
grid-template-columns: auto minmax(0px, var(--width)) auto;
|
||||||
background: var(--background);
|
box-shadow: var(--elevation-high);
|
||||||
box-shadow: var(--box-shadow);
|
background: var(--color-dark-gradient);
|
||||||
|
|
||||||
@media ($mobile-breakpoint) {
|
@media ($mobile-breakpoint) {
|
||||||
height: var(--mobile-nav-height);
|
|
||||||
margin-bottom: 65px;
|
margin-bottom: 65px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--content {
|
&--content {
|
||||||
margin: 0;
|
|
||||||
display: grid;
|
|
||||||
grid-area: 1 / 2 / 2 / 3;
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
grid-template-columns: 155px 1fr auto;
|
height: var(--desktop-height);
|
||||||
}
|
margin: 0;
|
||||||
|
|
||||||
&--brand {
|
display: grid;
|
||||||
position: relative;
|
grid-template-columns: 1fr auto auto;
|
||||||
grid-area: 1 / 1 / 2 / 2;
|
|
||||||
padding: 0;
|
|
||||||
transition: margin-top 0.2s ease-out;
|
|
||||||
|
|
||||||
@media ($mobile-breakpoint) {
|
@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 {
|
&--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 {
|
&--menu {
|
||||||
grid-area: 1 / 2 / 2 / 3;
|
justify-self: end;
|
||||||
overflow: hidden;
|
align-self: center;
|
||||||
background: var(--background);
|
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
|
|
||||||
@media ($mobile-breakpoint) {
|
@media ($mobile-breakpoint) {
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: var(--mobile-nav-height);
|
top: -500px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 0;
|
|
||||||
display: flex;
|
box-shadow: var(--elevation-high);
|
||||||
|
padding: 0 var(--space-medium);
|
||||||
|
|
||||||
flex-direction: column;
|
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 {
|
&__open &--menu {
|
||||||
max-height: 230px;
|
top: 0;
|
||||||
}
|
padding-top: calc(var(--mobile-height) + var(--space-small));
|
||||||
|
padding-bottom: var(--space-small);
|
||||||
&--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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--menu-item {
|
&--menu-item {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--menu-link {
|
&--menu-link {
|
||||||
flex-grow: 1;
|
@extend %nav-button;
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
font-family: Knewave;
|
&--separator {
|
||||||
font-size: var(--fz-4);
|
align-self: center;
|
||||||
color: var(--primary-color);
|
height: 40%;
|
||||||
text-transform: uppercase;
|
width: 2px;
|
||||||
text-decoration: none;
|
margin: 0 var(--space-small);
|
||||||
|
|
||||||
@media ($mobile-breakpoint) {
|
background: var(--color-on-accent);
|
||||||
padding: var(--space-small);
|
|
||||||
justify-content: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
@media($mobile-breakpoint) {
|
||||||
background: var(--primary-color);
|
display: none;
|
||||||
color: var(--on-primary);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--language-section {
|
&--languages {
|
||||||
grid-area: 1 / 3 / 2 / 4;
|
align-self: center;
|
||||||
|
padding: 0 var(--space-xsmall);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-small);
|
gap: var(--space-small);
|
||||||
|
|
||||||
|
@media($mobile-breakpoint) {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--language-link {
|
&--language-link {
|
||||||
border-radius: 3px;
|
@extend %nav-button;
|
||||||
border: 1px solid transparent;
|
padding: var(--space-small);
|
||||||
padding: var(--space-small);
|
|
||||||
|
|
||||||
display: flex;
|
@media($mobile-breakpoint) {
|
||||||
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) {
|
|
||||||
padding: var(--space-xsmall);
|
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 {
|
&--toggle-button {
|
||||||
display: none;
|
display: none;
|
||||||
cursor: pointer;
|
|
||||||
margin: 0 var(--space-small) 0 var(--space-medium);
|
|
||||||
align-self: center;
|
|
||||||
grid-area: 1 / 4 / 2 / 5;
|
grid-area: 1 / 4 / 2 / 5;
|
||||||
|
align-self: center;
|
||||||
|
margin: 0 var(--space-medium);
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
@media ($mobile-breakpoint) {
|
@media ($mobile-breakpoint) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
display: block;
|
|
||||||
position: initial;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
background-color: var(--color-on-accent);
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__open &--toggle-button {
|
&__open &--toggle-button {
|
||||||
.bar {
|
.bar {
|
||||||
opacity: 0;
|
&:nth-child(1) {
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(8px) rotate(-45deg);
|
transform: translateY(8px) rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:nth-child(2) {
|
||||||
opacity: 1;
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
transform: translateY(-8px) rotate(45deg);
|
transform: translateY(-8px) rotate(45deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,13 +19,13 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: var(--primary-color);
|
background: var(--primary);
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--more-button {
|
&--more-button {
|
||||||
background: var(--dark);
|
background: var(--dark);
|
||||||
color: var(--primary-color);
|
color: var(--primary);
|
||||||
padding: var(--space-small) var(--space-medium);
|
padding: var(--space-small) var(--space-medium);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-family: Knewave;
|
font-family: Knewave;
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: var(--primary-color);
|
background: var(--primary);
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
@import 'lib/css/variables.scss';
|
@import 'lib/css/variables.scss';
|
||||||
|
|
||||||
@import 'lib/css/content.scss';
|
@import 'lib/css/content.scss';
|
||||||
|
@import 'lib/css/controls.scss';
|
||||||
@import 'lib/css/reset.scss';
|
@import 'lib/css/reset.scss';
|
||||||
@import 'lib/css/typo.scss';
|
@import 'lib/css/typo.scss';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue