From df7e857445385787dedae74249277f5bba9f15c2 Mon Sep 17 00:00:00 2001 From: Robert Schuster Date: Sun, 26 Jan 2025 20:53:58 +0100 Subject: [PATCH 1/9] feat: navigation --- themes/fiptheme/assets/js/countrySelector.js | 20 ++++++++++++++ themes/fiptheme/assets/js/main.js | 2 ++ themes/fiptheme/assets/js/mediaqueries.js | 11 ++++++++ themes/fiptheme/assets/js/mobileMenu.js | 17 ------------ themes/fiptheme/assets/js/resizeObserver.js | 28 ++++++++++++++++++++ themes/fiptheme/assets/sass/navigation.scss | 18 +++++-------- 6 files changed, 68 insertions(+), 28 deletions(-) create mode 100644 themes/fiptheme/assets/js/countrySelector.js create mode 100644 themes/fiptheme/assets/js/resizeObserver.js diff --git a/themes/fiptheme/assets/js/countrySelector.js b/themes/fiptheme/assets/js/countrySelector.js new file mode 100644 index 0000000..e66acd8 --- /dev/null +++ b/themes/fiptheme/assets/js/countrySelector.js @@ -0,0 +1,20 @@ +import * as mq from './mediaqueries'; + +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 (document.readyState === "interactive") { + initCountrySelector(); +} else { + window.addEventListener("DOMContentLoaded", () => { + initCountrySelector(); + }); +} + diff --git a/themes/fiptheme/assets/js/main.js b/themes/fiptheme/assets/js/main.js index 156c06f..0995dd3 100644 --- a/themes/fiptheme/assets/js/main.js +++ b/themes/fiptheme/assets/js/main.js @@ -1,2 +1,4 @@ import './mobileMenu.js'; +import './countrySelector.js'; +import './resizeObserver.js'; import './mediaqueries.js'; diff --git a/themes/fiptheme/assets/js/mediaqueries.js b/themes/fiptheme/assets/js/mediaqueries.js index c8c1b86..bff53a2 100644 --- a/themes/fiptheme/assets/js/mediaqueries.js +++ b/themes/fiptheme/assets/js/mediaqueries.js @@ -1,3 +1,14 @@ +/** + * Usage: + * import * as mq from '../helpers/mediaqueries'; + *================================================== + */ +export const maxXS = '(max-width: 575px)'; +export const maxSM = '(max-width: 751px)'; +export const maxMD = '(max-width: 967px)'; +export const maxLG = '(max-width: 1182px)'; +export const maxXL = '(max-width: 1463px)'; + export const minSM = '(min-width: 576px)'; export const minMD = '(min-width: 752px)'; export const minLG = '(min-width: 968px)'; diff --git a/themes/fiptheme/assets/js/mobileMenu.js b/themes/fiptheme/assets/js/mobileMenu.js index 6128248..6a0fa43 100644 --- a/themes/fiptheme/assets/js/mobileMenu.js +++ b/themes/fiptheme/assets/js/mobileMenu.js @@ -1,42 +1,25 @@ import * as mq from './mediaqueries'; function initMobileMenu() { - console.log('huhu2'); const menuButton = document.querySelector('.o-nav__menu-button'); const closeButton = document.querySelector('.o-nav__close-button'); const navContainer = document.querySelector('.o-header__nav'); menuButton.addEventListener('click', () => { - console.log('CLICKED'); navContainer.classList.add("o-header__nav--open"); }); closeButton.addEventListener('click', () => { - console.log('CLICKED'); navContainer.classList.remove("o-header__nav--open"); }); } -function resizeObserver() { - window.addEventListener("resize", () => { - const navContainer = document.querySelector('.o-header__nav'); - if (window.matchMedia(mq.minMD).matches) { - navContainer.classList.remove("o-header__nav--open"); - console.log('resized'); - } - }); -} - if (document.readyState === "interactive") { - console.log('DOM ready'); initMobileMenu(); - resizeObserver(); } else { window.addEventListener("DOMContentLoaded", () => { - console.log('DOM ready'); initMobileMenu(); - resizeObserver(); }); } diff --git a/themes/fiptheme/assets/js/resizeObserver.js b/themes/fiptheme/assets/js/resizeObserver.js new file mode 100644 index 0000000..1dba16d --- /dev/null +++ b/themes/fiptheme/assets/js/resizeObserver.js @@ -0,0 +1,28 @@ +import * as mq from './mediaqueries'; + +function resizeObserver() { + const navContainer = document.querySelector('.o-header__nav'); + 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"); + } + + //close country selector on viewports < md + if (window.matchMedia(mq.maxSM).matches) { + countryContainer.classList.remove("o-header__item-countries--open"); + } + }); +} + +if (document.readyState === "interactive") { + resizeObserver(); +} else { + window.addEventListener("DOMContentLoaded", () => { + resizeObserver(); + }); +} + diff --git a/themes/fiptheme/assets/sass/navigation.scss b/themes/fiptheme/assets/sass/navigation.scss index bc2c081..8f5d12c 100644 --- a/themes/fiptheme/assets/sass/navigation.scss +++ b/themes/fiptheme/assets/sass/navigation.scss @@ -88,6 +88,7 @@ border: none; background: none; width: fit-content; + text-align: right; } .o-header__expand-button img, @@ -99,11 +100,11 @@ height: auto; } -.o-header__item menu { - visibility: unset; +.o-header__item .o-header__item-countries { + display: flex; @include media-breakpoint-up(md) { - visibility: hidden; + display: none; z-index: 2; position: absolute; padding: 1rem; @@ -111,16 +112,11 @@ background-color: white; box-shadow: 0 .4rem 1rem 0 rgba(0,0,0,.1); border-radius: .4rem; - - &:before { - content: ""; - position: absolute; - } } -} -.o-header__expand-button:is(:hover, :focus-visible) ~ menu { - visibility: visible; + &.o-header__item-countries--open { + display: flex; + } } .o-nav__close-button, From 3e39846f2d7d92e83610e5abd1b6a96639a8660c Mon Sep 17 00:00:00 2001 From: Robert Schuster Date: Sun, 26 Jan 2025 21:06:04 +0100 Subject: [PATCH 2/9] feat: navigation --- themes/fiptheme/assets/js/mobileMenu.js | 27 ++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/themes/fiptheme/assets/js/mobileMenu.js b/themes/fiptheme/assets/js/mobileMenu.js index 6a0fa43..bc04e54 100644 --- a/themes/fiptheme/assets/js/mobileMenu.js +++ b/themes/fiptheme/assets/js/mobileMenu.js @@ -4,15 +4,36 @@ function initMobileMenu() { const menuButton = document.querySelector('.o-nav__menu-button'); const closeButton = document.querySelector('.o-nav__close-button'); - const navContainer = document.querySelector('.o-header__nav'); menuButton.addEventListener('click', () => { - navContainer.classList.add("o-header__nav--open"); + openMobileMenu() }); closeButton.addEventListener('click', () => { - navContainer.classList.remove("o-header__nav--open"); + closeMobileMenu() }); + + window.onclick = e => { + if (e.target.classList.contains('o-header__curtain')) { + closeMobileMenu(); + } + } +} + +function openMobileMenu() { + const navContainer = document.querySelector('.o-header__nav'); + const menuButton = document.querySelector('.o-nav__menu-button'); + + navContainer.classList.add("o-header__nav--open"); + menuButton.setAttribute('aria-expanded', true); +} + +function closeMobileMenu() { + const navContainer = document.querySelector('.o-header__nav'); + const menuButton = document.querySelector('.o-nav__menu-button'); + + navContainer.classList.remove("o-header__nav--open"); + menuButton.setAttribute('aria-expanded', false); } if (document.readyState === "interactive") { From 5590ff2fe7eff9995efd86d91abc257e5ee91f4b Mon Sep 17 00:00:00 2001 From: Robert Schuster Date: Sun, 26 Jan 2025 21:16:55 +0100 Subject: [PATCH 3/9] feat: navigation --- themes/fiptheme/assets/js/countrySelector.js | 8 ++++++-- themes/fiptheme/assets/js/resizeObserver.js | 2 ++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/themes/fiptheme/assets/js/countrySelector.js b/themes/fiptheme/assets/js/countrySelector.js index e66acd8..8b0adb3 100644 --- a/themes/fiptheme/assets/js/countrySelector.js +++ b/themes/fiptheme/assets/js/countrySelector.js @@ -1,5 +1,3 @@ -import * as mq from './mediaqueries'; - function initCountrySelector() { const expandButton = document.querySelector('.o-header__expand-button'); @@ -7,6 +5,12 @@ function initCountrySelector() { 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"); + } }); } diff --git a/themes/fiptheme/assets/js/resizeObserver.js b/themes/fiptheme/assets/js/resizeObserver.js index 1dba16d..725a599 100644 --- a/themes/fiptheme/assets/js/resizeObserver.js +++ b/themes/fiptheme/assets/js/resizeObserver.js @@ -2,6 +2,7 @@ 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", () => { @@ -9,6 +10,7 @@ function resizeObserver() { //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 From ed908d8a9af5d3b42e2d75c1b558a4eda5a3b5d9 Mon Sep 17 00:00:00 2001 From: Robert Schuster Date: Sun, 26 Jan 2025 21:22:18 +0100 Subject: [PATCH 4/9] feat: navigation --- themes/fiptheme/assets/sass/navigation.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/themes/fiptheme/assets/sass/navigation.scss b/themes/fiptheme/assets/sass/navigation.scss index 8f5d12c..d9557c8 100644 --- a/themes/fiptheme/assets/sass/navigation.scss +++ b/themes/fiptheme/assets/sass/navigation.scss @@ -100,6 +100,10 @@ height: auto; } +.o-header__expand-button:has(~ .o-header__item-countries--open) img { + transform: rotate(180deg); +} + .o-header__item .o-header__item-countries { display: flex; From 5bb9e69362c8cf3c96fb926b10dbdf2bb1f6ff63 Mon Sep 17 00:00:00 2001 From: Robert Schuster Date: Sun, 26 Jan 2025 21:30:22 +0100 Subject: [PATCH 5/9] feat: navigation --- themes/fiptheme/assets/sass/navigation.scss | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/themes/fiptheme/assets/sass/navigation.scss b/themes/fiptheme/assets/sass/navigation.scss index d9557c8..afa357b 100644 --- a/themes/fiptheme/assets/sass/navigation.scss +++ b/themes/fiptheme/assets/sass/navigation.scss @@ -44,6 +44,7 @@ .o-header__logo { display: flex; padding: 1rem; + margin: .3rem; } .o-header__nav menu { @@ -89,6 +90,13 @@ background: none; width: fit-content; text-align: right; + color: black; + font-weight: 700; + + &:hover, + &:focus { + color: red; + } } .o-header__expand-button img, @@ -155,6 +163,10 @@ padding: 0 1rem; overflow-y: scroll; + > menu { + margin-top: 5rem; + } + ul, menu { flex-direction: column; @@ -166,13 +178,16 @@ } > menu > li { - margin-bottom: 3rem; + margin-bottom: 5rem; } h2 { - padding: 1rem; + padding-right: 1rem; text-align: right; margin-bottom: 0; + font-size: 1.4rem; + text-transform: uppercase; + font-weight: 300; } } } From a4683ed16b58e48edf1eed224b8fcee32ebcd7b5 Mon Sep 17 00:00:00 2001 From: Robert Schuster Date: Sun, 26 Jan 2025 21:39:55 +0100 Subject: [PATCH 6/9] feat: link-styling --- themes/fiptheme/assets/sass/navigation.scss | 3 +++ themes/fiptheme/assets/sass/styles.scss | 16 ++++++++++++++-- themes/fiptheme/layouts/_default/baseof.html | 2 +- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/themes/fiptheme/assets/sass/navigation.scss b/themes/fiptheme/assets/sass/navigation.scss index afa357b..b421d37 100644 --- a/themes/fiptheme/assets/sass/navigation.scss +++ b/themes/fiptheme/assets/sass/navigation.scss @@ -61,6 +61,9 @@ padding: 1rem; margin: .3rem; pointer-events: none; + background-color: gainsboro; + border-radius: .4rem; + color: black; &:focus { opacity: 1; diff --git a/themes/fiptheme/assets/sass/styles.scss b/themes/fiptheme/assets/sass/styles.scss index ac85838..a6cf8fa 100644 --- a/themes/fiptheme/assets/sass/styles.scss +++ b/themes/fiptheme/assets/sass/styles.scss @@ -11,8 +11,20 @@ body { a { color: #ec0016; - &:hover { - color: green; + &:hover, + &:focus { + color: #c50014; + } +} + +.o-footer__link { + text-decoration: underline; + color: black; + font-weight: 700; + + &:hover, + &:focus { + color: red; } } diff --git a/themes/fiptheme/layouts/_default/baseof.html b/themes/fiptheme/layouts/_default/baseof.html index 825b236..73b09d8 100644 --- a/themes/fiptheme/layouts/_default/baseof.html +++ b/themes/fiptheme/layouts/_default/baseof.html @@ -8,7 +8,7 @@
{{ partial "header.html" . }}
-
{{ block "main" . }}{{ end }}
+
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
From 8071ec3ea1d936956f4064b4b782b071bda09b76 Mon Sep 17 00:00:00 2001 From: Robert Schuster Date: Sun, 26 Jan 2025 22:00:25 +0100 Subject: [PATCH 7/9] feat: search styling --- themes/fiptheme/assets/sass/stage.scss | 16 ++++++-- themes/fiptheme/layouts/_default/home.html | 41 ++++++++------------ themes/fiptheme/layouts/partials/head.html | 9 +++++ themes/fiptheme/layouts/partials/stage.html | 7 +--- themes/fiptheme/layouts/partials/teaser.html | 2 +- 5 files changed, 41 insertions(+), 34 deletions(-) diff --git a/themes/fiptheme/assets/sass/stage.scss b/themes/fiptheme/assets/sass/stage.scss index 9b343da..592cf3e 100644 --- a/themes/fiptheme/assets/sass/stage.scss +++ b/themes/fiptheme/assets/sass/stage.scss @@ -2,7 +2,7 @@ margin-bottom: 4rem; } -.o-stage img { +.o-stage > img { width: 100%; aspect-ratio: 4/1; max-width: 1320px; @@ -15,17 +15,27 @@ align-items: center; } -.o-stage__search-container { +.o-stage__search { position: absolute; width: 60%; + height: 6rem; left: 50%; transform: translate(-50%); display: flex; + background-color: white; + + .pagefind-ui__drawer { + background-color: white; + padding: 0 1rem; + overscroll-behavior: contain; + height: 26rem; + overflow-y: scroll; + } } .o-stage__search-field { width: 100%; - height: 6rem; + padding-left: 1rem; padding-right: 1rem; background-color: white; diff --git a/themes/fiptheme/layouts/_default/home.html b/themes/fiptheme/layouts/_default/home.html index dfcacff..b40526f 100644 --- a/themes/fiptheme/layouts/_default/home.html +++ b/themes/fiptheme/layouts/_default/home.html @@ -1,27 +1,18 @@ {{ define "main" }} - - - - - {{ partial "stage.html" }} -
- {{ .Content }} - {{ T "country"}}: - {{ range where site.RegularPages "Section" "country"}} - {{ .Title }} - {{ end }} -
-
-
-
-

Die neuesten Neuigkeiten 🔥

- {{ range first 3 (where site.RegularPages "Section" "news") }} - {{ partial "teaser.html" . }} - {{ end }} -
-
+ {{ partial "stage.html" }} +
+ {{ .Content }} + {{ T "country"}}: + {{ range where site.RegularPages "Section" "country"}} + {{ .Title }} + {{ end }} +
+
+
+

Die neuesten Neuigkeiten 🔥

+ {{ range first 3 (where site.RegularPages "Section" "news") }} + {{ partial "teaser.html" . }} + {{ end }} +
+
{{ end }} diff --git a/themes/fiptheme/layouts/partials/head.html b/themes/fiptheme/layouts/partials/head.html index 503befb..60f6b46 100644 --- a/themes/fiptheme/layouts/partials/head.html +++ b/themes/fiptheme/layouts/partials/head.html @@ -10,7 +10,16 @@ {{ $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed") }} {{ $style := resources.Get "sass/main.scss" | toCSS $options | minify }} + + + + + diff --git a/themes/fiptheme/layouts/partials/stage.html b/themes/fiptheme/layouts/partials/stage.html index e40e25c..d86a9ec 100644 --- a/themes/fiptheme/layouts/partials/stage.html +++ b/themes/fiptheme/layouts/partials/stage.html @@ -1,8 +1,5 @@
{{ $image := resources.Get "images/startpage.webp" }} - -
- - -
+ +
\ No newline at end of file diff --git a/themes/fiptheme/layouts/partials/teaser.html b/themes/fiptheme/layouts/partials/teaser.html index 7b73bcf..5cf6eeb 100644 --- a/themes/fiptheme/layouts/partials/teaser.html +++ b/themes/fiptheme/layouts/partials/teaser.html @@ -1,6 +1,6 @@ {{ $image := .Page.Resources.GetMatch "image.webp" }} - + {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ $dateHuman := .Date | time.Format ":date_long" }} From a34f6708b4fb826191ee2b588a1e1af5453ade09 Mon Sep 17 00:00:00 2001 From: Robert Schuster Date: Sun, 26 Jan 2025 22:28:54 +0100 Subject: [PATCH 8/9] feat: search styling --- themes/fiptheme/assets/sass/stage.scss | 38 ++++++++++++-------- themes/fiptheme/assets/sass/styles.scss | 9 ++++- themes/fiptheme/layouts/_default/baseof.html | 2 +- themes/fiptheme/layouts/_default/home.html | 1 + 4 files changed, 34 insertions(+), 16 deletions(-) diff --git a/themes/fiptheme/assets/sass/stage.scss b/themes/fiptheme/assets/sass/stage.scss index 592cf3e..d5c02ca 100644 --- a/themes/fiptheme/assets/sass/stage.scss +++ b/themes/fiptheme/assets/sass/stage.scss @@ -17,31 +17,41 @@ .o-stage__search { position: absolute; - width: 60%; + width: 80%; height: 6rem; left: 50%; transform: translate(-50%); display: flex; - background-color: white; + z-index: 3; + + @include media-breakpoint-up(md) { + width: 60%; + } + + .pagefind-ui__suppressed { + display: none; + } .pagefind-ui__drawer { background-color: white; padding: 0 1rem; overscroll-behavior: contain; - height: 26rem; + height: 35rem; overflow-y: scroll; + position: relative; + top: -.7rem; + border-left: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border); + border-right: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border); + border-bottom: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border); + border-bottom-left-radius: var(--pagefind-ui-border-radius); + border-bottom-right-radius: var(--pagefind-ui-border-radius); } } -.o-stage__search-field { - width: 100%; - - padding-left: 1rem; - padding-right: 1rem; - background-color: white; - border-radius: 1rem 0 0 1rem; -} - -.o-stage__button { - border-radius: 0 1rem 1rem 0; +.curtain:has(~ .o-stage .o-stage__search:focus-within) { + background-color: rgba(0, 0, 0, .8); + inset: 0; + position: fixed; + z-index: 2; + transition: .3s ease; } \ No newline at end of file diff --git a/themes/fiptheme/assets/sass/styles.scss b/themes/fiptheme/assets/sass/styles.scss index a6cf8fa..1e53fe3 100644 --- a/themes/fiptheme/assets/sass/styles.scss +++ b/themes/fiptheme/assets/sass/styles.scss @@ -4,8 +4,15 @@ html { } body { - background-color: $gray-300; + background-color: $gray-200; font-size: 1.8rem; + overflow-x: hidden; + font-family: Arial,Helvetica,sans-serif; +} + +header { + z-index: 3; + position: relative; } a { diff --git a/themes/fiptheme/layouts/_default/baseof.html b/themes/fiptheme/layouts/_default/baseof.html index 73b09d8..b2ca21b 100644 --- a/themes/fiptheme/layouts/_default/baseof.html +++ b/themes/fiptheme/layouts/_default/baseof.html @@ -6,7 +6,7 @@ {{ partial "head.html" . }} - +
{{ partial "header.html" . }}
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
diff --git a/themes/fiptheme/layouts/_default/home.html b/themes/fiptheme/layouts/_default/home.html index b40526f..087e0ec 100644 --- a/themes/fiptheme/layouts/_default/home.html +++ b/themes/fiptheme/layouts/_default/home.html @@ -1,4 +1,5 @@ {{ define "main" }} +
{{ partial "stage.html" }}
{{ .Content }} From ae8aad8fcd36918f504f8ac88052d94f8de6dc1c Mon Sep 17 00:00:00 2001 From: Robert Schuster Date: Mon, 27 Jan 2025 13:48:47 +0100 Subject: [PATCH 9/9] fix: z-index search & navi --- themes/fiptheme/assets/sass/navigation.scss | 2 +- themes/fiptheme/assets/sass/stage.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/fiptheme/assets/sass/navigation.scss b/themes/fiptheme/assets/sass/navigation.scss index b421d37..ed7335f 100644 --- a/themes/fiptheme/assets/sass/navigation.scss +++ b/themes/fiptheme/assets/sass/navigation.scss @@ -161,7 +161,7 @@ right: 0; width: 60%; height: 100%; - z-index: 2; + z-index: 3; background-color: white; padding: 0 1rem; overflow-y: scroll; diff --git a/themes/fiptheme/assets/sass/stage.scss b/themes/fiptheme/assets/sass/stage.scss index d5c02ca..6bd1eb8 100644 --- a/themes/fiptheme/assets/sass/stage.scss +++ b/themes/fiptheme/assets/sass/stage.scss @@ -22,7 +22,7 @@ left: 50%; transform: translate(-50%); display: flex; - z-index: 3; + z-index: 2; @include media-breakpoint-up(md) { width: 60%;