diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index f191a26d..909d2c77 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -14,6 +14,7 @@ .o-header__wrapper { display: flex; justify-content: space-between; + padding: 0; @media (min-width: #{$breakpoint-md}) { justify-content: unset; @@ -56,9 +57,8 @@ .o-header__logo { display: flex; - margin: .6rem; + margin: .6rem 0; position: relative; - left: -1.6rem; text-decoration: none; border-radius: var(--border-radius-m); diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index c77af8c6..f2a88cf5 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -9,7 +9,7 @@ body { overflow-x: hidden; } -a:not(.m-teaser) { +a { color: var(--link-default); transition: all 0.3s ease; text-underline-offset: .2rem; @@ -196,7 +196,7 @@ img { } .o-startpage .row { - margin-bottom: 3.2rem; + margin-bottom: 2.4rem; } .o-startpage__intro { @@ -212,4 +212,16 @@ img { > div { align-content: center; } + + @media (max-width: #{$breakpoint-md}) { + h2 { + font-size: 4.8rem; + } + } +} + +.o-startpage__image { + @media (max-width: #{$breakpoint-md}) { + display: none; + } } diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index 55a0d65e..d4589b35 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -1,10 +1,10 @@ .m-teaser { display: flex; + text-decoration: none; } .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); @@ -16,28 +16,38 @@ margin-bottom: 2rem; } } + + &:hover, + &:focus { + background: rgba($link-hovered, 0.15); + + .m-teaser__headline { + text-decoration: underline; + } + } + + .material-symbols-rounded { + font-size: 2.4rem; + margin-top: 1rem; + } } .m-teaser--listview .m-teaser__wrapper { margin-bottom: 2.4rem; - flex-direction: row; + display: grid; + grid-template-columns: 1fr 2fr; @media (max-width: #{$breakpoint-md}) { + display: flex; flex-direction: column; } - .m-teaser__image { - @media (min-width: #{$breakpoint-md}) { - max-width: 33%; - } - - img { - border-radius: var(--border-radius-l) 0 0 var(--border-radius-l); + .m-teaser__image 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%; - } + @media (max-width: #{$breakpoint-md}) { + border-radius: var(--border-radius-l) var(--border-radius-l) 0 0; + width: 100%; } } } @@ -46,33 +56,34 @@ .m-teaser__wrapper { width: 100%; height: 12rem; - padding: .8rem; - flex-direction: row; + padding: 1.4rem; justify-content: space-between; - - span { - align-self: flex-end; - font-size: 2.4rem; - margin-left: .8rem; - } } a { h3 { - text-decoration: underline; - align-self: center; + overflow-wrap: normal; + word-break: normal; + white-space: normal; + hyphens: manual; margin-bottom: 0; } + + transition: background 0.2s, color 0.2s; + } } .m-teaser__image img { aspect-ratio: 16/9; border-radius: var(--border-radius-l) var(--border-radius-l) 0 0; + object-fit: cover; + height: 100%; } .m-teaser__dateline { font-size: 1.4rem; + color: var(--link-special); } .m-teaser__headline { @@ -80,5 +91,17 @@ } .m-teaser__content { - padding: .8rem; + padding: 1.4rem; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.m-teaser__text { + line-clamp: 3; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + color: var(--link-special); } diff --git a/content/operator/_index.de.md b/content/operator/_index.de.md index bac771b8..1f7a3181 100644 --- a/content/operator/_index.de.md +++ b/content/operator/_index.de.md @@ -1,5 +1,5 @@ --- -title: "Übersicht der Betreiber mit FIP" +title: "Übersicht der Betreiber" description: "Übersicht über die Betreiber, die FIP-Vergünstigungen anbieten." --- diff --git a/content/operator/_index.en.md b/content/operator/_index.en.md index 2d8dec2a..e632c2b0 100644 --- a/content/operator/_index.en.md +++ b/content/operator/_index.en.md @@ -1,5 +1,5 @@ --- -title: "Overview of operators supporting FIP" +title: "Overview of operators" description: "Overview of the operators providing FIP benefits." --- diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index ac6338c6..968ca557 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,7 +4,7 @@ dir="{{ or site.Language.LanguageDirection `ltr` }}" >
- {{ partial "head.html" . }} + {{ partial "head" . }}