diff --git a/assets/images/startpage.png b/assets/images/startpage.png new file mode 100644 index 00000000..6222d00e Binary files /dev/null and b/assets/images/startpage.png differ diff --git a/assets/images/startpage.webp b/assets/images/startpage.webp deleted file mode 100644 index 8811a7d9..00000000 Binary files a/assets/images/startpage.webp and /dev/null differ diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 1c0b9493..62702257 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -7,21 +7,22 @@ body { --bs-light-rgb: 219, 224, 229; --pagefind-ui-scale: 1; --pagefind-ui-text: #000; - --link-default: #BA3D12; - --link-hovered: #8F2501; + --link-default: #4c81c1; + --link-hovered: #2e5687; --link-special: #000000; --bg-default: #FFFFFF; - --bg-neutral: #EBE9E1; - --bg-accent: #FFD900; - --bg-accent2: #DABA00; - --bg-accent3: #fff284; + --bg-neutral: #d9dff7; + --bg-accent: #d3edf8; + --bg-accent2: #ff6266; + --bg-accent3: #ff6266; --color-onDark: #FFFFFF; --color-onLight: #000000; --color-table-border: #5B5B5B; --border-radius-s: .4rem; --border-radius-m: .8rem; - --border-radius-l: 1.2rem; + --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); } diff --git a/assets/sass/fonts.scss b/assets/sass/fonts.scss index 4cca068d..e79ac5c8 100644 --- a/assets/sass/fonts.scss +++ b/assets/sass/fonts.scss @@ -58,6 +58,16 @@ unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } +/* sansita-latin-800-normal */ +@font-face { + font-family: 'Sansita'; + font-style: normal; + font-display: swap; + font-weight: 800; + src: url(@fontsource/sansita/files/sansita-latin-800-normal.woff2) format('woff2'), url(@fontsource/sansita/files/sansita-latin-800-normal.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + /* material-symbols-rounded-latin-400-normal */ @font-face { font-family: 'Material Symbols Rounded'; diff --git a/assets/sass/form.scss b/assets/sass/form.scss index eade6ab9..d3fafc39 100644 --- a/assets/sass/form.scss +++ b/assets/sass/form.scss @@ -14,7 +14,7 @@ input[type=text], input[type=email], select, textarea { width: 100%; margin-bottom: 1.6rem; - border-radius: var(--border-radius-m); + border-radius: var(--border-radius-l); border-width: .2rem; border-color: var(--color-onLight); padding: 1.2rem; @@ -29,7 +29,7 @@ background-color: var(--bg-accent); color: var(--color-onLight); border: none; - border-radius: var(--border-radius-m); + border-radius: var(--border-radius-l); transition: background-color .3s ease; font-weight: 700; diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 0fd6753a..bd44fab4 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -4,7 +4,7 @@ @import "fonts.scss"; @import "navigation.scss"; @import "sidemenu.scss"; -@import "stage.scss"; +@import "search.scss"; @import "teaser.scss"; @import "footer.scss"; @import "content.scss"; @@ -13,4 +13,4 @@ @import "form.scss"; @import "expander.scss"; @import "anchorlink.scss"; -@import "print.scss" +@import "print.scss"; diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 8bbae661..f191a26d 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -7,6 +7,8 @@ .o-header { background-color: var(--bg-default); + z-index: 5; + position: relative; } .o-header__wrapper { @@ -56,6 +58,7 @@ display: flex; margin: .6rem; position: relative; + left: -1.6rem; text-decoration: none; border-radius: var(--border-radius-m); @@ -66,7 +69,8 @@ img { height: 4.7rem; - padding: 0 .4rem + padding: 0 .4rem; + align-self: center; } } diff --git a/assets/sass/stage.scss b/assets/sass/search.scss similarity index 72% rename from assets/sass/stage.scss rename to assets/sass/search.scss index 942ff134..4e898fff 100644 --- a/assets/sass/stage.scss +++ b/assets/sass/search.scss @@ -1,42 +1,9 @@ -.o-stage > picture { - width: 100%; - max-width: 1320px; - filter: brightness(60%); - - img { - border-radius: 0 0 var(--border-radius-l) var(--border-radius-l); - } -} - -.o-stage { - display: flex; - justify-content: center; - align-items: center; -} - -.o-stage__searchfield { - position: absolute; - width: 60%; - height: 6rem; - background-color: white; - border-radius: var(--border-radius-l); -} - #search { - position: absolute; - width: 80%; - max-width: 1056px; // 1320*0.8 + width: 100%; height: 6rem; - left: 50%; - transform: translate(-50%); display: flex; z-index: 2; - @media (min-width: #{$breakpoint-md}) { - width: 60%; - max-width: 792px; // 1320*0.6 - } - .pagefind-ui__search-input, .pagefind-ui__message, .pagefind-ui__search-clear { @@ -46,6 +13,8 @@ .pagefind-ui__search-input { z-index: 3; outline: .2rem solid transparent; + border: 0; + box-shadow: var(--box-shadow); &:focus { outline: .2rem solid orange; @@ -70,6 +39,10 @@ display: none; } + .pagefind-ui__form::before { + z-index: 4; + } + .pagefind-ui__drawer { background-color: white; padding: 0 1rem 1rem 1rem; @@ -83,6 +56,7 @@ 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); + z-index: 3; } .pagefind-ui__result-link { @@ -131,10 +105,11 @@ opacity: 0; } -.curtain:has(~ .o-stage .o-stage__search:focus-within), -.curtain:has(~ .o-stage .pagefind-ui__drawer:not(.pagefind-ui__hidden)), -.curtain:has(~ article .o-aside__mobile-container2.o-aside__mobile-container--open){ - opacity: 1; - inset: 0; - position: fixed; +main:has(#search:focus-within), +main:has(.pagefind-ui__drawer:not(.pagefind-ui__hidden)) { + .curtain { + opacity: 1; + position: fixed; + inset: 0; + } } diff --git a/assets/sass/sidemenu.scss b/assets/sass/sidemenu.scss index 0a88335a..8e640201 100644 --- a/assets/sass/sidemenu.scss +++ b/assets/sass/sidemenu.scss @@ -99,3 +99,7 @@ margin-bottom: 0; } } + +.o-related__item img { + border-radius: var(--border-radius-s); +} diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index a5cc501d..2dce8cc7 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -9,11 +9,6 @@ body { overflow-x: hidden; } -header { - z-index: 4; - position: relative; -} - a:not(.m-teaser) { color: var(--link-default); transition: all 0.3s ease; @@ -34,51 +29,15 @@ a:not(.m-teaser) { } } -a:has(i) { - display: inline-flex; - align-items: center; - - > :first-child { - margin-right: .4rem; - } -} - -a.m-teaser { - .m-teaser__headline { - color: var(--link-default); - text-decoration: underline; - transition: color .3s ease; - text-underline-offset: .2rem; - } - - &:hover, - &:focus { - .m-teaser__headline { - color: var(--link-hovered); - } - } -} - //space for fixed header -main > .o-stage { - margin-top: 5.3rem; -} - -//space for fixed header -main > .container.o-single, -main > .container.o-list { +main { margin-top: 8rem; } -main > .container { - margin-top: 4rem; +.container.o-list:not(.o-list--news) { background-color: var(--bg-default); border-radius: var(--border-radius-l); padding: 2rem; - - @media (max-width: #{$breakpoint-sm}) { - margin-top: 1.6rem; - } } main > .container:is(.o-single--with-sidemenu) { @@ -98,18 +57,13 @@ main > .container:is(.o-single--with-sidemenu) { img { width: 100%; height: auto; - border-radius: var(--border-radius-m); + border-radius: var(--border-radius-l); } .o-list__picture { margin-right: 1.2rem; } -.o-list__picture--operator { - width: auto; - margin-left: 1rem; -} - .o-related__operator-wrapper > .o-related__list { display: flex; flex-wrap: wrap; @@ -138,7 +92,7 @@ img { .container { @media (max-width: #{$breakpoint-sm}) { - max-width: calc(100% - 3.6rem); + max-width: calc(100% - 3.2rem); } } @@ -152,6 +106,12 @@ img { background-color: inherit; } + &__container { + background-color: var(--bg-default); + padding: 2rem; + border-radius: var(--border-radius-l); + } + &__content { display: flex; flex-direction: column; @@ -169,41 +129,44 @@ img { display: none; } } -} -.o-single__content-header { - display: flex; - justify-content: space-between; - flex-flow: wrap; - column-gap: 2rem; - row-gap: 1rem; - margin-bottom: 1.6rem; - align-items: center; + &__content-header { + display: flex; + justify-content: space-between; + flex-flow: wrap; + column-gap: 2rem; + row-gap: 1rem; + margin-bottom: 1.6rem; + align-items: center; + + h1 { + margin-bottom: 0; + } - h1 { - margin-bottom: 0; + img { + max-height: 3.6rem; + width: auto; + border-radius: var(--border-radius-m); + } } -} -.o-single__content-header-title { - display: flex; - align-items: center; - gap: 1.5rem; -} + &__content-header-title { + display: flex; + align-items: center; + gap: 1.5rem; + } -.o-single__content-header-title img { - max-height: 3.6rem; - width: auto; -} + &__news-image { + margin-bottom: 1.6rem; -.o-single__container { - background-color: var(--bg-default); - padding: 2rem; - border-radius: var(--border-radius-l); + @media (min-width: #{$breakpoint-lg}) { + display: none; + } + } } .pagefind-highlight { - padding: 0px; + padding: 0; } .sr-only { @@ -215,3 +178,22 @@ img { height: 2rem; width: auto; } + +.o-startpage .row { + margin-bottom: 3.2rem; +} + +.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; + } +} diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index 6c462e9b..55a0d65e 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -1,6 +1,15 @@ .m-teaser { + display: flex; +} + +.m-teaser__wrapper { text-decoration: none; color: var(--link-special); + background-color: var(--color-onDark); + box-shadow: var(--box-shadow); + border-radius: var(--border-radius-l); + display: flex; + flex-direction: column; &:nth-child(-n+3) { @media (max-width: #{$breakpoint-lg}) { @@ -9,21 +18,57 @@ } } -.m-teaser--listview { +.m-teaser--listview .m-teaser__wrapper { margin-bottom: 2.4rem; - display: flex; + flex-direction: row; @media (max-width: #{$breakpoint-md}) { - flex-flow: wrap; + flex-direction: column; } - &:last-of-type { - margin-bottom: 0; + .m-teaser__image { + @media (min-width: #{$breakpoint-md}) { + max-width: 33%; + } + + img { + border-radius: var(--border-radius-l) 0 0 var(--border-radius-l); + + @media (max-width: #{$breakpoint-md}) { + border-radius: var(--border-radius-l) var(--border-radius-l) 0 0; + width: 100%; + } + } } } -.m-teaser img { +.m-teaser--shortcut-tile { + .m-teaser__wrapper { + width: 100%; + height: 12rem; + padding: .8rem; + flex-direction: row; + justify-content: space-between; + + span { + align-self: flex-end; + font-size: 2.4rem; + margin-left: .8rem; + } + } + + a { + h3 { + text-decoration: underline; + align-self: center; + margin-bottom: 0; + } + } +} + +.m-teaser__image img { aspect-ratio: 16/9; + border-radius: var(--border-radius-l) var(--border-radius-l) 0 0; } .m-teaser__dateline { @@ -33,3 +78,7 @@ .m-teaser__headline { margin-bottom: .5rem; } + +.m-teaser__content { + padding: .8rem; +} diff --git a/content/_index.de.md b/content/_index.de.md index 08440089..5fddf13e 100644 --- a/content/_index.de.md +++ b/content/_index.de.md @@ -5,12 +5,6 @@ In diesem Projekt sind Informationen und Nutzungshinweise zu FIP sowie Besonderh ## Willkommen beim FIP Guide! -Die Community-Website für alle Informationen zu FIP (internationale Fahrvergünstigungen für Eisenbahnpersonal). -In diesem Projekt sind Informationen und Nutzungshinweise zu FIP sowie Besonderheiten zu den jeweiligen beteiligten Bahngesellschaften aufgeführt. +Finde relevante Informationen und Nutzungshinweise zu FIP sowie Besonderheiten zu den jeweiligen beteiligten Bahngesellschaften. -* [Grundlegende Informationen zu FIP]({{< ref "generalinformation" >}}) -* [Übersicht der Länder]({{< ref "country" >}}) - -## Unterstütze uns -Du möchtest dein Wissen rund um FIP-Regelungen teilen? Schau auf unserem [GitHub Repository](https://github.com/fipguide/fipguide.github.io) vorbei, um Inhalte beizutragen. -Alternativ kannst du uns auch über das [Kontaktformular]({{< ref "contact" >}}) schreiben. +**Schnell. Übersichtlich. Community-basiert.** diff --git a/content/_index.en.md b/content/_index.en.md index 98db5c10..b68922bb 100644 --- a/content/_index.en.md +++ b/content/_index.en.md @@ -5,12 +5,6 @@ This project includes information and usage instructions for FIP as well as spec ## Welcome to the FIP Guide! -The community website for all information about FIP. -This project includes information and usage instructions for FIP as well as special features of the respective participating railway companies. +Find relevant information and usage instructions for FIP, as well as specifics about the participating railway companies. -* [Basic information about FIP]({{< ref "generalinformation" >}}) -* [Overview of countries]({{< ref "country" >}}) - -## Support Us -Would you like to share your knowledge about FIP regulations? Visit our [GitHub Repository](https://github.com/fipguide/fipguide.github.io) to contribute content. -Alternatively, you can also write to us via the [contact form]({{< ref "contact" >}}). +**Fast. Clear. Community-based.** diff --git a/content/_supportUs.de.md b/content/_supportUs.de.md new file mode 100644 index 00000000..1d80489a --- /dev/null +++ b/content/_supportUs.de.md @@ -0,0 +1,8 @@ +--- +title: "Unterstütze uns" +description: "Möglichkeiten, wie Nutzer:innen den FIP Guide unterstützen können." +--- + +## Unterstütze uns +Du möchtest dein Wissen rund um FIP-Regelungen teilen? Schau auf unserem [GitHub Repository](https://github.com/fipguide/fipguide.github.io) vorbei, um Inhalte beizutragen. +Alternativ kannst du uns auch über das [Kontaktformular]({{< ref "contact" >}}) schreiben. diff --git a/content/_supportUs.en.md b/content/_supportUs.en.md new file mode 100644 index 00000000..ea40e351 --- /dev/null +++ b/content/_supportUs.en.md @@ -0,0 +1,8 @@ +--- +title: "Support Us" +description: "Ways users can support the FIP Guide." +--- + +## Support Us +Would you like to share your knowledge about FIP regulations? Visit our [GitHub Repository](https://github.com/fipguide/fipguide.github.io) to contribute content. +Alternatively, you can also write to us via the [contact form]({{< ref "contact" >}}). diff --git a/content/country/_index.de.md b/content/country/_index.de.md index 4bd9fd55..62d513f9 100644 --- a/content/country/_index.de.md +++ b/content/country/_index.de.md @@ -1,6 +1,6 @@ --- -title: "Länder" -description: "Überblick über die Länder, in denen FIP-Vergünstigungen genutzt werden können." +title: "Übersicht der Länder" +description: "Übersicht über die Länder, in denen FIP-Vergünstigungen genutzt werden können." --- Momemtan sind noch nicht für alle Länder und Betreiber Informationen verfügbar. Den aktuellen Bearbeitungsstand findest du auf [GitHub](https://github.com/orgs/fipguide/projects/3). diff --git a/content/country/_index.en.md b/content/country/_index.en.md index 7b74911e..f801c21c 100644 --- a/content/country/_index.en.md +++ b/content/country/_index.en.md @@ -1,5 +1,5 @@ --- -title: "Countries" +title: "Overview of countries" description: "Overview of the countries where FIP benefits are available." --- diff --git a/content/operator/_index.de.md b/content/operator/_index.de.md index 3534279f..8db859a4 100644 --- a/content/operator/_index.de.md +++ b/content/operator/_index.de.md @@ -1,6 +1,6 @@ --- -title: "Betreiber mit FIP" -description: "Überblick über die Betreiber, die FIP-Vergünstigungen anbieten." +title: "Übersicht der Betreiber mit FIP" +description: "Übersicht über die Betreiber, die FIP-Vergünstigungen anbieten." --- Momemtan sind noch nicht für alle Länder und Betreiber Informationen verfügbar. Den aktuellen Bearbeitungsstand findest du auf [GitHub](https://github.com/orgs/fipguide/projects/3). diff --git a/content/operator/_index.en.md b/content/operator/_index.en.md index 7105e6cb..3997c4fb 100644 --- a/content/operator/_index.en.md +++ b/content/operator/_index.en.md @@ -1,5 +1,5 @@ --- -title: "Operators supporting FIP" +title: "Overview of operators supporting FIP" description: "Overview of the operators providing FIP benefits." --- diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 60dbfb80..ac6338c6 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,7 +8,7 @@