diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 8a716907..9c312a39 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -32,8 +32,8 @@ html { --border-radius-s: 0.4rem; --border-radius-m: 0.8rem; --border-radius-l: 1.6rem; - --pagefind-ui-border-radius: var(--border-radius-l); - --pagefind-ui-border: #000; + --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); --highlight-color-tip: #c4f2ff; @@ -41,6 +41,7 @@ html { --highlight-color-important: #ffe3d9; --border: 0.1rem solid transparent; --pagefind-ui-font: roboto, Arial, Helvetica, sans-serif; + --outline-focus-indicator: #257fa8; } html[data-theme="dark"] { @@ -64,4 +65,5 @@ html[data-theme="dark"] { --highlight-color-inofficial: #2a2d30; --highlight-color-important: #4a2a1a; --border: 0.1rem solid #3d444d; + --outline-focus-indicator: #2e9acb; } diff --git a/assets/sass/anchorlink.scss b/assets/sass/anchorlink.scss index 3bdd4123..7e2a43d1 100644 --- a/assets/sass/anchorlink.scss +++ b/assets/sass/anchorlink.scss @@ -53,7 +53,9 @@ color: var(--link-default); border: none; background-color: transparent; - transition: all 0.3s ease; + transition: + background-color 0.3s ease, + opacity 0.3s ease; &:hover, &:focus { @@ -61,6 +63,8 @@ opacity: 1; } + @include focus-indicator(0.2rem); + @media print { display: none; } diff --git a/assets/sass/button.scss b/assets/sass/button.scss index 8c0ce6ea..7717ea90 100644 --- a/assets/sass/button.scss +++ b/assets/sass/button.scss @@ -3,7 +3,7 @@ display: inline-flex; align-items: center; gap: 0.4rem; - border: 2px solid var(--link-default); + border: 0.2rem solid var(--link-default); border-radius: var(--border-radius-m); font-size: 1.5rem; cursor: pointer; @@ -18,4 +18,6 @@ &:focus { background: rgba($link-hovered, 0.15); } + + @include focus-indicator(0.2rem); } diff --git a/assets/sass/contentNavigation.scss b/assets/sass/contentNavigation.scss index 2633cca3..7bb9df14 100644 --- a/assets/sass/contentNavigation.scss +++ b/assets/sass/contentNavigation.scss @@ -23,6 +23,10 @@ margin-bottom: 0; } } + + li { + margin-bottom: 0.3rem; + } } .o-aside__header { @@ -34,6 +38,9 @@ display: flex; align-items: flex-start; gap: 0.4rem; + width: fit-content; + + @include focus-indicator(0.1rem); } .o-aside__backlink-text { diff --git a/assets/sass/dropdown.scss b/assets/sass/dropdown.scss index f52d5ea8..7e74f392 100644 --- a/assets/sass/dropdown.scss +++ b/assets/sass/dropdown.scss @@ -16,7 +16,7 @@ &:hover, &:focus { color: var(--link-hovered); - transition: all 0.3s ease; + transition: color 0.3s ease; & > :not(.material-symbols-rounded) { text-decoration: underline; diff --git a/assets/sass/expander.scss b/assets/sass/expander.scss index 7c7c9298..ad63b018 100644 --- a/assets/sass/expander.scss +++ b/assets/sass/expander.scss @@ -8,6 +8,8 @@ gap: 0.5rem; align-items: center; transition: background 0.3s ease; + justify-content: space-between; + border-radius: var(--border-radius-m); &:not(.o-expander__summary--booking) { font-weight: 700; @@ -19,10 +21,11 @@ text-decoration: underline; } - border-radius: var(--border-radius-m); background: rgba($link-hovered, 0.15); } + @include focus-indicator(0.2rem); + &--booking { &:hover, &:focus { @@ -53,7 +56,6 @@ details { background-color: var(--bg-neutral); border-radius: var(--border-radius-m); margin-bottom: 1.2rem; - border: var(--border); table { width: 100%; @@ -65,10 +67,6 @@ details > summary { list-style-type: none; } -.details-screen > .o-expander__summary { - padding-right: 3.2rem; -} - details > div { overflow-x: auto; } @@ -77,19 +75,18 @@ details > summary::-webkit-details-marker { display: none; } -.details-screen > .o-expander__summary::before { - content: "keyboard_arrow_down"; - position: absolute; - right: 1.2rem; - font-size: 2.4rem; - align-self: center; - @extend .material-symbols-rounded; +.o-expander__summary > span { + transition: transform 0.2s; +} + +.o-expander__summary > div { + display: flex; + align-items: center; + gap: 0.5rem; } -.details-screen[open] > .o-expander__summary::before { - content: "keyboard_arrow_up"; - font-size: 2.4rem; - @extend .material-symbols-rounded; +.details-screen[open] > .o-expander__summary > span { + transform: rotate(180deg); } details[open] > .o-expander__summary:not(.o-expander__summary--booking) { diff --git a/assets/sass/form.scss b/assets/sass/form.scss index c813141f..e81128a2 100644 --- a/assets/sass/form.scss +++ b/assets/sass/form.scss @@ -28,6 +28,8 @@ @media (min-width: #{$breakpoint-md}) { width: 50%; } + + @include focus-indicator(0.2rem); } } diff --git a/assets/sass/interactiveMap.scss b/assets/sass/interactiveMap.scss index 5475200a..fdc331e8 100644 --- a/assets/sass/interactiveMap.scss +++ b/assets/sass/interactiveMap.scss @@ -67,11 +67,14 @@ align-items: center; justify-content: center; font-size: 3rem; - transition: all 0.2s ease; + transition: background-color 0.2s ease; - &:hover { + &:hover, + &:focus { background-color: var(--link-hovered); } + + @include focus-indicator(0.2rem); } &__legend { diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 062693f4..50c57542 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -194,6 +194,7 @@ menu > li > menu { align-items: center; white-space: nowrap; line-height: 1; + border-radius: var(--border-radius-m); &:hover, &:focus { diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 44d3a2e5..6db0dd3f 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -16,10 +16,7 @@ border: var(--border); box-shadow: var(--box-shadow); - &:focus { - outline: 0.2rem solid orange; - outline-offset: 0.1rem; - } + @include focus-indicator(0.2rem); &::placeholder { opacity: 0.7; @@ -48,22 +45,17 @@ padding: 0 1rem 1rem 1rem; overscroll-behavior: contain; height: 35rem; + top: 0.4rem; overflow-y: scroll; position: relative; - top: -0.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); + border-radius: var(--pagefind-ui-border-radius); z-index: 3; } .pagefind-ui__result-link { color: var(--link-default); text-decoration: underline; + border-radius: var(--border-radius-s); &:hover, &:focus { @@ -76,10 +68,8 @@ color: var(--link-hovered); } - .pagefind-ui__result-link:focus { - outline: 0.2rem solid orange; - outline-offset: 0.1rem; - border-radius: var(--border-radius-s); + .pagefind-ui__result-link { + @include focus-indicator(0.2rem); } .pagefind-ui__result-link::before { @@ -92,11 +82,14 @@ } .pagefind-ui__button { - background-color: var(--bg-accent); + border: 0.2rem solid var(--link-default); + border-radius: var(--border-radius-m); + background: transparent; + color: var(--body-color); &:hover, &:focus { - background-color: var(--bg-accent2); + background: rgba($link-hovered, 0.15); } } } diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 018dae74..d6021f5f 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -40,20 +40,35 @@ ol { } } +@mixin focus-indicator($offset) { + &:focus, + &:focus-visible { + outline: var(--outline-focus-indicator) solid 0.2rem; + outline-offset: $offset; + } +} + button { font-size: 1.8rem; + border-radius: var(--border-radius-s); + @include focus-indicator(0.2rem); } a { color: var(--link-default); - transition: all 0.3s ease; + transition: + color 0.3s ease, + background-color 0.3s ease; text-underline-offset: 0.2rem; + border-radius: var(--border-radius-s); &:hover, &:focus { color: var(--link-hovered); } + @include focus-indicator(0.2rem); + @media print { text-decoration: none; color: var(--bs-body-color); diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index 6208c404..d579fd3b 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -21,6 +21,8 @@ } } + @include focus-indicator(0.3rem); + .material-symbols-rounded { font-size: 2.4rem; margin-top: 1rem; diff --git a/content/operator/euskotren/index.de.md b/content/operator/euskotren/index.de.md index b43bbe56..09cb7d7e 100644 --- a/content/operator/euskotren/index.de.md +++ b/content/operator/euskotren/index.de.md @@ -26,7 +26,7 @@ Das Personal vor Ort in den Euskotren Kundenzentren stellt dir gegen Vorlage des Das Ticket wird auch für Angehörige mit eigenem FIP-Ausweis ausgestellt. Es ist inklusive des Ausstellungstages für 7 Tage gültig und du kannst es für das gesamte Euskotren-Netz mit Ausnahme von Regionalbuslinien und der Museumsbahn nutzen. Du nutzt das "Euskotren FIP Ticket", um die Bahnsteinbarrieren zu passieren. Nach Ablauf kannst du das Ticket mehrfach pro Jahr neu ausstellen lassen. Die sonst übliche Limitierung bei FIP Freifahrtscheinen wendet Euskotren nicht an. -
+ {{% highlight tip %}} Einige Zugbetreiber stellen auch Freifahrtscheine für Euskotren aus. Nach unserem Stand haben diese keinen Nutzen, die Bahnsteigbarrieren können damit nicht passiert werden. Stattdessen empfehlen wir, das Ticket vor Ort ausstellen zu lassen. diff --git a/content/operator/euskotren/index.en.md b/content/operator/euskotren/index.en.md index 43963958..19471ddf 100644 --- a/content/operator/euskotren/index.en.md +++ b/content/operator/euskotren/index.en.md @@ -26,7 +26,7 @@ The staff at Euskotren customer centers will issue you a special "Euskotren FIP The ticket is also issued for relatives with their own FIP card. It is valid for 7 days including the day of issue and you can use it for the entire Euskotren network except for regional bus lines and the museum railway. You use the "Euskotren FIP Ticket" to pass through platform barriers. After expiry, you can have the ticket reissued multiple times per year. Euskotren does not apply the usual limitation for FIP Coupons. -
+ {{% highlight tip %}} Some train operators also issue FIP Coupones for Euskotren. According to our information, these have no use, as platform barriers cannot be passed with them. Instead, we recommend having the ticket issued on site. diff --git a/content/operator/euskotren/index.fr.md b/content/operator/euskotren/index.fr.md index d52c644c..8c0eab18 100644 --- a/content/operator/euskotren/index.fr.md +++ b/content/operator/euskotren/index.fr.md @@ -26,7 +26,7 @@ Le personnel des centres clients Euskotren vous délivre un "Euskotren FIP Ticke Le billet est également délivré aux accompagnants avec leur propre carte FIP. Il est valable 7 jours y compris le jour d'émission et vous pouvez l'utiliser pour l'ensemble du réseau Euskotren à l'exception des lignes de bus régionales et du train musée. Vous utilisez l'"Euskotren FIP Ticket" pour passer les barrières de quai. Après expiration, vous pouvez faire renouveler le billet plusieurs fois par an. Euskotren n'applique pas la limitation habituelle pour les Coupons FIP. -
+ {{% highlight tip %}} Certains opérateurs ferroviaires délivrent également des titres de transport gratuits pour Euskotren. Selon nos informations, ceux-ci n'ont aucune utilité, les barrières de quai ne peuvent pas être franchies avec. Nous recommandons plutôt de faire délivrer le billet sur place. diff --git a/i18n/de.yaml b/i18n/de.yaml index 012760c2..19a09d29 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -16,6 +16,7 @@ booking: visit-booking-website: Zur Buchungsseite contentNavigation: button: Inhaltsübersicht öffnen und schließen + relatedCountries: Länder, in den der Betreibers aktiv ist title: Inhaltsübersicht countries: overview: Länder mit FIP Akzeptanz @@ -30,8 +31,8 @@ country: other: Länder editPage: Seite bearbeiten footer-love: - aria-label: Made with love in Europa - text: Made with ♥️ in Europa + aria-label: Made with love in Europe + text: Made with ♥️ in Europe general: Übergreifendes highlight: important: Wichtige Information @@ -74,7 +75,9 @@ related-countries: Verwandte Länder related-news: Verwandte News related-operators: Verwandte Betreiber reportError: Melde ein Fehler -search-placeholder: Suche +search: + label: Durchsuche alle Seiteninhalte + placeholder: Suche skipToContent: Zum Inhalt springen support: text: >- @@ -88,7 +91,9 @@ theme: switch-to-dark: Zu dunklem Modus wechseln switch-to-light: Zu hellem Modus wechseln toc_name: Inhalt -updateDate: Zuletzt aktualisiert +updateDate: + aria-label: Öffne die Commit-Verlauf der Seite + label: Zuletzt aktualisiert wip: >- An dieser Seite wird noch gearbeitet und Inhalte können unvollständig sein. Wir freuen uns, wenn du zur Verbesserung dieser Seite beträgst. [Mehr diff --git a/i18n/en.yaml b/i18n/en.yaml index 7af9b66f..9cc61fa6 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -15,6 +15,7 @@ booking: visit-booking-website: To Booking Website contentNavigation: button: Open and close content overview + relatedCountries: Countries in which the operator is active title: Content overview countries: overview: Countries with FIP acceptance @@ -70,7 +71,9 @@ related: operators: Related Operators operators-nearby: Neighboring Operators reportError: Report an error -search-placeholder: Search +search: + label: Search all page content + placeholder: Search skipToContent: Skip to content support: text: >- @@ -84,7 +87,9 @@ theme: switch-to-dark: Switch to dark mode switch-to-light: Switch to light mode toc_name: Contents -updateDate: Last updated +updateDate: + aria-label: Open the commit history of the page + label: Last updated wip: >- This page is still under construction and content may be incomplete. We would be happy if you contribute to improve this page. [More information on diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 8726ca90..ac252b1f 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -15,6 +15,7 @@ booking: visit-booking-website: Aller sur le site de réservation contentNavigation: button: Ouvrir et fermer l’aperçu du contenu + relatedCountries: Pays dans lesquels l'opérateur est actif title: Aperçu du contenu countries: overview: Pays acceptation FIP @@ -70,7 +71,9 @@ related: operators: Opérateurs associés operators-nearby: Opérateurs voisins reportError: Signaler une erreur -search-placeholder: Rechercher +search: + label: Rechercher dans tout le contenu de la page + placeholder: Rechercher skipToContent: Aller au contenu support: text: >- @@ -84,7 +87,9 @@ theme: switch-to-dark: Passer en mode sombre switch-to-light: Passer en mode clair toc_name: Sommaire -updateDate: Dernière mise à jour +updateDate: + aria-label: Ouvrir l'historique des commits de la page + label: Dernière mise à jour wip: >- Cette page est encore en cours de construction et le contenu peut être incomplet. Nous serions ravis que vous contribuiez à l'amélioration de cette diff --git a/layouts/news/single.html b/layouts/news/single.html index e2f280da..43daf626 100644 --- a/layouts/news/single.html +++ b/layouts/news/single.html @@ -24,7 +24,7 @@

{{ T "news-other" }}

{{ partial "related" (dict "index" "country" "title" (T "related.countries") "page" . "identifier" "countries") }} {{ partial "related" (dict "index" "operator" "title" (T "related.operators") "page" . "identifier" "operators") }} -
+ {{ partial "link" (dict "Destination" (print .Site.Params.githubDevUrl "blob/main/content" .Path "/index." .Language ".md") diff --git a/layouts/partials/booking.html b/layouts/partials/booking.html index c1cfd381..b92f0757 100644 --- a/layouts/partials/booking.html +++ b/layouts/partials/booking.html @@ -52,6 +52,7 @@ + {{- partial "icon" "keyboard_arrow_down" -}}
diff --git a/layouts/partials/content.html b/layouts/partials/content.html index 313ba984..f7592cb1 100644 --- a/layouts/partials/content.html +++ b/layouts/partials/content.html @@ -1,3 +1,3 @@ {{- with .Content -}} - {{ . | replaceRE "()" (print (partial "intersector") `${1}${3}`) | safeHTML }} + {{ . | replaceRE "()" (print (partial "intersector") `${1}${3}`) | replaceRE "
" "
" | safeHTML }} {{- end -}} diff --git a/layouts/partials/contentNavigation.html b/layouts/partials/contentNavigation.html index 9bb03ce4..a3e4f98a 100644 --- a/layouts/partials/contentNavigation.html +++ b/layouts/partials/contentNavigation.html @@ -22,7 +22,7 @@ >
{{ if eq .Page.Type "operator" }} -
    +
      {{ $related := .Site.RegularPages.RelatedIndices . "country" }} {{ with $related }} {{ range . }} @@ -57,31 +57,37 @@

      {{ .Title }}

      {{ partial "related" (dict "index" "country" "pageType" "operator" "title" (T "related.operators-nearby") "page" . "identifier" "operators") }} {{ partial "related" (dict "index" "operator" "pageType" "news" "title" (T "related.news") "page" . "identifier" "news") }} {{ end }} -
      - {{ partial "link" - (dict - "Destination" (print .Site.Params.githubDevUrl "blob/main/content" .Path "/index." .Language ".md") - "Text" ((print (partial "icon" "edit_square" ) (T "editPage")) | .Page.RenderString) - ) - }} - {{ if eq .Page.Type "operator" }} - {{ $operator := replace .Path (printf "/%s/" .Page.Type) "" }} - {{ partial "link" - (dict - "Destination" (print .Site.Params.gitHubUrl "/issues/new?title=Issue+with+operator+" .LinkTitle "&labels=content,operator::" $operator) - "Text" ((print (partial "icon" "bug_report" ) (T "reportError")) | .Page.RenderString) - ) - }} - {{ end }} - {{ if eq .Page.Type "country" }} - {{ $country := replace .Path (printf "/%s/" .Page.Type) "" }} - {{ partial "link" - (dict - "Destination" (print .Site.Params.gitHubUrl "/issues/new?title=Issue+with+country+" .LinkTitle "&labels=content,country::" $country) - "Text" ((print (partial "icon" "bug_report" ) (T "reportError")) | .Page.RenderString) - ) - }} - {{ end }} + +
        +
      • + {{ partial "link" + (dict + "Destination" (print .Site.Params.githubDevUrl "blob/main/content" .Path "/index." .Language ".md") + "Text" ((print (partial "icon" "edit_square" ) (T "editPage")) | .Page.RenderString) + ) + }} +
        • +
      • + {{ if eq .Page.Type "operator" }} + {{ $operator := replace .Path (printf "/%s/" .Page.Type) "" }} + {{ partial "link" + (dict + "Destination" (print .Site.Params.gitHubUrl "/issues/new?title=Issue+with+operator+" .LinkTitle "&labels=content,operator::" $operator) + "Text" ((print (partial "icon" "bug_report" ) (T "reportError")) | .Page.RenderString) + ) + }} + {{ end }} + {{ if eq .Page.Type "country" }} + {{ $country := replace .Path (printf "/%s/" .Page.Type) "" }} + {{ partial "link" + (dict + "Destination" (print .Site.Params.gitHubUrl "/issues/new?title=Issue+with+country+" .LinkTitle "&labels=content,country::" $country) + "Text" ((print (partial "icon" "bug_report" ) (T "reportError")) | .Page.RenderString) + ) + }} + {{ end }} +
        • +
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 70ecdd17..171cf70d 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,10 @@
-
+
{{ T "footer-love.text" }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index cba8e634..2e8af7f9 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -34,7 +34,7 @@ {{ $currentPage := . }}
  • -
    +
    • -
    +
    • -
    +
  • {{ $news := site.GetPage "news" }} {{ $news.Title }}
    • -
    +
  • {{ $informationPage := site.GetPage "generalInformation" }} {{ $informationPage.Title }}
    • -
    +
  • diff --git a/layouts/partials/search-slot.html b/layouts/partials/search-slot.html index 1c0a7c32..f4934460 100644 --- a/layouts/partials/search-slot.html +++ b/layouts/partials/search-slot.html @@ -1,7 +1,8 @@