From cd17ad4416298543ed3fca0630188fed4ef005cb Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Sat, 11 Apr 2026 21:05:55 +0200 Subject: [PATCH 01/27] feat: Switch to pagefind component UI --- assets/js/main.js | 1 - assets/js/search.js | 127 --------------- assets/sass/_variables.scss | 18 ++- assets/sass/header.scss | 5 - assets/sass/search.scss | 240 +--------------------------- i18n/de.yaml | 6 - i18n/en.yaml | 6 - i18n/fr.yaml | 6 - layouts/_default/baseof.html | 9 +- layouts/_default/home.html | 7 +- layouts/partials/head.html | 7 +- layouts/partials/search-button.html | 11 +- package-lock.json | 70 ++++---- package.json | 2 +- 14 files changed, 61 insertions(+), 454 deletions(-) delete mode 100644 assets/js/search.js diff --git a/assets/js/main.js b/assets/js/main.js index b9c687e29..5f5d8f53b 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -6,7 +6,6 @@ import "./highlightHeadline.js"; import "./contentNavigation.js"; import "./anchorlinks.js"; import "./dropdown.js"; -import "./search.js"; import "./interactiveMap.js"; import "./expander.js"; import "./dialog.js"; diff --git a/assets/js/search.js b/assets/js/search.js deleted file mode 100644 index 954153852..000000000 --- a/assets/js/search.js +++ /dev/null @@ -1,127 +0,0 @@ -import { - openOverlay, - closeOverlay, - addOverlayClickListener, -} from "./overlay.js"; - -const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); -const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0; - -const initSearch = () => { - const search = document.getElementById("search"); - const searchButtons = document.querySelectorAll(".o-header__search"); - const isHome = document.querySelector(".o-startpage"); - let placeholderText = search.dataset.placeholder; - let searchLabelText = search.dataset.label; - - if (!isMobile) { - if (isMac) { - placeholderText += " (⌘ + K)"; - } else { - placeholderText += " (CTRL + K)"; - } - } - - new PagefindUI({ - element: "#search", - highlightParam: "highlight", - showSubResults: true, - translations: { - placeholder: placeholderText, - search_label: searchLabelText, - }, - }); - - // Close keyboard when touching search results (mobile only) - const searchDrawer = search.querySelector(".pagefind-ui__drawer"); - searchDrawer.addEventListener("touchstart", () => { - if (!isMobile) return; - if (document.activeElement && document.activeElement.blur) { - document.activeElement.blur(); - } - }); - - const searchElement = search.querySelector("input"); - - const updateSearchButtonLabels = (isOpen) => { - searchButtons.forEach((button) => { - const openLabel = button.dataset.labelOpen; - const closeLabel = button.dataset.labelClose; - const label = isOpen ? closeLabel : openLabel; - button.setAttribute("aria-label", label); - button.setAttribute("title", label); - }); - }; - - const closeSearch = () => { - search.querySelector(".pagefind-ui__search-clear").click(); - closeOverlay(); - search.classList.remove("o-search--show"); - updateSearchButtonLabels(false); - }; - - const openSearch = () => { - openOverlay("search"); - search.classList.add("o-search--show"); - searchElement.focus(); - search.scrollIntoView({ behavior: "smooth", block: "start" }); - updateSearchButtonLabels(true); - }; - - if (search && isHome) { - searchElement.addEventListener("focus", () => { - openSearch(); - }); - // If focus moves outside the search, close it - search.addEventListener( - "blur", - (e) => { - if ( - e.relatedTarget && - !search.contains(e.relatedTarget) && - !Array.from(searchButtons).includes(e.relatedTarget) - ) { - closeSearch(); - } - }, - true, - ); - } - - const toggleSearch = () => { - if (search.classList.contains("o-search--show")) { - closeSearch(); - return; - } - openSearch(); - }; - - searchButtons.forEach((button) => { - button.addEventListener("click", toggleSearch); - }); - - // Toggle search on Ctrl + K or Cmd + K - document.addEventListener("keydown", (e) => { - if ((e.ctrlKey || e.metaKey) && e.key === "k") { - e.preventDefault(); - toggleSearch(); - } - }); - - // Close search on ESC - document.addEventListener("keydown", (e) => { - if (e.key === "Escape") { - closeSearch(); - } - }); - - addOverlayClickListener(closeSearch); -}; - -if (document.readyState === "interactive") { - initSearch(); -} else { - window.addEventListener("DOMContentLoaded", () => { - initSearch(); - }); -} diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 05a8d2885..780c78100 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -57,8 +57,12 @@ $highlight-colors-dark: ( ); html { - --pagefind-ui-scale: 1 !important; - --pagefind-ui-text: #000; + --pf-text: #000; + --pf-text-secondary: #555; + --pf-background: #{$bg-default}; + --pf-border: #d0d0d0; + --pf-font: roboto, Arial, Helvetica, sans-serif; + --pf-border-radius: 0.8rem; --link-default: #{$link-default}; --link-hovered: #{$link-hovered}; --link-special: #{$link-special}; @@ -89,13 +93,10 @@ html { --border-radius-s: 0.4rem; --border-radius-m: 0.8rem; --border-radius-l: 1.6rem; - --pagefind-ui-border-radius: var(--border-radius-l) !important; - --pagefind-ui-border: #000 !important; --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25); --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1); --border: 0.1rem solid transparent; --border-visible: 0.1rem solid #d0d0d0; - --pagefind-ui-font: roboto, Arial, Helvetica, sans-serif; --outline-focus-indicator: #257fa8; @media print { @@ -105,7 +106,6 @@ html { html[data-theme="dark"] { @media screen { - --pagefind-ui-text: #fff; --link-default: #ff6b3d; --link-hovered: #ff8a5b; --link-special: #ffffff; @@ -132,10 +132,12 @@ html[data-theme="dark"] { --highlight-#{$name}-color: #{$color}; } - --pagefind-ui-border: #555; + --pf-text: #e0e0e0; + --pf-text-secondary: #a0a0a0; + --pf-background: #151b23; + --pf-border: #3d444d; --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5); --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3); - --pagefind-ui-background: var(--bg-default); --border: 0.1rem solid #3d444d; --border-visible: 0.1rem solid #3d444d; --outline-focus-indicator: #2e9acb; diff --git a/assets/sass/header.scss b/assets/sass/header.scss index 6511f2ef5..793ec52ca 100644 --- a/assets/sass/header.scss +++ b/assets/sass/header.scss @@ -92,11 +92,6 @@ z-index: 6; } -#header:has(.overlay--search), -.overlay--search { - z-index: 10; -} - #header:has(.overlay--mobileMenu), .overlay--mobileMenu { z-index: 14; diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 9d777e297..e9fc3abc3 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -1,240 +1,6 @@ -$search-z-index: 10; -$search-z-index-focus: 12; - -#search { - width: 100%; - height: 64px; - display: flex; - z-index: $search-z-index; - - @media print { - display: none; - } - - .pagefind-ui { - width: 100%; - height: 100%; - - &__form { - position: relative; - height: 100%; - - &::before { - content: "search"; - position: absolute; - top: 23px; - left: 20px; - z-index: $search-z-index + 1; - font-family: "Material Symbols Rounded"; - opacity: 0.7; - pointer-events: none; - line-height: 1; - } - } - - &__message { - padding: 1rem; - margin-bottom: 0; - } - - &__results-area { - max-height: 50vh; - padding: 0 1rem; - overflow-y: scroll; - - @media (max-width: #{$breakpoint-md}) { - max-height: calc(100dvh - 17rem); - } - } - - &__results { - padding-left: 0; - margin-bottom: 0; - } - - &__search-input { - z-index: $search-z-index; - outline: 0.2rem solid transparent; - border: var(--border); - box-shadow: var(--box-shadow); - border-radius: var(--border-radius-l); - height: 100%; - background-color: var(--bg-default); - color: var(--color-body); - padding: 0 70px 0 54px; - font-size: 2rem; - position: relative; - display: flex; - width: 100%; - box-sizing: border-box; - font-family: "Roboto", Arial, Helvetica, sans-serif; - - @include focus-indicator(0.2rem); - - &::placeholder { - opacity: 0.7; - color: var(--color-body); - } - - // When results are visible - &:has( - + .pagefind-ui__search-clear - + .pagefind-ui__drawer - .pagefind-ui__results-area - ) { - border-radius: var(--border-radius-l) var(--border-radius-l) 0 0; - } - } - - &__search-clear { - display: none; - } - - &__suppressed { - display: none; - } - - &__drawer { - background-color: var(--bg-default); - overscroll-behavior: contain; - overflow: hidden; - position: absolute; - width: 100%; - z-index: $search-z-index; - border: var(--border); - border-radius: 0 0 var(--border-radius-l) var(--border-radius-l); - box-sizing: border-box; - } - - &__result { - list-style-type: none; - display: flex; - align-items: flex-start; - gap: 3.2rem; - padding: 2rem 0; - border-top: 0.2rem solid grey; - margin: 0 1rem; - - &-inner, - &-thumb { - margin-top: 0; - } - - &-thumb { - width: 10rem; - height: auto; - aspect-ratio: 3 / 2; - - @media (max-width: #{$breakpoint-md}) { - display: none; - } - } - - &-image { - max-width: 100%; - } - - &-title { - display: inline-block; - font-weight: 700; - margin: 0; - } - - &-nested { - display: flex; - flex-direction: column; - padding-top: 0.8rem; - padding-left: 2.4rem; - - .pagefind-ui__result-link { - font-size: 1.8rem; - } - - .pagefind-ui__result-link::before { - content: "subdirectory_arrow_right"; - font-family: "Material Symbols Rounded"; - position: absolute; - left: -2.4rem; - } - } - - &-excerpt { - margin-bottom: 0; - margin-top: 0.4rem; - } - } - - &__result-link { - position: relative; - font-size: 2.2rem; - } - - &__button { - border: 0.2rem solid var(--link-default); - border-radius: var(--border-radius-m); - background: transparent; - color: var(--body-color); - height: 4.8rem; - padding: 1.2rem; - margin-bottom: 1rem; - width: 100%; - text-align: center; - font-weight: 700; - transition: - background 0.2s, - color 0.2s; - - &:hover, - &:focus { - background: rgba($link-hovered, 0.15); - } - } - - &__hidden { - display: none; - } - - &--reset { - mark { - background-color: var(--bg-accent); - color: black; - } - } - - &__loading { - color: var(--bg-neutral); - background-color: var(--bg-neutral); - border-radius: var(--border-radius-s); - pointer-events: none; - } - } -} - -#search.o-search { - &--contentpage { - position: fixed; - display: none; - opacity: 0; - visibility: hidden; - transition: opacity 0.5s ease; - } - - &--show { +.o-startpage__search { + pagefind-searchbox { display: block; - opacity: 1; - visibility: visible; - z-index: $search-z-index-focus; - - input.pagefind-ui__search-input { - z-index: $search-z-index-focus; - } - - .pagefind-ui__drawer { - z-index: $search-z-index-focus; - } - - .pagefind-ui__form::before { - z-index: $search-z-index-focus + 1; - } + width: 100%; } } diff --git a/i18n/de.yaml b/i18n/de.yaml index 187425da3..3fc57c671 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -131,9 +131,6 @@ menu: dropdown-label: Verfügbare Betreiber label: Betreiber title: Betreiber-Dropdown öffnen - search: - close: Suche schließen - open: Suche öffnen theme: switch-to-auto: Zu automatischem Modus wechseln switch-to-dark: Zu dunklem Modus wechseln @@ -166,9 +163,6 @@ satellite: kostenlose Minuten pro Monat ins Ausland verfügbar. Für die Registrierung wird ein deutscher Wohnsitz benötigt und die Registrierung kann einige Tage in Anspruch nehmen. -search: - label: Durchsuche alle Seiteninhalte - placeholder: Suche skipToContent: Zum Inhalt springen support: text: >- diff --git a/i18n/en.yaml b/i18n/en.yaml index 81ecd1e87..614b89785 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -128,9 +128,6 @@ menu: dropdown-label: Available operators label: Operators title: Open Operator-Dropdown - search: - close: Close search - open: Open search theme: switch-to-auto: Switch to auto mode switch-to-dark: Switch to dark mode @@ -159,9 +156,6 @@ satellite: [Satellite](https://www.satellite.me/). It offers 100 free minutes per month for international calls. A German residence is required for registration and registration may take a few days. -search: - label: Search all page content - placeholder: Search skipToContent: Skip to content support: text: >- diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 58e9e6398..d56e07618 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -133,9 +133,6 @@ menu: dropdown-label: Opérateurs disponibles label: Opérateurs title: Ouvrir la liste déroulante de l'opérateur - search: - close: Fermer la recherche - open: Ouvrir la recherche theme: switch-to-auto: Passer en mode automatique switch-to-dark: Passer en mode sombre @@ -165,9 +162,6 @@ satellite: offre 100 minutes gratuites par mois pour les appels internationaux. Une résidence allemande est requise pour l'inscription et l'inscription peut prendre quelques jours. -search: - label: Rechercher dans tout le contenu de la page - placeholder: Rechercher skipToContent: Aller au contenu support: text: >- diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index de2526dfe..7652f8e14 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -27,17 +27,10 @@ {{- end -}} >
- {{- if not .IsHome -}} -
- {{ end }} {{ block "main" . }}{{ end }}
+ {{ if or (eq .Page.Type "country") (eq .Page.Type "operator") (eq .Page.Type "generalinformation") }} {{ partial "snackbar" . }} diff --git a/layouts/_default/home.html b/layouts/_default/home.html index 4d27432ac..bfa587842 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -12,12 +12,7 @@
-
+
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 543376a69..9998700ff 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -20,11 +20,8 @@ as="style" /> {{ end }} - - + + {{ partial "head/js" (dict "file" "js/main.js") }} diff --git a/layouts/partials/search-button.html b/layouts/partials/search-button.html index ed7038af9..e1d8b0e3f 100644 --- a/layouts/partials/search-button.html +++ b/layouts/partials/search-button.html @@ -1,10 +1 @@ - + diff --git a/package-lock.json b/package-lock.json index b9ee50061..2585523a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@fontsource/roboto": "^5.2.9", "@fontsource/sansita": "^5.2.8", "@panzoom/panzoom": "^4.6.1", - "pagefind": "^1.4.0" + "pagefind": "^1.5.0" }, "devDependencies": { "prettier": "^3.8.1", @@ -48,9 +48,9 @@ } }, "node_modules/@pagefind/darwin-arm64": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.4.0.tgz", - "integrity": "sha512-2vMqkbv3lbx1Awea90gTaBsvpzgRs7MuSgKDxW0m9oV1GPZCZbZBJg/qL83GIUEN2BFlY46dtUZi54pwH+/pTQ==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.5.0.tgz", + "integrity": "sha512-OXQVlxALU9+Lz/LxkAa+RvaxY1cnRKUDCuwl9o8PY5Lg/znP573y4WIbVOOIz8Bv7uj7r00TGy7pD+NSLMJGBw==", "cpu": [ "arm64" ], @@ -61,9 +61,9 @@ ] }, "node_modules/@pagefind/darwin-x64": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.4.0.tgz", - "integrity": "sha512-e7JPIS6L9/cJfow+/IAqknsGqEPjJnVXGjpGm25bnq+NPdoD3c/7fAwr1OXkG4Ocjx6ZGSCijXEV4ryMcH2E3A==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.5.0.tgz", + "integrity": "sha512-+LK1Xq5n/B0hHc08DW61SnfIlfLKyXZ1oKcbfZ1MimE7Rn0Q6R0VI/TlC04f/JDPm+67zAOwPGizzvefOi5vqQ==", "cpu": [ "x64" ], @@ -74,9 +74,9 @@ ] }, "node_modules/@pagefind/freebsd-x64": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.4.0.tgz", - "integrity": "sha512-WcJVypXSZ+9HpiqZjFXMUobfFfZZ6NzIYtkhQ9eOhZrQpeY5uQFqNWLCk7w9RkMUwBv1HAMDW3YJQl/8OqsV0Q==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.5.0.tgz", + "integrity": "sha512-kicDfUF9gn/z06NimTwNlZXF8z3pLsN3BIPPt6N8unuh0n55fr64tVs2p3a5RKYmQkJGjPfOE/C9GI5YTEpURg==", "cpu": [ "x64" ], @@ -87,9 +87,9 @@ ] }, "node_modules/@pagefind/linux-arm64": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.4.0.tgz", - "integrity": "sha512-PIt8dkqt4W06KGmQjONw7EZbhDF+uXI7i0XtRLN1vjCUxM9vGPdtJc2mUyVPevjomrGz5M86M8bqTr6cgDp1Uw==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.5.0.tgz", + "integrity": "sha512-e5rDB3wPm89bcSLiatKBDTrVTbsMQrrtkXRaAoUJYU0C1suXVvEzZfjmMvrUDvYhZBx/Ls8hGuGxlqSJBz3gDg==", "cpu": [ "arm64" ], @@ -100,9 +100,9 @@ ] }, "node_modules/@pagefind/linux-x64": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.4.0.tgz", - "integrity": "sha512-z4oddcWwQ0UHrTHR8psLnVlz6USGJ/eOlDPTDYZ4cI8TK8PgwRUPQZp9D2iJPNIPcS6Qx/E4TebjuGJOyK8Mmg==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.5.0.tgz", + "integrity": "sha512-vh52DcBiF/mRMmq+Rwt3M3RgEWgl00jFk/M5NWhLEHJFq4+papQXwbyKbi7cNlxaeYrKx6wOfW3fm9cftfc/Kg==", "cpu": [ "x64" ], @@ -112,10 +112,23 @@ "linux" ] }, + "node_modules/@pagefind/windows-arm64": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@pagefind/windows-arm64/-/windows-arm64-1.5.0.tgz", + "integrity": "sha512-kg+szZwffZdyWn6SL6RHjAYjhSvJ2bT4qkv3KepGsbmD9fuSHUSC+2kydDneDVUA9qEDRf9uSFoEAsXsp1/JKA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@pagefind/windows-x64": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.4.0.tgz", - "integrity": "sha512-NkT+YAdgS2FPCn8mIA9bQhiBs+xmniMGq1LFPDhcFn0+2yIUEiIG06t7bsZlhdjknEQRTSdT7YitP6fC5qwP0g==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.5.0.tgz", + "integrity": "sha512-8eOCmB8lnpyvwz+HrcTXLuBxhj7UseAFh6KGEXRe8UCcAfVQih+qPy/4akJRezViI+ONijz9oi7HpMkw9rdtBg==", "cpu": [ "x64" ], @@ -132,20 +145,21 @@ "license": "MIT" }, "node_modules/pagefind": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.4.0.tgz", - "integrity": "sha512-z2kY1mQlL4J8q5EIsQkLzQjilovKzfNVhX8De6oyE6uHpfFtyBaqUpcl/XzJC/4fjD8vBDyh1zolimIcVrCn9g==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.5.0.tgz", + "integrity": "sha512-7vQ2xh0ZmjPjsuWONR68nqzb+QNfpPh7pdT6n6YDAthWAQiUkSACVegSswY5zPNONGYFWebFVgdnS5/m/Qqn+w==", "license": "MIT", "bin": { "pagefind": "lib/runner/bin.cjs" }, "optionalDependencies": { - "@pagefind/darwin-arm64": "1.4.0", - "@pagefind/darwin-x64": "1.4.0", - "@pagefind/freebsd-x64": "1.4.0", - "@pagefind/linux-arm64": "1.4.0", - "@pagefind/linux-x64": "1.4.0", - "@pagefind/windows-x64": "1.4.0" + "@pagefind/darwin-arm64": "1.5.0", + "@pagefind/darwin-x64": "1.5.0", + "@pagefind/freebsd-x64": "1.5.0", + "@pagefind/linux-arm64": "1.5.0", + "@pagefind/linux-x64": "1.5.0", + "@pagefind/windows-arm64": "1.5.0", + "@pagefind/windows-x64": "1.5.0" } }, "node_modules/prettier": { diff --git a/package.json b/package.json index de615b9a0..fc0cb00e4 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@fontsource/roboto": "^5.2.9", "@fontsource/sansita": "^5.2.8", "@panzoom/panzoom": "^4.6.1", - "pagefind": "^1.4.0" + "pagefind": "^1.5.0" }, "devDependencies": { "prettier": "^3.8.1", From 8c85d6c7c7c8f8a3fe04e871892bd65aea4568be Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sat, 11 Apr 2026 22:05:08 +0200 Subject: [PATCH 02/27] fix: Improve some stylings --- assets/js/darkmode.js | 2 ++ assets/sass/_variables.scss | 9 --------- assets/sass/search.scss | 19 ++++++++++++++++++- layouts/_default/home.html | 14 +++++++++++++- 4 files changed, 33 insertions(+), 11 deletions(-) diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js index 3c8887357..b7697a9c5 100644 --- a/assets/js/darkmode.js +++ b/assets/js/darkmode.js @@ -26,8 +26,10 @@ const effectiveTheme = getEffectiveTheme(theme); if (effectiveTheme === DARK_THEME) { document.documentElement.setAttribute("data-theme", DARK_THEME); + document.documentElement.setAttribute("data-pf-theme", DARK_THEME); } else { document.documentElement.removeAttribute("data-theme"); + document.documentElement.removeAttribute("data-pf-theme"); } } diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 780c78100..c83d19293 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -57,12 +57,7 @@ $highlight-colors-dark: ( ); html { - --pf-text: #000; - --pf-text-secondary: #555; - --pf-background: #{$bg-default}; - --pf-border: #d0d0d0; --pf-font: roboto, Arial, Helvetica, sans-serif; - --pf-border-radius: 0.8rem; --link-default: #{$link-default}; --link-hovered: #{$link-hovered}; --link-special: #{$link-special}; @@ -132,10 +127,6 @@ html[data-theme="dark"] { --highlight-#{$name}-color: #{$color}; } - --pf-text: #e0e0e0; - --pf-text-secondary: #a0a0a0; - --pf-background: #151b23; - --pf-border: #3d444d; --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5); --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3); --border: 0.1rem solid #3d444d; diff --git a/assets/sass/search.scss b/assets/sass/search.scss index e9fc3abc3..7a414d280 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -1,6 +1,23 @@ .o-startpage__search { - pagefind-searchbox { + pagefind-modal-trigger { display: block; width: 100%; + + &::part(button) { + width: 100%; + } } } + +.pf-result-image { + object-fit: contain !important; + background-color: unset !important; +} + +.pf-result-excerpt { + display: -webkit-box !important; + -webkit-line-clamp: 2 !important; + line-clamp: 2 !important; + -webkit-box-orient: vertical !important; + white-space: wrap !important; +} diff --git a/layouts/_default/home.html b/layouts/_default/home.html index bfa587842..c191afed1 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -12,7 +12,19 @@
- + + + + + + + + + + + + +
From c0efd586436c5b2068b9bfeb06f3ca8da391d9fe Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sat, 11 Apr 2026 22:17:07 +0200 Subject: [PATCH 03/27] feat: Add back highlight support --- layouts/_default/home.html | 12 ------------ layouts/partials/head.html | 3 +-- layouts/partials/head/search.html | 19 +++++++++++++++++++ 3 files changed, 20 insertions(+), 14 deletions(-) create mode 100644 layouts/partials/head/search.html diff --git a/layouts/_default/home.html b/layouts/_default/home.html index c191afed1..16c7611cf 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -13,18 +13,6 @@
- - - - - - - - - - - -
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 9998700ff..19a6b9973 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -20,8 +20,7 @@ as="style" /> {{ end }} - - +{{ partial "head/search" . }} {{ partial "head/js" (dict "file" "js/main.js") }} diff --git a/layouts/partials/head/search.html b/layouts/partials/head/search.html new file mode 100644 index 000000000..a552f59f5 --- /dev/null +++ b/layouts/partials/head/search.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + From 401302dbda9559d39b6c206c4faff55b4da58daf Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sat, 11 Apr 2026 22:31:31 +0200 Subject: [PATCH 04/27] fix: Set correct max-width --- assets/sass/_variables.scss | 27 ++++++++++++++++++++++++++- assets/sass/navigation.scss | 4 ++++ assets/sass/styles.scss | 22 +--------------------- layouts/partials/head.html | 2 +- layouts/partials/navigation.html | 10 +++++----- 5 files changed, 37 insertions(+), 28 deletions(-) diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index c83d19293..e253a97b7 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -56,8 +56,33 @@ $highlight-colors-dark: ( default: map-get($tag-colors-dark, info), ); -html { +:root { --pf-font: roboto, Arial, Helvetica, sans-serif; + --container-max-width: 1320px; + --pf-modal-max-width: var(--container-max-width); + + @media (max-width: #{$breakpoint-xxl}) { + --container-max-width: 1140px; + } + + @media (max-width: #{$breakpoint-xl}) { + --container-max-width: 960px; + } + + @media (max-width: #{$breakpoint-lg}) { + --container-max-width: 720px; + } + + @media (max-width: #{$breakpoint-md}) { + --container-max-width: 540px; + } + + @media (max-width: #{$breakpoint-sm}) { + --container-max-width: calc(100vw - 3.2rem); + } +} + +html { --link-default: #{$link-default}; --link-hovered: #{$link-hovered}; --link-special: #{$link-special}; diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index eec8bb683..1ef463c2e 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -33,6 +33,10 @@ menu > li > menu { padding-inline-start: 0; } +.o-header__utility-menu { + gap: 0.6rem; +} + .o-header__item { list-style: none; display: flex; diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 8dad07a23..2d54c2877 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -100,27 +100,7 @@ main { } .o-container { - max-width: 1320px; - - @media (max-width: #{$breakpoint-xxl}) { - max-width: 1140px; - } - - @media (max-width: #{$breakpoint-xl}) { - max-width: 960px; - } - - @media (max-width: #{$breakpoint-lg}) { - max-width: 720px; - } - - @media (max-width: #{$breakpoint-md}) { - max-width: 540px; - } - - @media (max-width: #{$breakpoint-sm}) { - max-width: calc(100vw - 3.2rem); - } + max-width: var(--container-max-width); @media print { max-width: 100%; diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 19a6b9973..afe683eb6 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -9,6 +9,7 @@ {{ end }} {{ partial "head/js" (dict "file" "js/darkmode.js" "defer" false) }} +{{ partial "head/search" . }} {{ $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed") }} {{ with resources.Get "sass/main.scss" }} @@ -20,7 +21,6 @@ as="style" /> {{ end }} -{{ partial "head/search" . }} {{ partial "head/js" (dict "file" "js/main.js") }} diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html index 9ed5f98ba..be751134f 100644 --- a/layouts/partials/navigation.html +++ b/layouts/partials/navigation.html @@ -1,8 +1,8 @@
- {{ partial "theme-toggle-button" }} + {{ partial "search-button" }}
- {{ partial "search-button" }} + {{ partial "theme-toggle-button" }}
From ea9c3c4b044a8a0219a4e532c4c03314e32a1085 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sat, 11 Apr 2026 23:04:54 +0200 Subject: [PATCH 06/27] fix: Tune font-size for pagefind --- assets/sass/_variables.scss | 3 +++ assets/sass/search.scss | 12 ++++++++++++ 2 files changed, 15 insertions(+) diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index e253a97b7..ebef0b0af 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -58,6 +58,9 @@ $highlight-colors-dark: ( :root { --pf-font: roboto, Arial, Helvetica, sans-serif; + --pf-summary-font-size: 1.5rem; + --pf-result-title-font-size: 1.8rem; + --pf-result-excerpt-font-size: 1.5rem; --container-max-width: 1320px; --pf-modal-max-width: var(--container-max-width); diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 7a414d280..500b65f2c 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -21,3 +21,15 @@ -webkit-box-orient: vertical !important; white-space: wrap !important; } + +.pf-heading-link { + font-size: 1.8rem !important; +} + +.pf-heading-excerpt { + font-size: 1.4rem !important; +} + +.pf-trigger-text { + text-transform: capitalize !important; +} From ac01070a12f0f844061e33874ffed0f3483e27ff Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 10:36:24 +0200 Subject: [PATCH 07/27] refactor: Move global variables to root element --- assets/js/main.js | 2 +- .../js/{mobileSearchButton.js => search.js} | 0 assets/sass/_variables.scss | 73 ++++++++++--------- assets/sass/fonts.scss | 2 +- 4 files changed, 42 insertions(+), 35 deletions(-) rename assets/js/{mobileSearchButton.js => search.js} (100%) diff --git a/assets/js/main.js b/assets/js/main.js index f8bf38518..250f2f335 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -10,4 +10,4 @@ import "./interactiveMap.js"; import "./expander.js"; import "./dialog.js"; import "./fipValidityComparison.js"; -import "./mobileSearchButton.js"; +import "./search.js"; diff --git a/assets/js/mobileSearchButton.js b/assets/js/search.js similarity index 100% rename from assets/js/mobileSearchButton.js rename to assets/js/search.js diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index ebef0b0af..8231b73f7 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -57,12 +57,39 @@ $highlight-colors-dark: ( ); :root { - --pf-font: roboto, Arial, Helvetica, sans-serif; - --pf-summary-font-size: 1.5rem; - --pf-result-title-font-size: 1.8rem; - --pf-result-excerpt-font-size: 1.5rem; + --font-family: "Roboto", Arial, Helvetica, sans-serif; + + --link-default: #{$link-default}; + --link-hovered: #{$link-hovered}; + --link-special: #{$link-special}; + + --bg-default: #{$bg-default}; + --bg-neutral: #{$bg-neutral}; + --bg-accent: #{$bg-accent}; + --bg-code: #{$bg-code}; + + --color-onLight: #{$color-onLight}; + --color-table-border: #{$color-table-border}; + --color-body: rgb(33, 37, 41); + --color-success: #096640; + --color-error: #ad1731; + + --border-radius-s: 0.4rem; + --border-radius-m: 0.8rem; + --border-radius-l: 1.6rem; + + --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25); + --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1); + + --border: 0.1rem solid transparent; + --border-visible: 0.1rem solid #d0d0d0; + --outline-focus-indicator: #257fa8; + + @media print { + --bg-neutral: white; + } + --container-max-width: 1320px; - --pf-modal-max-width: var(--container-max-width); @media (max-width: #{$breakpoint-xxl}) { --container-max-width: 1140px; @@ -83,21 +110,12 @@ $highlight-colors-dark: ( @media (max-width: #{$breakpoint-sm}) { --container-max-width: calc(100vw - 3.2rem); } -} -html { - --link-default: #{$link-default}; - --link-hovered: #{$link-hovered}; - --link-special: #{$link-special}; - --bg-default: #{$bg-default}; - --bg-neutral: #{$bg-neutral}; - --bg-accent: #{$bg-accent}; - --bg-code: #{$bg-code}; - --color-onLight: #{$color-onLight}; - --color-table-border: #{$color-table-border}; - --color-body: rgb(33, 37, 41); - --color-success: #096640; - --color-error: #ad1731; + --pf-font: var(--font-family); + --pf-summary-font-size: 1.5rem; + --pf-result-title-font-size: 1.8rem; + --pf-result-excerpt-font-size: 1.5rem; + --pf-modal-max-width: var(--container-max-width); @each $name, $color in $fip-validity-colors { --fip-validity-#{$name}: #{$color}; @@ -112,29 +130,18 @@ html { --highlight-#{$name}-bg: #{mix(white, $color, 90%)}; --highlight-#{$name}-color: #{$color}; } - - --border-radius-s: 0.4rem; - --border-radius-m: 0.8rem; - --border-radius-l: 1.6rem; - --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25); - --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1); - --border: 0.1rem solid transparent; - --border-visible: 0.1rem solid #d0d0d0; - --outline-focus-indicator: #257fa8; - - @media print { - --bg-neutral: white; - } } -html[data-theme="dark"] { +:root[data-theme="dark"] { @media screen { --link-default: #ff6b3d; --link-hovered: #ff8a5b; --link-special: #ffffff; + --bg-default: #151b23; --bg-neutral: #0d1117; --bg-accent: #86761a; + --color-onLight: #ffffff; --color-table-border: #555; --color-body: #e0e0e0; diff --git a/assets/sass/fonts.scss b/assets/sass/fonts.scss index 8b5202314..d5bc024a4 100644 --- a/assets/sass/fonts.scss +++ b/assets/sass/fonts.scss @@ -123,7 +123,7 @@ body, button { - font-family: "Roboto", Arial, Helvetica, sans-serif; + font-family: var(--font-family); word-wrap: break-word; hyphens: auto; } From 68f99bb4ec56aacd9b25e79b85c82a2f7af968bf Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 11:17:10 +0200 Subject: [PATCH 08/27] feat: Tune more styles --- assets/sass/_variables.scss | 4 ++++ assets/sass/search.scss | 17 +++++++++++++++++ assets/sass/startpage.scss | 1 + assets/sass/styles.scss | 2 +- 4 files changed, 23 insertions(+), 1 deletion(-) diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 8231b73f7..95ac8129a 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -112,10 +112,14 @@ $highlight-colors-dark: ( } --pf-font: var(--font-family); + --pf-input-font-size: 1.8rem; --pf-summary-font-size: 1.5rem; --pf-result-title-font-size: 1.8rem; --pf-result-excerpt-font-size: 1.5rem; --pf-modal-max-width: var(--container-max-width); + --pf-outline-focus: var(--outline-focus-indicator); + --pf-border-radius: var(--border-radius-l); + --pf-background: var(--bg-default); @each $name, $color in $fip-validity-colors { --fip-validity-#{$name}: #{$color}; diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 500b65f2c..1650ed841 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -9,6 +9,14 @@ } } +pagefind-modal-trigger { + height: 100% !important; + + > .pf-trigger-btn { + height: 100% !important; + } +} + .pf-result-image { object-fit: contain !important; background-color: unset !important; @@ -32,4 +40,13 @@ .pf-trigger-text { text-transform: capitalize !important; + font-family: var(--font-family) !important; + font-size: var(--pf-input-font-size) !important; +} +.o-startpage__search > pagefind-modal-trigger > .pf-trigger-btn { + box-shadow: var(--box-shadow) !important; +} + +.o-header__item > pagefind-modal-trigger > .pf-trigger-btn { + height: 4.2rem !important; } diff --git a/assets/sass/startpage.scss b/assets/sass/startpage.scss index d45f28edd..f1c91e8a0 100644 --- a/assets/sass/startpage.scss +++ b/assets/sass/startpage.scss @@ -81,6 +81,7 @@ .o-startpage__search { margin-bottom: 2rem; + height: 6rem; width: 100%; @media print { diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 2d54c2877..f26a2fb4e 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -46,7 +46,7 @@ ol { @mixin focus-indicator($offset) { &:focus, &:focus-visible { - outline: var(--outline-focus-indicator) solid 0.2rem; + outline: var(--outline-focus-indicator) solid 2px; outline-offset: $offset; } } From cf04e45ecb94f2a233db636f2089fe0207a07792 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 11:28:28 +0200 Subject: [PATCH 09/27] feat: Modern search highlighting --- assets/sass/search.scss | 11 +++++++++++ assets/sass/styles.scss | 6 ------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 1650ed841..855b44a9e 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -50,3 +50,14 @@ pagefind-modal-trigger { .o-header__item > pagefind-modal-trigger > .pf-trigger-btn { height: 4.2rem !important; } + +.pagefind-highlight { + color: var(--color-body); + background: linear-gradient( + to right, + hsla(48, 92%, 75%, 0.3), + hsla(48, 92%, 75%, 0.58) + ); + border-radius: 0.5rem; + padding: 0.4rem; +} diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index f26a2fb4e..2ed5ff3fe 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -372,12 +372,6 @@ figure { border: none; } -.pagefind-highlight { - padding: 0; - background-color: var(--bg-accent); - color: black; -} - .sr-only { opacity: 0; position: absolute; From 1346ad7ec2f3e3a797903b51c42c8bb98317630c Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 11:44:10 +0200 Subject: [PATCH 10/27] feat: Add highlight animation --- assets/sass/search.scss | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 855b44a9e..8cf82ba23 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -58,6 +58,30 @@ pagefind-modal-trigger { hsla(48, 92%, 75%, 0.3), hsla(48, 92%, 75%, 0.58) ); + background-size: 100% 100%; + background-repeat: no-repeat; border-radius: 0.5rem; padding: 0.4rem; + margin: 0 -0.4rem; + animation: pagefind-highlight-reveal 260ms ease-out; + + @media (prefers-reduced-motion: reduce) { + animation: none; + } +} + +:is(h1, h2, h3, h4, h5, h6) .pagefind-highlight { + margin: 0; +} + +@keyframes pagefind-highlight-reveal { + from { + background-size: 0% 100%; + opacity: 0.7; + } + + to { + background-size: 100% 100%; + opacity: 1; + } } From 9c1a81c09869631f22cc71cbd2cd1cf5618378cf Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 11:46:49 +0200 Subject: [PATCH 11/27] fix: Correct border-radius for search in navbar --- assets/sass/search.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 8cf82ba23..f9d4b761c 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -11,10 +11,6 @@ pagefind-modal-trigger { height: 100% !important; - - > .pf-trigger-btn { - height: 100% !important; - } } .pf-result-image { @@ -43,12 +39,15 @@ pagefind-modal-trigger { font-family: var(--font-family) !important; font-size: var(--pf-input-font-size) !important; } + .o-startpage__search > pagefind-modal-trigger > .pf-trigger-btn { box-shadow: var(--box-shadow) !important; + height: 100% !important; } .o-header__item > pagefind-modal-trigger > .pf-trigger-btn { height: 4.2rem !important; + border-radius: var(--border-radius-m) !important; } .pagefind-highlight { From 39f693c3e33a4efb037be39379c6533032c92451 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 11:51:49 +0200 Subject: [PATCH 12/27] fix: Switch to small search icon on smaller desktop breakpoints --- assets/js/search.js | 18 ++++++++++-------- assets/sass/navigation.scss | 14 ++++++++++++++ layouts/partials/navigation.html | 7 ++++++- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/assets/js/search.js b/assets/js/search.js index b1937e69c..5c443dcda 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -1,16 +1,18 @@ function initMobileSearchButton() { - const searchButton = document.querySelector(".o-header__search-toggle"); + const searchButtons = document.querySelectorAll(".o-header__search-toggle"); const pagefindTrigger = document.querySelector("pagefind-modal-trigger"); - if (!searchButton || !pagefindTrigger) return; + if (searchButtons.length === 0 || !pagefindTrigger) return; - searchButton.addEventListener("click", () => { - if (typeof pagefindTrigger.openModal === "function") { - pagefindTrigger.openModal(); - return; - } + searchButtons.forEach((searchButton) => { + searchButton.addEventListener("click", () => { + if (typeof pagefindTrigger.openModal === "function") { + pagefindTrigger.openModal(); + return; + } - pagefindTrigger.querySelector("button")?.click(); + pagefindTrigger.querySelector("button")?.click(); + }); }); } diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 1ef463c2e..774ee4d73 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -226,6 +226,20 @@ menu > li > menu { } } +.o-header__item--desktop-search { + @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg}) { + display: none; + } +} + +.o-header__item--desktop-search-icon { + display: none; + + @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg}) { + display: inline-flex; + } +} + .o-header__button { padding: 1rem; border: none; diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html index c9329fff3..798690b4f 100644 --- a/layouts/partials/navigation.html +++ b/layouts/partials/navigation.html @@ -124,7 +124,12 @@
  • + {{ partial "search-button-mobile" }} +
    • +
  • {{ partial "search-button" }}
    • From 1081e5a8f6d57ea8bf38736383baead75759d6ea Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 11:57:06 +0200 Subject: [PATCH 13/27] feat: Highlight results in search --- assets/sass/_variables.scss | 2 +- assets/sass/search.scss | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 95ac8129a..dc7297708 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -118,7 +118,7 @@ $highlight-colors-dark: ( --pf-result-excerpt-font-size: 1.5rem; --pf-modal-max-width: var(--container-max-width); --pf-outline-focus: var(--outline-focus-indicator); - --pf-border-radius: var(--border-radius-l); + --pf-border-radius: var(--border-radius-m); --pf-background: var(--bg-default); @each $name, $color in $fip-validity-colors { diff --git a/assets/sass/search.scss b/assets/sass/search.scss index f9d4b761c..787867e9d 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -43,11 +43,15 @@ pagefind-modal-trigger { .o-startpage__search > pagefind-modal-trigger > .pf-trigger-btn { box-shadow: var(--box-shadow) !important; height: 100% !important; + border-radius: var(--border-radius-l) !important; } .o-header__item > pagefind-modal-trigger > .pf-trigger-btn { height: 4.2rem !important; - border-radius: var(--border-radius-m) !important; +} + +.pf-result-excerpt > mark { + color: var(--link-default) !important; } .pagefind-highlight { From 09859c38903f73d00f417b8740f0c182d7e3ba3f Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 12:04:31 +0200 Subject: [PATCH 14/27] feat: Also highlight subresults --- assets/sass/search.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 787867e9d..169f87f3e 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -50,7 +50,8 @@ pagefind-modal-trigger { height: 4.2rem !important; } -.pf-result-excerpt > mark { +.pf-result-excerpt > mark, +.pf-heading-excerpt > mark { color: var(--link-default) !important; } From cd71f46afa89fb6f18ebadf42c2f308fadc920b1 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 12:07:15 +0200 Subject: [PATCH 15/27] feat: Move back margin for all headings except h1 --- assets/sass/search.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 169f87f3e..8968d9c2e 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -74,7 +74,7 @@ pagefind-modal-trigger { } } -:is(h1, h2, h3, h4, h5, h6) .pagefind-highlight { +h1 .pagefind-highlight { margin: 0; } From 6633f487fc9b5178e8d0983fc35ce4db2c1d6c2a Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 12:16:21 +0200 Subject: [PATCH 16/27] fix: Handle .o-related__item highlight --- assets/sass/search.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 8968d9c2e..7224fa511 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -73,8 +73,8 @@ pagefind-modal-trigger { animation: none; } } - -h1 .pagefind-highlight { +// The negative margin influences the box sizing in flexbox environments +:is(h1, .o-related__item) .pagefind-highlight { margin: 0; } From 0e5564337bab0f1fa3a954965bbc531ceb9a6db1 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 12:30:57 +0200 Subject: [PATCH 17/27] feat: Change focus background color --- assets/sass/search.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 7224fa511..d429421e7 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -89,3 +89,8 @@ pagefind-modal-trigger { opacity: 1; } } + +.pf-result-card:focus-within, +.pf-heading-chip:focus-within { + background: rgba($link-hovered, 0.15) !important; +} From d971e5157452afcfb22ee1c49936c0afbf603062 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 12 Apr 2026 12:45:19 +0200 Subject: [PATCH 18/27] feat: Remove title from pagefind-body --- layouts/country/single.html | 13 ++++++++++--- layouts/generalinformation/list.html | 8 ++++++-- layouts/news/single.html | 5 +---- layouts/operator/single.html | 8 ++++++-- 4 files changed, 23 insertions(+), 11 deletions(-) diff --git a/layouts/country/single.html b/layouts/country/single.html index 6003ca531..dd42afd59 100644 --- a/layouts/country/single.html +++ b/layouts/country/single.html @@ -4,7 +4,7 @@
    {{ partial "contentNavigation" . }} -
    +
    @@ -14,11 +14,18 @@

    {{ .Title }}

    {{ partial "updateDate.html" . }}
    -
    +
    {{ partial "content" . }}
    -
    +
    {{ $title := print (T "operators.listTitle") " in " .Title }} {{ partial "related" (dict "index" "country" "pageType" "operator" "title" $title "page" . "identifier" "operators") }} {{ with .Params.operators_without_fip }} diff --git a/layouts/generalinformation/list.html b/layouts/generalinformation/list.html index d17bb0752..7d93842b8 100644 --- a/layouts/generalinformation/list.html +++ b/layouts/generalinformation/list.html @@ -1,7 +1,7 @@ {{ define "main" }}
    {{ partial "contentNavigation" . }} -
    +
    @@ -10,7 +10,11 @@

    {{ .Title }}

    {{ partial "updateDate.html" . }}
    -
    +
    {{ partial "content" . }}
    diff --git a/layouts/news/single.html b/layouts/news/single.html index 14a61cb4e..23c424c55 100644 --- a/layouts/news/single.html +++ b/layouts/news/single.html @@ -33,10 +33,7 @@

    {{ T "news.further" }}

    }}
    -
    +

    {{ .Title }}

    {{ partial "updateDate.html" . }} diff --git a/layouts/operator/single.html b/layouts/operator/single.html index 41e8248bf..d40ea1e37 100644 --- a/layouts/operator/single.html +++ b/layouts/operator/single.html @@ -1,7 +1,7 @@ {{ define "main" }}
    {{ partial "contentNavigation" . }} -
    +
    @@ -10,7 +10,11 @@

    {{ .Title }}

    {{ partial "updateDate.html" . }}
    -
    +
    {{ partial "content" . }}
    From 957b55d5e0c849f3e589af39795b69492316df1e Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 13 Apr 2026 18:21:36 +0200 Subject: [PATCH 19/27] fix: Set correct aria-label --- assets/js/search.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/assets/js/search.js b/assets/js/search.js index 5c443dcda..c4cfab1db 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -1,3 +1,9 @@ +function initSearchAriaLabel() { + document.querySelectorAll(".pf-trigger-btn").forEach((btn) => { + btn.setAttribute("aria-label", "Suchbereich öffnen"); + }); +} + function initMobileSearchButton() { const searchButtons = document.querySelectorAll(".o-header__search-toggle"); const pagefindTrigger = document.querySelector("pagefind-modal-trigger"); @@ -16,8 +22,13 @@ function initMobileSearchButton() { }); } +function init() { + initMobileSearchButton(); + initSearchAriaLabel(); +} + if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", initMobileSearchButton); + document.addEventListener("DOMContentLoaded", init); } else { - initMobileSearchButton(); + init(); } From e51af195f125e8a48da0dd7c6c04bb7e488a8d8f Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 13 Apr 2026 18:28:55 +0200 Subject: [PATCH 20/27] fix: Hide "#" from screenreaders --- assets/sass/search.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index d429421e7..ed167b381 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -28,6 +28,10 @@ pagefind-modal-trigger { .pf-heading-link { font-size: 1.8rem !important; + + &::before { + content: "#" / "" !important; + } } .pf-heading-excerpt { From 39aa65cbf40f38c10678cf9aef900a38976b9396 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 13 Apr 2026 18:45:05 +0200 Subject: [PATCH 21/27] fix: Improve visibility of highlight --- assets/sass/search.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index ed167b381..28641a44c 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -63,8 +63,8 @@ pagefind-modal-trigger { color: var(--color-body); background: linear-gradient( to right, - hsla(48, 92%, 75%, 0.3), - hsla(48, 92%, 75%, 0.58) + hsla(48, 92%, 75%, 0.55), + hsla(48, 92%, 75%, 0.85) ); background-size: 100% 100%; background-repeat: no-repeat; @@ -77,6 +77,16 @@ pagefind-modal-trigger { animation: none; } } + +:root[data-theme="dark"] { + .pagefind-highlight { + background: linear-gradient( + to right, + hsla(48, 92%, 85%, 0.25), + hsla(48, 92%, 85%, 0.45) + ); + } +} // The negative margin influences the box sizing in flexbox environments :is(h1, .o-related__item) .pagefind-highlight { margin: 0; From 2ae28166c21926f23020e109a77ab4d75e5600fe Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 13 Apr 2026 18:53:42 +0200 Subject: [PATCH 22/27] feat: Add hover effect to search results --- assets/sass/search.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 28641a44c..12069c21a 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -82,8 +82,8 @@ pagefind-modal-trigger { .pagefind-highlight { background: linear-gradient( to right, - hsla(48, 92%, 85%, 0.25), - hsla(48, 92%, 85%, 0.45) + hsla(48, 92%, 85%, 0.2), + hsla(48, 92%, 85%, 0.4) ); } } @@ -104,7 +104,6 @@ pagefind-modal-trigger { } } -.pf-result-card:focus-within, -.pf-heading-chip:focus-within { +:is(.pf-result-card, .pf-heading-chip):is(:focus-within, :hover) { background: rgba($link-hovered, 0.15) !important; } From 0c6d12e1643ae9a5553b977e8f58fc8efb48d836 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 13 Apr 2026 18:55:30 +0200 Subject: [PATCH 23/27] build: Bump pagefind version --- package-lock.json | 64 +++++++++++++++++++++++------------------------ package.json | 2 +- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2585523a6..4e6b8dd82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@fontsource/roboto": "^5.2.9", "@fontsource/sansita": "^5.2.8", "@panzoom/panzoom": "^4.6.1", - "pagefind": "^1.5.0" + "pagefind": "^1.5.2" }, "devDependencies": { "prettier": "^3.8.1", @@ -48,9 +48,9 @@ } }, "node_modules/@pagefind/darwin-arm64": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.5.0.tgz", - "integrity": "sha512-OXQVlxALU9+Lz/LxkAa+RvaxY1cnRKUDCuwl9o8PY5Lg/znP573y4WIbVOOIz8Bv7uj7r00TGy7pD+NSLMJGBw==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.5.2.tgz", + "integrity": "sha512-MXpI+7HsAdPkvJ0gk9xj9g541BCqBZOBbdwj9g6lB5LCj6kSV6nqDSjzcAJwvOsfu0fjwvC8hQU+ecfhp+MpiQ==", "cpu": [ "arm64" ], @@ -61,9 +61,9 @@ ] }, "node_modules/@pagefind/darwin-x64": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.5.0.tgz", - "integrity": "sha512-+LK1Xq5n/B0hHc08DW61SnfIlfLKyXZ1oKcbfZ1MimE7Rn0Q6R0VI/TlC04f/JDPm+67zAOwPGizzvefOi5vqQ==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.5.2.tgz", + "integrity": "sha512-IojxFWMEJe0RQ7PQ3KXQsPIImNsbpPYpoZ+QUDrL8fAl/O27IX+LVLs74/UzEZy5uA2LD8Nz1AiwKr72vrkZQw==", "cpu": [ "x64" ], @@ -74,9 +74,9 @@ ] }, "node_modules/@pagefind/freebsd-x64": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.5.0.tgz", - "integrity": "sha512-kicDfUF9gn/z06NimTwNlZXF8z3pLsN3BIPPt6N8unuh0n55fr64tVs2p3a5RKYmQkJGjPfOE/C9GI5YTEpURg==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.5.2.tgz", + "integrity": "sha512-7EVzo9+0w+2cbe671BtMj10UlNo83I+HrLVLfRxO731svHRJKUfJ/mo05gU14pe9PCfpKNQT8FS3Xc/oDN6pOA==", "cpu": [ "x64" ], @@ -87,9 +87,9 @@ ] }, "node_modules/@pagefind/linux-arm64": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.5.0.tgz", - "integrity": "sha512-e5rDB3wPm89bcSLiatKBDTrVTbsMQrrtkXRaAoUJYU0C1suXVvEzZfjmMvrUDvYhZBx/Ls8hGuGxlqSJBz3gDg==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.5.2.tgz", + "integrity": "sha512-Ovt9+K35sqzn8H3ZMXGwls4TD/wMJuvRtShHIsmUQREmaxjrDEX7gHckRCrwYJ4XE1H1p6HkLz3wukrAnsfXQw==", "cpu": [ "arm64" ], @@ -100,9 +100,9 @@ ] }, "node_modules/@pagefind/linux-x64": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.5.0.tgz", - "integrity": "sha512-vh52DcBiF/mRMmq+Rwt3M3RgEWgl00jFk/M5NWhLEHJFq4+papQXwbyKbi7cNlxaeYrKx6wOfW3fm9cftfc/Kg==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.5.2.tgz", + "integrity": "sha512-V+tFqHKXhQKq/WqPBD67AFy7scn1/aZID00ws4fSDd+1daSi5UHR9VVlRrOUYKxn3VuFQYRD7lYXdZK1WED1YA==", "cpu": [ "x64" ], @@ -113,9 +113,9 @@ ] }, "node_modules/@pagefind/windows-arm64": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@pagefind/windows-arm64/-/windows-arm64-1.5.0.tgz", - "integrity": "sha512-kg+szZwffZdyWn6SL6RHjAYjhSvJ2bT4qkv3KepGsbmD9fuSHUSC+2kydDneDVUA9qEDRf9uSFoEAsXsp1/JKA==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@pagefind/windows-arm64/-/windows-arm64-1.5.2.tgz", + "integrity": "sha512-hN9Nh90fNW61nNRCW9ZyQrAj/mD0eRvmJ8NlTUzkbuW8kIzGJUi3cxjFkEcMZ5h/8FsKWD/VcouZl4yo1F7B6g==", "cpu": [ "arm64" ], @@ -126,9 +126,9 @@ ] }, "node_modules/@pagefind/windows-x64": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.5.0.tgz", - "integrity": "sha512-8eOCmB8lnpyvwz+HrcTXLuBxhj7UseAFh6KGEXRe8UCcAfVQih+qPy/4akJRezViI+ONijz9oi7HpMkw9rdtBg==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.5.2.tgz", + "integrity": "sha512-Fa2Iyw7kaDRzGMfNYNUXNW2zbL5FQVDgSOcbDHdzBrDEdpqOqg8TcZ68F22ol6NJ9IGzvUdmeyZypLW5dyhqsg==", "cpu": [ "x64" ], @@ -145,21 +145,21 @@ "license": "MIT" }, "node_modules/pagefind": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.5.0.tgz", - "integrity": "sha512-7vQ2xh0ZmjPjsuWONR68nqzb+QNfpPh7pdT6n6YDAthWAQiUkSACVegSswY5zPNONGYFWebFVgdnS5/m/Qqn+w==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.5.2.tgz", + "integrity": "sha512-XTUaK0hXMCu2jszWE584JGQT7y284TmMV9l/HX3rnG5uo3rHI/uHU56XTyyyPFjeWEBxECbAi0CaFDJOONtG0Q==", "license": "MIT", "bin": { "pagefind": "lib/runner/bin.cjs" }, "optionalDependencies": { - "@pagefind/darwin-arm64": "1.5.0", - "@pagefind/darwin-x64": "1.5.0", - "@pagefind/freebsd-x64": "1.5.0", - "@pagefind/linux-arm64": "1.5.0", - "@pagefind/linux-x64": "1.5.0", - "@pagefind/windows-arm64": "1.5.0", - "@pagefind/windows-x64": "1.5.0" + "@pagefind/darwin-arm64": "1.5.2", + "@pagefind/darwin-x64": "1.5.2", + "@pagefind/freebsd-x64": "1.5.2", + "@pagefind/linux-arm64": "1.5.2", + "@pagefind/linux-x64": "1.5.2", + "@pagefind/windows-arm64": "1.5.2", + "@pagefind/windows-x64": "1.5.2" } }, "node_modules/prettier": { diff --git a/package.json b/package.json index fc0cb00e4..8662ec97d 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@fontsource/roboto": "^5.2.9", "@fontsource/sansita": "^5.2.8", "@panzoom/panzoom": "^4.6.1", - "pagefind": "^1.5.0" + "pagefind": "^1.5.2" }, "devDependencies": { "prettier": "^3.8.1", From 25ee8ea4b7a0fb63b1e0c53f8d9738aa3381337b Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 13 Apr 2026 19:09:27 +0200 Subject: [PATCH 24/27] refactor: Move parts of search to body --- layouts/_default/baseof.html | 2 +- layouts/partials/head/search.html | 13 ------------- layouts/partials/search.html | 13 +++++++++++++ 3 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 layouts/partials/search.html diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 7652f8e14..f7e2e86fc 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -30,7 +30,7 @@ {{ block "main" . }}{{ end }}
    - + {{ partial "search" . }}
    {{ partial "footer.html" . }}
    {{ if or (eq .Page.Type "country") (eq .Page.Type "operator") (eq .Page.Type "generalinformation") }} {{ partial "snackbar" . }} diff --git a/layouts/partials/head/search.html b/layouts/partials/head/search.html index a552f59f5..7721d2c66 100644 --- a/layouts/partials/head/search.html +++ b/layouts/partials/head/search.html @@ -4,16 +4,3 @@ await import("/pagefind/pagefind-highlight.js"); new PagefindHighlight({ highlightParam: "highlight" }); - - - - - - - - - - - - - diff --git a/layouts/partials/search.html b/layouts/partials/search.html new file mode 100644 index 000000000..87d7f2e00 --- /dev/null +++ b/layouts/partials/search.html @@ -0,0 +1,13 @@ + + + + + + + + + + + + + From f072ed8b5de62d3ab43720fcd031fa1474b026fd Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 13 Apr 2026 19:28:20 +0200 Subject: [PATCH 25/27] feat: Add outline-offset for search elements --- assets/sass/search.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 12069c21a..1ab407844 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -107,3 +107,11 @@ pagefind-modal-trigger { :is(.pf-result-card, .pf-heading-chip):is(:focus-within, :hover) { background: rgba($link-hovered, 0.15) !important; } + +:is(.pf-input, .pf-input-clear, .pf-result-card, .pf-heading-chip):is( + :focus-within +) { + outline: var(--outline-focus-indicator) solid 2px !important; + outline-offset: 0.2rem !important; + box-shadow: none !important; +} From 0e8b57db7aedcda651cb3a64ec65fd7a48e5f3e6 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Mon, 13 Apr 2026 22:10:00 +0200 Subject: [PATCH 26/27] feat: Localize the "open search" aria-label --- assets/js/search.js | 8 ++++++-- i18n/de.yaml | 2 ++ i18n/en.yaml | 2 ++ i18n/fr.yaml | 2 ++ layouts/_default/home.html | 4 +++- layouts/partials/search-button.html | 5 ++++- 6 files changed, 19 insertions(+), 4 deletions(-) diff --git a/assets/js/search.js b/assets/js/search.js index c4cfab1db..2f6f7a673 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -1,6 +1,10 @@ function initSearchAriaLabel() { - document.querySelectorAll(".pf-trigger-btn").forEach((btn) => { - btn.setAttribute("aria-label", "Suchbereich öffnen"); + document.querySelectorAll("pagefind-modal-trigger").forEach((trigger) => { + const ariaLabel = trigger.dataset.searchOpenAriaLabel; + if (!ariaLabel) return; + const btn = trigger.querySelector(".pf-trigger-btn"); + if (!btn) return; + btn.setAttribute("aria-label", ariaLabel); }); } diff --git a/i18n/de.yaml b/i18n/de.yaml index 031d466d9..f793c0c2d 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -163,6 +163,8 @@ satellite: kostenlose Minuten pro Monat ins Ausland verfügbar. Für die Registrierung wird ein deutscher Wohnsitz benötigt und die Registrierung kann einige Tage in Anspruch nehmen. +search: + open-aria-label: Suchbereich öffnen skipToContent: Zum Inhalt springen support: text: >- diff --git a/i18n/en.yaml b/i18n/en.yaml index c670f056e..87735afe5 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -156,6 +156,8 @@ satellite: [Satellite](https://www.satellite.me/). It offers 100 free minutes per month for international calls. A German residence is required for registration and registration may take a few days. +search: + open-aria-label: Open search area skipToContent: Skip to content support: text: >- diff --git a/i18n/fr.yaml b/i18n/fr.yaml index cc7bbad57..e3bf5b330 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -162,6 +162,8 @@ satellite: offre 100 minutes gratuites par mois pour les appels internationaux. Une résidence allemande est requise pour l'inscription et l'inscription peut prendre quelques jours. +search: + open-aria-label: Ouvrir la zone de recherche skipToContent: Aller au contenu support: text: >- diff --git a/layouts/_default/home.html b/layouts/_default/home.html index 16c7611cf..2961aeaac 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -12,7 +12,9 @@
    - +
    diff --git a/layouts/partials/search-button.html b/layouts/partials/search-button.html index e1d8b0e3f..23319d34d 100644 --- a/layouts/partials/search-button.html +++ b/layouts/partials/search-button.html @@ -1 +1,4 @@ - + From 5a43ff48fdfd79f7d62ac16553bcb5d49b725acc Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Mon, 13 Apr 2026 22:21:13 +0200 Subject: [PATCH 27/27] feat: Add transition for background in search --- assets/sass/search.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 1ab407844..56de4031a 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -108,10 +108,16 @@ pagefind-modal-trigger { background: rgba($link-hovered, 0.15) !important; } -:is(.pf-input, .pf-input-clear, .pf-result-card, .pf-heading-chip):is( - :focus-within -) { - outline: var(--outline-focus-indicator) solid 2px !important; - outline-offset: 0.2rem !important; +:is(.pf-input, .pf-input-clear, .pf-result-card, .pf-heading-chip) { + outline: var(--border) !important; + border: none !important; box-shadow: none !important; + transition: + background 0.2s, + color 0.2s !important; + + &:focus-within { + outline: var(--outline-focus-indicator) solid 2px !important; + outline-offset: 0.2rem !important; + } }