From 9d0c110df285459d775433b888f20f99e2ddcc92 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Tue, 2 Sep 2025 23:01:30 +0200 Subject: [PATCH 01/11] feat: Add operators to navbar & merge dropdown implementations --- assets/js/countrySelector.js | 22 ------- assets/js/languageSwitcher.js | 46 +++++++------- assets/js/main.js | 1 - assets/sass/dropdown.scss | 86 +++++++++++++++++++++++++ assets/sass/footer.scss | 67 +------------------- assets/sass/main.scss | 1 + assets/sass/navigation.scss | 114 +++++++++++++++++++--------------- i18n/de.yaml | 10 ++- i18n/en.yaml | 10 ++- i18n/fr.yaml | 11 +++- layouts/partials/footer.html | 22 ++++--- layouts/partials/header.html | 71 ++++++++++++++++----- 12 files changed, 271 insertions(+), 190 deletions(-) delete mode 100644 assets/js/countrySelector.js create mode 100644 assets/sass/dropdown.scss diff --git a/assets/js/countrySelector.js b/assets/js/countrySelector.js deleted file mode 100644 index dd2f68a3d..000000000 --- a/assets/js/countrySelector.js +++ /dev/null @@ -1,22 +0,0 @@ -function initCountrySelector() { - const expandButton = document.querySelector('.o-header__expand-button'); - const countryContainer = document.querySelector('.o-header__item-countries'); - - expandButton.addEventListener('click', () => { - countryContainer.classList.toggle("o-header__item-countries--open"); - - if (expandButton.getAttribute("aria-expanded") === 'false') { - expandButton.setAttribute("aria-expanded", "true"); - } else { - expandButton.setAttribute("aria-expanded", "false"); - } - }); -} - -if (document.readyState === "interactive") { - initCountrySelector(); -} else { - window.addEventListener("DOMContentLoaded", () => { - initCountrySelector(); - }); -} diff --git a/assets/js/languageSwitcher.js b/assets/js/languageSwitcher.js index 9e36509b7..4847bf0d7 100644 --- a/assets/js/languageSwitcher.js +++ b/assets/js/languageSwitcher.js @@ -1,28 +1,30 @@ document.addEventListener('DOMContentLoaded', function() { - const languageSwitcher = document.querySelector('.o-language-switcher'); + function registerEventListeners(id) { + const button = document.querySelector(`#${id}-button`); + const dropdown = document.querySelector(`#${id}-dropdown`); - if (!languageSwitcher) return; + button.addEventListener('click', function() { + const expanded = button.getAttribute('aria-expanded') === 'true'; + button.setAttribute('aria-expanded', !expanded); + dropdown.setAttribute('aria-hidden', expanded); + }); - const button = languageSwitcher.querySelector('.o-language-switcher__button'); - const dropdown = languageSwitcher.querySelector('.o-language-switcher__dropdown'); + document.addEventListener('click', function(event) { + if (!button.contains(event.target)) { + button.setAttribute('aria-expanded', 'false'); + dropdown.setAttribute('aria-hidden', 'true'); + } + }); - button.addEventListener('click', function() { - const expanded = button.getAttribute('aria-expanded') === 'true'; - button.setAttribute('aria-expanded', !expanded); - dropdown.setAttribute('aria-hidden', expanded); - }); + document.addEventListener('keydown', function(event) { + if (event.key === 'Escape' && button.getAttribute('aria-expanded') === 'true') { + button.setAttribute('aria-expanded', 'false'); + dropdown.setAttribute('aria-hidden', 'true'); + } + }); + } - document.addEventListener('click', function(event) { - if (!languageSwitcher.contains(event.target)) { - button.setAttribute('aria-expanded', 'false'); - dropdown.setAttribute('aria-hidden', 'true'); - } - }); - - document.addEventListener('keydown', function(event) { - if (event.key === 'Escape' && button.getAttribute('aria-expanded') === 'true') { - button.setAttribute('aria-expanded', 'false'); - dropdown.setAttribute('aria-hidden', 'true'); - } - }); + registerEventListeners('language-switcher'); + registerEventListeners('navbar-country-selection'); + registerEventListeners('navbar-operator-selection'); }); diff --git a/assets/js/main.js b/assets/js/main.js index 1344bdca9..56583bd2a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,5 +1,4 @@ import './mobileMenu.js'; -import './countrySelector.js'; import './resizeObserver.js'; import './mediaqueries.js'; import './highlightHeadline.js'; diff --git a/assets/sass/dropdown.scss b/assets/sass/dropdown.scss new file mode 100644 index 000000000..79f23ef15 --- /dev/null +++ b/assets/sass/dropdown.scss @@ -0,0 +1,86 @@ +.o-dropdown { + position: relative; +} + +.o-dropdown__button { + border: 0; + background-color: transparent; + color: var(--color-body); + display: flex; + font-weight: 500; + padding: 1rem; + gap: 0.5rem; + align-items: center; + position: relative; + + &:hover, + &:focus { + color: var(--link-hovered); + transition: all .3s ease; + + & > :not(.material-symbols-rounded) { + text-decoration: underline; + } + } +} + +.o-dropdown__icon { + font-size: 0.7rem; + transition: transform 0.2s; +} + +.o-dropdown__button[aria-expanded="true"] .o-dropdown__icon { + transform: rotate(180deg); +} + +.o-dropdown__menu { + display: none; + position: absolute; + background: var(--bg-default); + border-radius: var(--border-radius-m); + list-style: none; + width: min-content; + margin-bottom: 0; + padding-left: 0; + box-shadow: var(--box-shadow); + z-index: 200; + border: var(--border); + + &--above { + bottom: 100%; + top: auto; + } + + &--below { + top: 100%; + bottom: auto; + } + + &--right { + right: 0; + } +} + +.o-dropdown__button[aria-expanded="true"] + .o-dropdown__menu { + display: grid; +} + +.o-dropdown__item { + margin: 0.8rem 3rem; +} + +.o-dropdown__link { + text-decoration: none; + font-weight: 400; + white-space: nowrap; + + &:hover, + &:focus { + color: var(--link-hovered); + } + + &--active { + color: var(--link-default); + font-weight: 700; + } +} diff --git a/assets/sass/footer.scss b/assets/sass/footer.scss index a0c5c0572..69c140e6d 100644 --- a/assets/sass/footer.scss +++ b/assets/sass/footer.scss @@ -17,10 +17,12 @@ text-decoration: underline; color: var(--link-special); font-weight: 700; + text-decoration: none; &:hover, &:focus { color: var(--link-hovered); + text-decoration: underline; } @media (min-width: #{$breakpoint-lg}) { @@ -37,70 +39,7 @@ gap: 1rem; } -.o-language-switcher { - position: relative; -} -.o-language-switcher__button { - border: 0; - background-color: var(--bg-neutral); - color: var(--color-body); - display: flex; - font-weight: 500; - padding: 1rem 1rem 1rem 0; - gap: 0.5rem; - align-items: center; -} - -.o-language-switcher__icon { - font-size: 0.7rem; - transition: transform 0.2s; -} - -.o-language-switcher__button[aria-expanded="true"] .o-language-switcher__icon { - transform: rotate(180deg); - - @media (max-width: #{$breakpoint-lg}) { - transform: rotate(0deg); - } -} - -.o-language-switcher__dropdown { - display: none; - position: absolute; - bottom: 100%; - right: 0; - background: var(--bg-neutral); - border-top-left-radius: 4px; - border-top-right-radius: 4px; - list-style: none; - width: min-content; - margin-bottom: 0; +#language-switcher-button { padding-left: 0; - box-shadow: var(--box-shadow); - z-index: 20; -} - -.o-language-switcher__button[aria-expanded="true"] + .o-language-switcher__dropdown { - display: block; -} - -.o-language-switcher__item { - margin: 1.6rem 3rem; -} - -.o-language-switcher__link { - text-decoration: none; - font-weight: 400; - white-space: nowrap; - - &:hover, - &:focus { - color: var(--link-hovered); - } - - &--active { - color: var(--link-default); - font-weight: 700; - } } diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 8152fb6f8..5b829a3df 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -17,3 +17,4 @@ @import "button.scss"; @import "startpage.scss"; @import "interactiveMap.scss"; +@import "dropdown.scss"; diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 20b3f324b..82b90e1c7 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -68,12 +68,16 @@ } } -.o-header__nav menu { +.o-header__nav > nav > menu { display: flex; justify-content: space-between; margin: 0; } +.o-header__item > .o-dropdown__button { + font-weight: bold; +} + .o-header__skip-link { opacity: 0; position: absolute; @@ -85,6 +89,7 @@ background-color: var(--bg-neutral); border-radius: var(--border-radius-s); color: var(--bg-default); + z-index: 100; &:focus { opacity: 1; @@ -92,24 +97,63 @@ } } +.o-dropdown__menu > .o-header__item { + display: flex; + + @media (max-width: #{$breakpoint-md}) { + flex-direction: row-reverse; + } +} + .o-header__item { list-style: none; - height: 6rem; display: flex; align-items: center; @media (max-width: #{$breakpoint-md}) { display: block; + + &.o-dropdown { + display: flex; + flex-direction: column; + align-items: end; + } + + .o-dropdown__menu { + position: static; + margin-right: 1rem; + margin-bottom: 1rem; + padding: 0 1rem; + } } ul { display: flex; margin: 0; } + + .o-dropdown__button[aria-expanded="true"] + .o-dropdown__menu { + display: grid; + justify-items: flex-end; + + @media (min-width: #{$breakpoint-md}) { + padding: 1rem; + justify-items: flex-start; + + display: grid; + grid-auto-flow: row; + grid-template-rows: auto; + grid-template-columns: 1fr 1fr 1fr; + column-gap: 1rem; + + @media (max-width: #{$breakpoint-lg}) { + grid-template-columns: 1fr 1fr; + } + } + } } .o-header__item a, -.o-header__expand-button, .o-nav__menu-button, .o-nav__close-button { display: inline-flex; @@ -121,22 +165,26 @@ color: var(--color-body); font-weight: 700; height: fit-content; + text-decoration: none; &:hover, &:focus { + :not(.material-symbols-rounded){ + text-decoration: underline; + } color: var(--link-hovered); } +} - span { - text-decoration: underline; - } +.o-header__item a { + white-space: nowrap; } -.o-header__expand-button { - margin: 0.9rem; +.o-dropdown__menu .o-header__item a { + white-space: nowrap; + min-width: max-content; } -.o-header__expand-button > .material-symbols-rounded, .o-nav__menu-button > .material-symbols-rounded, .o-nav__close-button > .material-symbols-rounded { margin-left: .8rem; @@ -144,33 +192,7 @@ text-decoration: none; } -.o-header__expand-button:has(~ .o-header__item-countries--open) .material-symbols-rounded { - transform: rotate(180deg); -} - -.o-header__item .o-header__item-countries { - display: grid; - justify-items: flex-end; - - @media (min-width: #{$breakpoint-md}) { - display: none; - z-index: 2; - position: absolute; - padding: 1rem; - justify-items: flex-start; - background-color: var(--bg-default); - box-shadow: 0 .4rem 1rem 0 rgba(0,0,0,.1); - border-radius: var(--border-radius-s); - top: 6rem; - &.o-header__item-countries--open { - display: grid; - grid-auto-flow: column; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr; - grid-template-columns: auto; - } - } -} .o-nav__close-button, .o-nav__menu-button { @@ -241,22 +263,6 @@ body:has(.o-header__nav--open) { } } -#menu-country-list-title, -#menu-general-list-title { - padding-right: 1rem; - text-align: right; - margin-bottom: 0; - font-size: 1.4rem; - text-transform: uppercase; - font-weight: 300; - - display: block; - - @media (min-width: #{$breakpoint-md}) { - display: none; - } -} - .a-theme-toggle { padding: 1rem; border: none; @@ -286,3 +292,9 @@ body:has(.o-header__nav--open) { } } } + +#li-header-news { + @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg}) { + display: none; + } +} diff --git a/i18n/de.yaml b/i18n/de.yaml index 5882c48e5..0bab356f7 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -16,7 +16,10 @@ booking: visit-booking-website: Zur Buchungsseite countries: overview: Länder mit FIP Akzeptanz - selection: Länderauswahl + selection: + aria-label: Land auswählen + dropdown-label: Verfügbare Länder + title: Länder without-fip: Länder ohne FIP Akzeptanz country: many: Länder @@ -53,6 +56,11 @@ menu-open: Menü navigate-to-country: Gehe zu Land news-headline: Was gibt's Neues? news-other: Weitere News +operators: + selection: + aria-label: Betreiber auswählen + dropdown-label: Verfügbare Betreiber + title: Betreiber operators_without_fip: Betreiber ohne FIP related: countries: Verwandte Länder diff --git a/i18n/en.yaml b/i18n/en.yaml index 21b762448..5cc6077f5 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -15,7 +15,10 @@ booking: visit-booking-website: To Booking Website countries: overview: Countries with FIP acceptance - selection: choose country + selection: + aria-label: Select a country + dropdown-label: Available countries + title: Countries without-fip: Countries without FIP acceptance country: many: countries @@ -52,6 +55,11 @@ menu-open: Menu navigate-to-country: Navigate to country news-headline: What's new? news-other: Other News +operators: + selection: + aria-label: Select an operator + dropdown-label: Available operators + title: Operators operators_without_fip: Operators without FIP related: countries: Related Countries diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 8aca3c51c..89ecc6e16 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -6,6 +6,7 @@ booking: classes: first: 1re classe second: 2nd classe + fee: Frais de réservation fip-50: Billets FIP 50 fip-global-fare: Tarif global FIP reservation: Réservation @@ -14,7 +15,10 @@ booking: visit-booking-website: Aller sur le site de réservation countries: overview: Pays acceptation FIP - selection: choisir un pays + selection: + aria-label: Sélectionner un pays + dropdown-label: Pays disponibles + title: Pays without-fip: Pays sans acceptation FIP country: many: pays @@ -51,6 +55,11 @@ menu-open: Menu navigate-to-country: Aller au pays news-headline: Quoi de neuf ? news-other: Autres actualités +operators: + selection: + aria-label: Sélectionner un opérateur + dropdown-label: Opérateurs disponibles + title: Opérateurs operators_without_fip: Opérateurs sans FIP related: countries: Pays associés diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8733cbd03..5a599225f 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -19,34 +19,36 @@
{{ T "information-disclaimer-short"}}
-
- - +
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6f68b8d3d..5f7e84ec9 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -19,40 +19,77 @@ {{ partial "icon" "close" }} -
  • - - {{ T "country" }} - + -
    • -
  • - {{ T "general" }} -
      -
    • - {{ partial "theme-toggle" }} + + +
      • +
    • + {{ partial "theme-toggle" }} +
    • From e5f0067d7aea5c8746e427b27f48d185e603f79a Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 25 Sep 2025 08:45:23 +0200 Subject: [PATCH 02/11] feat: Only close dropdown if clicked outside of it --- assets/js/{languageSwitcher.js => dropdown.js} | 2 +- assets/js/main.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename assets/js/{languageSwitcher.js => dropdown.js} (93%) diff --git a/assets/js/languageSwitcher.js b/assets/js/dropdown.js similarity index 93% rename from assets/js/languageSwitcher.js rename to assets/js/dropdown.js index 4847bf0d7..c8a48f602 100644 --- a/assets/js/languageSwitcher.js +++ b/assets/js/dropdown.js @@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', function() { }); document.addEventListener('click', function(event) { - if (!button.contains(event.target)) { + if (!button.contains(event.target) && !dropdown.contains(event.target)) { button.setAttribute('aria-expanded', 'false'); dropdown.setAttribute('aria-hidden', 'true'); } diff --git a/assets/js/main.js b/assets/js/main.js index 56583bd2a..2403ec17d 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -3,6 +3,6 @@ import './resizeObserver.js'; import './mediaqueries.js'; import './highlightHeadline.js'; import './anchorlinks.js'; -import './languageSwitcher.js'; +import './dropdown.js'; import './darkmode.js'; import './interactiveMap.js'; From e9dac7bdb5682899a1f99bb2f762c1ff83faaed3 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 25 Sep 2025 09:21:58 +0200 Subject: [PATCH 03/11] feat: Mark currently active country / operator in navbar --- assets/sass/navigation.scss | 11 +++++++++++ layouts/_default/baseof.html | 2 +- layouts/partials/header.html | 17 +++++++++++------ 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 82b90e1c7..3e6da54c5 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -100,6 +100,15 @@ .o-dropdown__menu > .o-header__item { display: flex; + a { + font-weight: 400; + } + + &--current a { + font-weight: 700; + color: var(--link-hovered) + } + @media (max-width: #{$breakpoint-md}) { flex-direction: row-reverse; } @@ -157,6 +166,7 @@ .o-nav__menu-button, .o-nav__close-button { display: inline-flex; + gap: 0.4em; padding: 1rem; border: none; background: none; @@ -166,6 +176,7 @@ font-weight: 700; height: fit-content; text-decoration: none; + align-items: center; &:hover, &:focus { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 3a4026ea2..34671b89b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -7,7 +7,7 @@ {{ partial "head" . }} - +
    {{ block "main" . }}{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 5f7e84ec9..850510d46 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -19,6 +19,7 @@ {{ partial "icon" "close" }} + {{ $currentPage := . }}
    • @@ -70,9 +73,11 @@ aria-label="{{ T "operators.selection.dropdown-label" }}" > {{ range where site.RegularPages "Section" "operator"}} -
  • - {{ partial "operator-logo" (dict "operator" .File.ContentBaseName) }} - {{ .Title }} +
  • + + {{ partial "operator-logo" (dict "operator" .File.ContentBaseName) }} + {{ .Title }} +
    • {{ end }} From 478adafd3d9485e95fa3b7bfa658c059f20ac404 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 25 Sep 2025 10:15:31 +0200 Subject: [PATCH 04/11] feat: Replace border in mobile navigation menu --- assets/sass/navigation.scss | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 3e6da54c5..6783fb857 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -129,10 +129,14 @@ } .o-dropdown__menu { + box-shadow: none; position: static; margin-right: 1rem; margin-bottom: 1rem; padding: 0 1rem; + border: none; + border-right: 0.4rem solid grey; + border-radius: 0; } } @@ -162,21 +166,35 @@ } } -.o-header__item a, +.o-header__item a { + display: inline-flex; + gap: 0.4em; + padding: 1rem; + text-decoration: none; + color: var(--color-body); + font-weight: 700; + align-items: center; + + &:hover, + &:focus { + text-decoration: underline; + color: var(--link-hovered); + } +} + .o-nav__menu-button, .o-nav__close-button { display: inline-flex; - gap: 0.4em; padding: 1rem; border: none; background: none; width: fit-content; text-align: right; - color: var(--color-body); font-weight: 700; + color: var(--color-body); + height: fit-content; text-decoration: none; - align-items: center; &:hover, &:focus { @@ -249,10 +267,6 @@ padding-left: 0; } - menu li:first-child { - order: 2; - } - > menu > li { margin-bottom: 5rem; } From 523e0a9b5fcb4ce648bd494a4bef7a6d38edb56e Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 25 Sep 2025 10:26:25 +0200 Subject: [PATCH 05/11] feat: Improve padding in navigation bar --- assets/sass/navigation.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 6783fb857..f31274da7 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -284,7 +284,8 @@ body:has(.o-header__nav--open) { .o-header__item-wrapper { @media (min-width: #{$breakpoint-md}) { display: flex; - gap: 1rem; + gap: 0.6rem; + padding-left: 0.6rem; } } From 86d666b5c90254f333768978851c3acf311df167 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 25 Sep 2025 18:54:33 +0200 Subject: [PATCH 06/11] feat: Right-align logos / icons on mobile --- assets/sass/navigation.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index f31274da7..7b3521b10 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -76,6 +76,10 @@ .o-header__item > .o-dropdown__button { font-weight: bold; + + @media (max-width: #{$breakpoint-md}) { + flex-direction: row-reverse; + } } .o-header__skip-link { @@ -102,6 +106,10 @@ a { font-weight: 400; + + @media (max-width: #{$breakpoint-md}) { + flex-direction: row-reverse; + } } &--current a { @@ -109,9 +117,7 @@ color: var(--link-hovered) } - @media (max-width: #{$breakpoint-md}) { - flex-direction: row-reverse; - } + } .o-header__item { From 93f28fe505b1f6a34d6dcba340a845b227341bcc Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Fri, 26 Sep 2025 12:14:00 +0200 Subject: [PATCH 07/11] feat: Add separator between elements in mobile menu --- assets/sass/navigation.scss | 14 ++++++++------ layouts/partials/header.html | 5 +++++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 7b3521b10..59be2f6b1 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -116,8 +116,6 @@ font-weight: 700; color: var(--link-hovered) } - - } .o-header__item { @@ -137,12 +135,9 @@ .o-dropdown__menu { box-shadow: none; position: static; - margin-right: 1rem; margin-bottom: 1rem; - padding: 0 1rem; - border: none; - border-right: 0.4rem solid grey; border-radius: 0; + border: none; } } @@ -280,6 +275,13 @@ .o-header__item { height: fit-content; } + + hr { + width: 100vw; + margin: 0; + margin-right: -1rem; + border-top: 1px dotted grey; + } } } diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 850510d46..a10965a5d 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -21,6 +21,7 @@ {{ $currentPage := . }}
  • +
    • +
    - {{ $currentPage := . }} -
  • -
    - -
  • {{ partial "theme-toggle" }} From 2b571061e358efc8d42b205fd75b37f0ced85761 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Fri, 26 Sep 2025 21:29:42 +0200 Subject: [PATCH 09/11] refactor: Remove resize observer for countries menu --- assets/js/resizeObserver.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/assets/js/resizeObserver.js b/assets/js/resizeObserver.js index 60bd4fcb9..77e949cbe 100644 --- a/assets/js/resizeObserver.js +++ b/assets/js/resizeObserver.js @@ -3,20 +3,13 @@ import * as mq from './mediaqueries'; function resizeObserver() { const navContainer = document.querySelector('.o-header__nav'); const menuButton = document.querySelector('.o-nav__menu-button'); - const countryContainer = document.querySelector('.o-header__item-countries'); window.addEventListener("resize", () => { - //close mobile menu on viewports >= md if (window.matchMedia(mq.minMD).matches) { navContainer.classList.remove("o-header__nav--open"); menuButton.setAttribute('aria-expanded', false); } - - //close country selector on viewports < md - if (window.matchMedia(mq.maxSM).matches) { - countryContainer.classList.remove("o-header__item-countries--open"); - } }); } From b92186264aab8029ec2bb7fd7e01f20d63ec3b85 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Fri, 26 Sep 2025 21:43:27 +0200 Subject: [PATCH 10/11] fix: Place "Skip link" over logo for consistent positioning --- assets/sass/navigation.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 01d75407a..5ccf08107 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -11,6 +11,7 @@ } .o-header__wrapper { + position: relative; display: flex; justify-content: space-between; align-items: center; @@ -97,8 +98,7 @@ menu > li > menu { .o-header__skip-link { opacity: 0; position: absolute; - left: 50%; - transform: translateX(-50%); + left: 0; padding: 1rem; margin: .9rem; pointer-events: none; From ca6aab21c5fad3ad03028fb9be2925313fb7e16f Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 29 Sep 2025 17:52:15 +0200 Subject: [PATCH 11/11] feat: Replace dotted with solid separator in mobile navigation --- assets/sass/navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 5ccf08107..30c58f4c2 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -273,7 +273,7 @@ menu > li > menu { width: 100vw; margin: 0; margin-right: -1rem; - border-top: 2px dotted grey; + border-top: 2px solid grey; } } }