Merge branch 'main' into 373-backlink-from-booking-page

Author: therobrob

.opencode/command/check.md

@@ -3,10 +3,13 @@ description: Check a page for common mistakes
 agent: plan
 ---
 
-Check the page $ARGUMENTS for errors. When no language is provided, check all languages of the page. Common errors are:
+Check the page $ARGUMENTS for errors. List ALL errors you can find. Run the analysis step by step.
+When a language is provided in this prompt, only check check the specified language. Otherwise check all languages of the page.
+
+Common errors are:
 
 - Grammatical, typographical, or spelling errors
-- Not following the common terms in defined in the glossary of `AGENTS.md`
+- Not following the common terms as defined in the glossary of `AGENTS.md`
 - Content differs between the different languages. The content should always be the same.
 - The page structure doesn't follow the archetype defined in `archetypes`
 - Anchors of internal links are not matching the referenced and translated title

AGENTS.md

@@ -17,12 +17,41 @@
 
 ### Translations
 
-| Deutsch             | Englisch        | Französisch      |
-| ------------------- | --------------- | ---------------- |
-| FIP Freifahrtschein | FIP Coupon      | Coupon FIP       |
-| FIP Globalpreis     | FIP Global Fare | Tarif Global FIP |
-| FIP 50 Ticket       | FIP 50 Ticket   | Billet FIP 50    |
-| FIP Ausweis         | FIP Card        | Carte FIP        |
+| Deutsch                      | Englisch                  | Französisch                         |
+| ---------------------------- | ------------------------- | ----------------------------------- |
+| FIP Freifahrtschein          | FIP Coupon                | Coupon FIP                          |
+| FIP Globalpreis              | FIP Global Fare           | Tarif Global FIP                    |
+| FIP 50 Ticket                | FIP 50 Ticket             | Billet FIP 50                       |
+| FIP Ausweis                  | FIP Card                  | Carte FIP                           |
+| <operator> Ticketschalter    | <operator> Ticket Office  | Guichet <operator>                  |
+| <operator> Website           | <operator> Website        | Site Web <operator>                 |
+| <operator> Telefon           | <operator> Telephone      | Téléphone <operator>                |
+| <operator> Fahrkartenautomat | <operator> Ticket Machine | Distributeurs de billets <operator> |
+| Grenzpunkt                   | Border Point              | Point frontière                     |
+| FIP Rabatt / FIP Ermäßigung  | FIP Discount              | Remise FIP / Réduction FIP          |
+
+#### Headlines
+
+Use these exact translations for headlines on the pages:
+
+| Deutsch                          | Englisch                          | Französisch                          |
+| -------------------------------- | --------------------------------- | ------------------------------------ |
+| FIP Nutzung                      | FIP Information                   | Informations FIP                     |
+| Wissenswertes                    | Interesting                       | Informations générales               |
+| Anreise und Grenzpunkte          | Arrival and Border Points         | Arrivée et points frontières         |
+| Zusammenfassung                  | Summary                           | Résumé                               |
+| Gültigkeit FIP Tickets           | Validity of FIP Tickets           | Validité des Billets FIP             |
+| Zugkategorien und Reservierungen | Train Categories and Reservations | Catégories de trains et réservations |
+| Klassenkategorien                | Class Categories                  | Catégories de classes                |
+| Ticket- und Reservierungskauf    | Ticket and Reservation Purchase   | Achat de billets et réservations     |
+| Online                           | Online                            | En ligne                             |
+| Telefon                          | Telephone                         | Par téléphone                        |
+| Vor Ort                          | On-Site                           | En gare                              |
+| Im Zug                           | On the Train                      | À bord du train                      |
+| Ermäßigungen                     | Discounts                         | Réductions                           |
+| Tarifliche Besonderheiten        | Special Tariff Conditions         | Conditions tarifaires spéciales      |
+| Empfehlungen                     | Recommendations                   | Recommandations                      |
+| Quellen                          | Sources                           | Sources                              |
 
 ## Development Guidelines
 

archetypes/operator/index.de.md

@@ -15,14 +15,14 @@ operator: "{{ .File.ContentBaseName }}"
 {{< wip >}}
 
 <!--
-  Kurze Beschreibung der Bahngesellschaft. Z.B. Der vollstandige Name in Landessprache, alternative Namen und Angabe über Privat/Staatsbahn
+  Kurze Beschreibung der Bahngesellschaft. z. B. Der vollstandige Name in Landessprache, alternative Namen und Angabe über Privat/Staatsbahn
 -->
 
 ## Zusammenfassung
 
 <!--
   Stichpunktartige Zusammenfassung der wichtigsten Besonderheiten/FIP-Reglungen der Bahngesellschaft.
-  Z.B.
+  z. B.
   - Werden FIP 50 und FIP Freifahrtscheine akzeptiert?
   - Gibt es eine Reservierungspflicht?
   - Gibt es sonstige tarifliche Sonderregelungen oder Abweichungen zu anderen FIP Bahngesellschaften?
@@ -40,7 +40,7 @@ FIP 50 Tickets: <✅/⛔> \
 FIP Globalpreis: <✅/⛔>
 
 <!--
-  Wo gelten FIP 50 Tickets/FIP Freifahrtscheine und gibt es Einschränkungen? Welches Ticket wird bei Einreise benötigt (z.B. durchgehendes FIP 50 Ticket oder FIP Freifahrtscheine beider Länder)
+  Wo gelten FIP 50 Tickets/FIP Freifahrtscheine und gibt es Einschränkungen? Welches Ticket wird bei Einreise benötigt (z. B. durchgehendes FIP 50 Ticket oder FIP Freifahrtscheine beider Länder)
 -->
 
 ## Zugkategorien und Reservierungen
@@ -60,7 +60,7 @@ FIP Globalpreis: <✅/⛔>
 
 {{% expander "Zugkategorie" traincategory "category" %}}
 
-<!-- Ersetze Zugkategorie mit dem Name der Zugkategorie, z.B. ICE. -->
+<!-- Ersetze Zugkategorie mit dem Name der Zugkategorie, z. B. ICE. -->
 
 **Beschreibung:**
 
@@ -146,7 +146,7 @@ FIP Globalpreis: <✅/⛔>
 ### <Route bzw. Name>
 
 <!--
-  Beschreibung der Besonderheit, wenn es auf bestimmten Routen z.B. Sonderregelungen gibt.
+  Beschreibung der Besonderheit, wenn es auf bestimmten Routen z. B. Sonderregelungen gibt.
 -->
 
 ## Empfehlungen

assets/images/flags/united-kingdom.webp

@@ -19,17 +19,19 @@ const initAside = () => {
     aside.classList.remove("o-aside--open");
     asideContent.removeAttribute("role");
     asideContent.setAttribute("aria-hidden", "true");
+    asideContent.setAttribute("inert", "");
     handleBtn.setAttribute("aria-expanded", "false");
-    overlay.classList.remove("overlay--show");
+    overlay.classList.remove("overlay--show", "overlay--content");
   };
 
   const openSheet = () => {
     isClosed = false;
     aside.classList.add("o-aside--open");
-    overlay.classList.add("overlay--show");
     asideContent.setAttribute("role", "dialog");
     asideContent.setAttribute("aria-hidden", "false");
+    asideContent.removeAttribute("inert");
     handleBtn.setAttribute("aria-expanded", "true");
+    overlay.classList.add("overlay--show", "overlay--content");
   };
 
   if (isMobile()) {

assets/js/contentNavigation.js

@@ -27,8 +27,7 @@ function initHighlightHeadline() {
     for (let i = 0; i < headings.length; i++) {
       const heading = headings[i];
 
-      // Add the scroll-padding-top defined in styles.scss + 1px to trigger the detection
-      if (heading.offsetTop <= window.pageYOffset + 81) {
+      if (heading.offsetTop <= window.pageYOffset) {
         currentHeading = heading;
       } else {
         break;

assets/js/highlightHeadline.js

@@ -27,9 +27,9 @@ const initSearch = () => {
     },
   });
 
-  // Close keyboard when scrolling in search results (mobile only)
+  // Close keyboard when touching search results (mobile only)
   const searchDrawer = search.querySelector(".pagefind-ui__drawer");
-  searchDrawer.addEventListener("scroll", () => {
+  searchDrawer.addEventListener("touchstart", () => {
     if (!isMobile) return;
     if (document.activeElement && document.activeElement.blur) {
       document.activeElement.blur();
@@ -38,49 +38,68 @@ const initSearch = () => {
 
   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();
-    overlay.classList.remove("overlay--show", "overlay--show-lv5");
+    overlay.classList.remove("overlay--show", "overlay--search");
     search.classList.remove("o-search--show");
+    updateSearchButtonLabels(false);
   };
 
-  // Scroll to search on click
-  if (search && isHome) {
-    search.addEventListener("click", function () {
-      overlay.classList.add("overlay--show", "overlay--show-lv5");
-      search.scrollIntoView({ behavior: "smooth", block: "start" });
-    });
-  }
-
-  function showSearchOnContentPage() {
+  const openSearch = () => {
+    overlay.classList.add("overlay--show", "overlay--search");
     search.classList.add("o-search--show");
-    overlay.classList.add("overlay--show", "overlay--show-lv5");
-    searchElement.focus();
-  }
-
-  function showSearchOnStartPage() {
-    overlay.classList.add("overlay--show", "overlay--show-lv5");
     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,
+    );
   }
 
-  searchButtons.forEach((button) => {
-    if (isHome) {
-      button.addEventListener("click", showSearchOnStartPage);
-    } else {
-      button.addEventListener("click", showSearchOnContentPage);
+  const toggleSearch = () => {
+    if (search.classList.contains("o-search--show")) {
+      closeSearch();
+      return;
     }
+    openSearch();
+  };
+
+  searchButtons.forEach((button) => {
+    button.addEventListener("click", toggleSearch);
   });
 
-  // Open search on Ctrl + K or Cmd + K
+  // Toggle search on Ctrl + K or Cmd + K
   document.addEventListener("keydown", (e) => {
     if ((e.ctrlKey || e.metaKey) && e.key === "k") {
       e.preventDefault();
-      if (isHome) {
-        showSearchOnStartPage();
-      } else {
-        showSearchOnContentPage();
-      }
+      toggleSearch();
     }
   });
 

assets/js/search.js

@@ -9,9 +9,8 @@ $link-default: #ba3d12;
 $link-special: #000000;
 $bg-default: #ffffff;
 $bg-neutral: #ebe9e1;
-$bg-accent: #ffd900;
-$bg-accent2: #daba00;
-$bg-accent3: #fff284;
+$bg-accent: #ffff00;
+$bg-code: #fff284;
 $color-onLight: #000000;
 $color-table-border: #5b5b5b;
 
@@ -24,8 +23,7 @@ html {
   --bg-default: #{$bg-default};
   --bg-neutral: #{$bg-neutral};
   --bg-accent: #{$bg-accent};
-  --bg-accent2: #{$bg-accent2};
-  --bg-accent3: #{$bg-accent3};
+  --bg-code: #{$bg-code};
   --color-onLight: #{$color-onLight};
   --color-table-border: #{$color-table-border};
   --color-body: rgb(33, 37, 41);
@@ -42,28 +40,31 @@ html {
   --border: 0.1rem solid transparent;
   --pagefind-ui-font: roboto, Arial, Helvetica, sans-serif;
   --outline-focus-indicator: #257fa8;
+
+  @media print {
+    --bg-neutral: white;
+  }
 }
 
 html[data-theme="dark"] {
-  --pagefind-ui-text: #fff;
-  --link-default: #ff6b3d;
-  --link-hovered: #ff8a5b;
-  --link-special: #ffffff;
-  --bg-default: #151b23;
-  --bg-neutral: #0d1117;
-  --bg-accent: #86761a;
-  --bg-accent2: #daba00;
-  --bg-accent3: #fff284;
-  --color-onLight: #ffffff;
-  --color-table-border: #555;
-  --color-body: #e0e0e0;
-  --pagefind-ui-border: #555;
-  --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);
-  --highlight-color-tip: #1a4a5c;
-  --highlight-color-inofficial: #2a2d30;
-  --highlight-color-important: #4a2a1a;
-  --border: 0.1rem solid #3d444d;
-  --outline-focus-indicator: #2e9acb;
+  @media screen {
+    --pagefind-ui-text: #fff;
+    --link-default: #ff6b3d;
+    --link-hovered: #ff8a5b;
+    --link-special: #ffffff;
+    --bg-default: #151b23;
+    --bg-neutral: #0d1117;
+    --color-onLight: #ffffff;
+    --color-table-border: #555;
+    --color-body: #e0e0e0;
+    --pagefind-ui-border: #555;
+    --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);
+    --highlight-color-tip: #1a4a5c;
+    --highlight-color-inofficial: #2a2d30;
+    --highlight-color-important: #4a2a1a;
+    --border: 0.1rem solid #3d444d;
+    --outline-focus-indicator: #2e9acb;
+  }
 }

assets/sass/_variables.scss

@@ -88,7 +88,7 @@
   align-self: flex-start;
   margin: 1rem;
   text-wrap: balance;
-  z-index: 1000;
+  z-index: 22;
 }
 
 .a-snackbar--show {

assets/sass/anchorlink.scss

@@ -20,4 +20,9 @@
   }
 
   @include focus-indicator(0.2rem);
+
+  @media print {
+    padding: 0.6rem;
+    display: block;
+  }
 }