diff --git a/assets/js/highlightHeadline.js b/assets/js/highlightHeadline.js index 45b9ba09..3939d256 100644 --- a/assets/js/highlightHeadline.js +++ b/assets/js/highlightHeadline.js @@ -13,10 +13,10 @@ function initHighlightHeadline() { return; // No headings? No business here } - // A few helper functions (.toc is the top-level ordered list) + // A few helper functions (.o-aside__toc is the top-level ordered list) const markTocItemActive = (a) => {return a.setAttribute('data-current', '');} const markTocItemInactive = (a) => {return a.removeAttribute('data-current');}; - const getTocLinkFromHeading = (h) => {return document.querySelector(`.toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);} + const getTocLinkFromHeading = (h) => {return document.querySelector(`.o-aside__toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);} const getDocHeight = () => Math.floor(document.body.clientHeight); diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index d301626f..f7c2bd82 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -2,6 +2,7 @@ $breakpoint-sm: 576px; $breakpoint-md: 768px; $breakpoint-lg: 992px; $breakpoint-xl: 1200px; +$breakpoint-xxl: 1400px; $link-hovered: #8F2501; $link-default: #BA3D12; @@ -16,7 +17,6 @@ $color-onLight: #000000; $color-table-border: #5B5B5B; body { - --bs-light-rgb: 219, 224, 229; --pagefind-ui-scale: 1; --pagefind-ui-text: #000; --link-default: #{$link-default}; @@ -30,11 +30,12 @@ body { --color-onDark: #{$color-onDark}; --color-onLight: #{$color-onLight}; --color-table-border: #{$color-table-border}; + --color-body: rgb(33, 37, 41); --border-radius-s: .4rem; --border-radius-m: .8rem; --border-radius-l: 1.6rem; --pagefind-ui-border-radius: var(--border-radius-l); --pagefind-ui-border: #000; - --bs-highlight-bg: var(--bg-accent); --box-shadow: 0 .4rem 1rem rgba(0,0,0,.25); + --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0,0,0,.1); } diff --git a/assets/sass/anchorlink.scss b/assets/sass/anchorlink.scss index 3f0e5fa4..c1047fe3 100644 --- a/assets/sass/anchorlink.scss +++ b/assets/sass/anchorlink.scss @@ -23,7 +23,7 @@ background-repeat: no-repeat; height: 2.4rem; opacity: 50%; - border-top: 0; + border: 0; @media print { margin: 0; diff --git a/assets/sass/content.scss b/assets/sass/content.scss index 2eff9406..f7633664 100644 --- a/assets/sass/content.scss +++ b/assets/sass/content.scss @@ -1,8 +1,8 @@ -.updateDate { +.o-last-updated { font-size: 1.3rem; } -.updateDate > .material-symbols-rounded { +.o-last-updated > .material-symbols-rounded { font-size: 1.5rem } @@ -16,23 +16,47 @@ code { } table { - margin-bottom: .6rem; + border-collapse: collapse; + margin-bottom: 1rem; + margin-left: 0.2rem; + box-shadow: 0 0.4rem 0.4rem rgba(0,0,0,.1); } -tr { - border-bottom: .1rem solid var(--color-table-border); +thead { + th:first-child { + border-top-left-radius: var(--border-radius-s); + } + th:last-child { + border-top-right-radius: var(--border-radius-s); + } + + th { + background: $link-hovered; + color: white; + text-align: left; + } } -th, td { - padding: .6rem 2rem .6rem 0; +tbody { + tr { + border-bottom: .1rem solid $color-table-border; + } + + tr:nth-of-type(even) { + background-color: $bg-default; + } + + tr:last-of-type { + border-bottom: 2px solid $link-hovered; + } } -.footnote-backref { +th, +td { padding: 1rem; } .footnotes { - p { text-align: left; } @@ -40,6 +64,11 @@ th, td { hr { display: none; } + + ol { + padding-left: 2rem; + list-style-position: outside; + } } p:has( + span) { diff --git a/assets/sass/fonts.scss b/assets/sass/fonts.scss index e79ac5c8..1dc9670d 100644 --- a/assets/sass/fonts.scss +++ b/assets/sass/fonts.scss @@ -79,7 +79,7 @@ font-display: block; // Do not display icons until font is fully loaded } -body { +body, button { font-family: "Roboto",Arial,Helvetica,sans-serif; word-wrap: break-word; hyphens: auto; diff --git a/assets/sass/footer.scss b/assets/sass/footer.scss index abc48d12..0f6c44a4 100644 --- a/assets/sass/footer.scss +++ b/assets/sass/footer.scss @@ -30,3 +30,9 @@ margin-right: 0; } } + +.o-footer__firstline { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} diff --git a/assets/sass/form.scss b/assets/sass/form.scss index d3fafc39..bad7ea0b 100644 --- a/assets/sass/form.scss +++ b/assets/sass/form.scss @@ -7,12 +7,13 @@ max-width: fit-content; } - .row > label { + label { padding: 0; + display: flex; + flex-flow: column; } input[type=text], input[type=email], select, textarea { - width: 100%; margin-bottom: 1.6rem; border-radius: var(--border-radius-l); border-width: .2rem; diff --git a/assets/sass/headings.scss b/assets/sass/headings.scss index 22b3dfc4..6b9cdfbd 100644 --- a/assets/sass/headings.scss +++ b/assets/sass/headings.scss @@ -2,6 +2,7 @@ h1 { font-size: 3rem; line-height: 1.25; margin-bottom: 2rem; + margin-top: 0; font-weight: 700; text-wrap: balance; } @@ -10,6 +11,7 @@ h2 { font-size: 2.2rem; line-height: 1.25; margin-bottom: 1rem; + margin-top: 0; font-weight: 700; text-wrap: balance; } @@ -18,6 +20,7 @@ h3 { font-size: 2rem; line-height: 1.25; margin-bottom: 1rem; + margin-top: 0; font-weight: 700; text-wrap: balance; } @@ -26,6 +29,7 @@ h4 { font-size: 1.8rem; line-height: 1.25; margin-bottom: 1rem; + margin-top: 0; font-weight: 700; text-wrap: balance; } diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 756f7121..123ac786 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,5 +1,4 @@ @import "_variables.scss"; -@import "node_modules/bootstrap/scss/bootstrap.scss"; @import "styles.scss"; @import "fonts.scss"; @import "navigation.scss"; @@ -16,3 +15,4 @@ @import "print.scss"; @import "booking.scss"; @import "button.scss"; +@import "startpage.scss"; diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index b6daaff9..dea56eb4 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -15,6 +15,7 @@ .o-header__wrapper { display: flex; justify-content: space-between; + align-items: center; padding: 0; @media (min-width: #{$breakpoint-md}) { @@ -70,7 +71,7 @@ img { width: auto; - height: 4.7rem; + height: 4.4rem; padding: .2rem .4rem; align-self: center; } @@ -88,7 +89,7 @@ left: 50%; transform: translateX(-50%); padding: 1rem; - margin: .6rem; + margin: .9rem; pointer-events: none; background-color: var(--bg-neutral); border-radius: var(--border-radius-s); @@ -102,6 +103,7 @@ .o-header__item { list-style: none; + height: 6rem; //normales Menü ul { @@ -134,6 +136,10 @@ } } +.o-header__expand-button { + margin: 0.9rem; +} + .o-header__expand-button > .material-symbols-rounded, .o-nav__menu-button > .material-symbols-rounded, .o-nav__close-button > .material-symbols-rounded { @@ -216,6 +222,10 @@ margin-bottom: 5rem; } + .o-header__item { + height: fit-content; + } + h2 { padding-right: 1rem; text-align: right; diff --git a/assets/sass/print.scss b/assets/sass/print.scss index 6148e450..22a6b693 100644 --- a/assets/sass/print.scss +++ b/assets/sass/print.scss @@ -14,14 +14,14 @@ margin-bottom: 1rem; } - main > .container.o-single, - main > .container.o-list { + main > .o-container.o-single, + main > .o-container.o-list { margin-top: 0; } .o-single__container, - .container, - main > .container { + .o-container, + main > .o-container { padding: 0; } @@ -32,7 +32,6 @@ .o-list__picture, .o-header__wrapper, .o-footer__links, - .footnote-backref, summary::before, #search { display: none; @@ -40,7 +39,7 @@ details[open]::details-content { display: contents; } - a:not(.footnote-ref):not(.updateDate)::after { + a:not(.footnote-ref):not(.o-last-updated)::after { content: " (" attr(href) ") "; } } diff --git a/assets/sass/sidemenu.scss b/assets/sass/sidemenu.scss index 8e640201..69327e4a 100644 --- a/assets/sass/sidemenu.scss +++ b/assets/sass/sidemenu.scss @@ -29,12 +29,16 @@ display: block; } } -} -.tableOfContents ul { - list-style-type: none; - list-style-position: outside; - padding-left: 0; + ul, ol { + list-style-type: none; + list-style-position: outside; + padding-left: 0; + + ul, ol { + margin-bottom: 0; + } + } } .o-aside a { @@ -50,27 +54,25 @@ gap: .4rem; } -.toc li { - list-style-type: none; -} - -.toc ol { - padding: 0 0 0 1em; -} +.o-aside__toc { + li { + list-style-type: none; + } -.toc > ol { - padding-left: 0; -} + ol { + padding: 0 0 0 1em; + } -.toc-title { - font-weight: bold; + > ol { + padding-left: 0; + } } -.toc-link { +.o-aside__toc-link { display: flex; } -.toc a[data-current] { +.o-aside__toc a[data-current] { font-weight: bold; &:before { diff --git a/assets/sass/startpage.scss b/assets/sass/startpage.scss new file mode 100644 index 00000000..933c04e7 --- /dev/null +++ b/assets/sass/startpage.scss @@ -0,0 +1,69 @@ +.o-startpage h2:not(#welcome-to-the-fip-guide) { + margin-top: 2rem; +} + +.o-startpage__intro { + text-wrap: balance; + margin-bottom: 2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + + @media (max-width: #{$breakpoint-md}) { + display: flex; + flex-direction: column; + } + + h2 { + font-family: Sansita,Arial,Helvetica,sans-serif; + font-weight: 800; + font-size: 6.2rem; + line-height: 1.1; + } + + > div { + align-content: center; + } + + @media (max-width: #{$breakpoint-md}) { + h2 { + font-size: 4.8rem; + } + } +} + +.o-startpage__image { + @media (max-width: #{$breakpoint-md}) { + display: none; + } +} + +.o-startpage__shortcut-wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr 3fr; + gap: 2rem; + margin-bottom: 2rem; + + @media (max-width: #{$breakpoint-md}) { + display: flex; + flex-wrap: wrap; + gap: 1rem; + } +} + +.o-startpage__news-wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 2rem; + margin-bottom: 2rem; + + @media (max-width: #{$breakpoint-md}) { + display: flex; + flex-wrap: wrap; + } +} + +.o-startpage__search { + margin-bottom: 2rem; + width: 100%; +} diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 4a4b2b0e..ef9e6f59 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -2,12 +2,29 @@ html { font-size: 62.5%; color: var(--color-onLight); scroll-padding-top: 8rem; + scroll-behavior: smooth; } body { + color: var(--color-body); background-color: var(--bg-neutral); font-size: 1.8rem; overflow-x: hidden; + margin: 0; + line-height: 1.5; +} + +p, ul, ol { + margin-top: 0; + margin-bottom: 1rem; +} + +ul, ol { + padding-left: 2rem; +} + +button { + font-size: 1.8rem; } a { @@ -34,13 +51,41 @@ main { margin-top: 2rem; } -.container.o-list:not(.o-list--news) { +.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); + } + + width: 100%; + margin-left: auto; + margin-right: auto; +} + +.o-card{ background-color: var(--bg-default); border-radius: var(--border-radius-l); padding: 2rem; } -main > .container:is(.o-single--with-sidemenu) { +main > .o-container:is(.o-single--with-sidemenu) { background-color: unset; padding: 0; @@ -62,6 +107,7 @@ img { .o-list__picture { margin-right: 1.2rem; + display: flex; } .o-related__operator-wrapper > .o-related__list { @@ -84,16 +130,15 @@ img { margin-left: 2.4rem; } +.o-list__list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1rem; +} + .o-list__link { display: flex; align-items: center; - margin-bottom: 1rem; -} - -.container { - @media (max-width: #{$breakpoint-sm}) { - max-width: calc(100% - 3.2rem); - } } @mixin add-columns($columns) { @@ -106,13 +151,14 @@ img { } } -.o-section{ +.o-section { @include add-columns(1); @include add-columns(2); @include add-columns(3); } -.o-single { +.o-single, +.o-list { padding: 2rem; background-color: var(--bg-default); border-radius: var(--border-radius-l); @@ -183,6 +229,7 @@ img { .pagefind-highlight { padding: 0; + background-color: var(--bg-accent); } .sr-only { @@ -195,33 +242,17 @@ img { width: auto; } -.o-startpage .row { - margin-bottom: 2.4rem; +button:not(:disabled) { + cursor:pointer } -.o-startpage__intro { - text-wrap: balance; - - h2 { - font-family: Sansita,Arial,Helvetica,sans-serif; - font-weight: 800; - font-size: 6.2rem; - line-height: 1.1; - } - - > div { - align-content: center; - } - - @media (max-width: #{$breakpoint-md}) { - h2 { - font-size: 4.8rem; - } - } +hr { + opacity: 0.25; + border: 0; + border-top: 1px solid; + margin: 1rem 0; } -.o-startpage__image { - @media (max-width: #{$breakpoint-md}) { - display: none; - } +details > summary { + cursor: pointer; } diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index d4589b35..cffbf382 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -11,12 +11,6 @@ display: flex; flex-direction: column; - &:nth-child(-n+3) { - @media (max-width: #{$breakpoint-lg}) { - margin-bottom: 2rem; - } - } - &:hover, &:focus { background: rgba($link-hovered, 0.15); @@ -53,9 +47,11 @@ } .m-teaser--shortcut-tile { + flex-basis: calc( 50% - 0.5rem ); + .m-teaser__wrapper { width: 100%; - height: 12rem; + height: 10rem; padding: 1.4rem; justify-content: space-between; } diff --git a/content/contact/index.de.html b/content/contact/index.de.html index 63783dd5..f2185119 100644 --- a/content/contact/index.de.html +++ b/content/contact/index.de.html @@ -3,30 +3,25 @@ description: "Kontaktiere das Team hinter dem FIP Guide – wir sind für Fragen und Anmerkungen erreichbar und freuen uns auf deinen Inhaltsbeitrag." --- -
+ -
- +
+ -
- +
+ -
- +
+ -
- -
+
Oder schreibe uns eine Mail: nextstop@fipguide.org diff --git a/content/contact/index.en.html b/content/contact/index.en.html index 27f3ffe0..2df16a82 100644 --- a/content/contact/index.en.html +++ b/content/contact/index.en.html @@ -3,30 +3,25 @@ description: "Contact the team behind the FIP Guide - we are here for questions and comments and look forward to your content contribution." --- -
+ -
- +
+ -
- +
+ -
- +
+ -
- -
+
Or write us an email: nextstop@fipguide.org diff --git a/hugo.yaml b/hugo.yaml index 3b7eb1ea..bf0bcdd1 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -18,8 +18,6 @@ languages: module: mounts: - - source: "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" - target: "assets/js/bootstrap.bundle.min.js" - source: "assets" target: "assets" - source: "static" diff --git a/layouts/404.html b/layouts/404.html index 3ab3ed85..ac6e0568 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+

404 - Page Not Found

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 968ca557..d1a62b83 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,7 +8,7 @@ -
{{ block "main" . }}{{ end }}
+
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
{{ if and (eq .Kind "page") (or (eq .Page.Type "country") (eq .Page.Type "operator")) }} {{ partial "snackbar" . }} diff --git a/layouts/_default/home.html b/layouts/_default/home.html index b3855da8..c2d7d3e5 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -1,41 +1,39 @@ {{ define "main" }} -

{{ T "home-page-text" }}

-
-
-
- {{ .Content }} +
+

{{ T "home-page-text" }}

+
+
+
+ {{ .Content }} +
+
+ {{ $image := resources.Get "images/startpage.webp" }} + {{ partial "image" (dict "image" $image "eager" true) }} +
-
- {{ $image := resources.Get "images/startpage.webp" }} - {{ partial "image" (dict "image" $image "eager" true) }} -
-
-
-
+ +
{{ partial "search-slot" }}
-
-
- {{ partial "shortcut-tile" (.Site.GetPage "generalinformation") }} - {{ partial "shortcut-tile" (.Site.GetPage "country") }} - {{ partial "shortcut-tile" (.Site.GetPage "operator") }} -
-
-
-
-
-

{{ T "support.title" }}

-

{{ T "support.text" | safeHTML }}

+ +
+ {{ partial "shortcut-tile" (.Site.GetPage "generalinformation") }} + {{ partial "shortcut-tile" (.Site.GetPage "country") }} + {{ partial "shortcut-tile" (.Site.GetPage "operator") }}
-
-
-
-
-

{{ T "news-headline"}}

- {{ range first 3 (where site.RegularPages "Section" "news") }} - {{ partial "teaser.html" (dict "listview" false "type" "news" "page" .) }} - {{ end }} +
+
+

{{ T "support.title" }}

+

{{ T "support.text" | safeHTML }}

+
+
+

{{ T "news-headline"}}

+
+ {{ range first 3 (where site.RegularPages "Section" "news") }} + {{ partial "teaser.html" (dict "listview" false "type" "news" "page" .) }} + {{ end }}
-
- + + + {{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index b74dd68a..6525757d 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,6 +1,6 @@ {{ define "main" }} -
-
+
+

{{ .Title }}

{{ .Content }} {{ range .Pages }} {{ partial "teaser.html" (dict "listview" "true" "page" .) }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 8aef10d6..99d3b062 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+

{{ .Title }}

diff --git a/layouts/booking/list.html b/layouts/booking/list.html index ff36da57..15cc1594 100644 --- a/layouts/booking/list.html +++ b/layouts/booking/list.html @@ -1,18 +1,20 @@ {{ define "main" }} -
-
-

{{ T "booking.title" }}

+
+

{{ T "booking.title" }}

{{ .Content }} - {{ range .Pages }} - -
-

{{ .Title }}

-
- {{ .Summary | plainify | truncate 100 }} -
-
- - {{ end }} -
+
{{ end }} diff --git a/layouts/booking/single.html b/layouts/booking/single.html index b0c83c90..b26c6183 100644 --- a/layouts/booking/single.html +++ b/layouts/booking/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+

{{ .Title }}

diff --git a/layouts/country/list.html b/layouts/country/list.html index 24c4f17d..fae0050b 100644 --- a/layouts/country/list.html +++ b/layouts/country/list.html @@ -1,10 +1,10 @@ {{ define "main" }} -
-
-

{{ .Title }}

- {{ .Content }} + {{ end }} diff --git a/layouts/country/single.html b/layouts/country/single.html index 8a8d3ebf..ce441f9a 100644 --- a/layouts/country/single.html +++ b/layouts/country/single.html @@ -1,7 +1,7 @@ {{ define "main" }} {{ $related := .Site.RegularPages.RelatedIndices . "country" }} -
+
{{ partial "sidemenu" . }}
diff --git a/layouts/news/list.html b/layouts/news/list.html index 7c3fe0e0..fd4b8644 100644 --- a/layouts/news/list.html +++ b/layouts/news/list.html @@ -1,9 +1,9 @@ {{ define "main" }} -
-
+
+

{{ .Title }}

{{ .Content }} -
+
{{ range .Pages }} {{ partial "teaser" (dict "listview" "true" "page" .) }} {{ end }} diff --git a/layouts/news/single.html b/layouts/news/single.html index 50039e36..62ebbee1 100644 --- a/layouts/news/single.html +++ b/layouts/news/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+