From fba793d221738b78cb9d27ece66cbd361302f0c5 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 12 Jun 2025 20:22:37 +0200 Subject: [PATCH 01/11] feat: Use line-clamp instead of character truncation A line-clamp is more flexible for different device types and always clamps to three lines. This makes better use of the available space. --- assets/sass/teaser.scss | 8 ++++++++ layouts/_default/rss.xml | 2 +- layouts/partials/strip-material-icons.html | 1 + layouts/partials/teaser.html | 2 +- 4 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 layouts/partials/strip-material-icons.html diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index 55a0d65e..1dd2db55 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -82,3 +82,11 @@ .m-teaser__content { padding: .8rem; } + +.m-teaser__text { + line-clamp: 3; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} diff --git a/layouts/_default/rss.xml b/layouts/_default/rss.xml index bf0ae9c1..092bdbb3 100644 --- a/layouts/_default/rss.xml +++ b/layouts/_default/rss.xml @@ -11,7 +11,7 @@ {{ .Title }} {{ .Permalink }} - {{ $cleanedHTML := .Summary | replaceRE `]*class="material-symbols-rounded"[^>]*>.*?` "" | transform.XMLEscape | safeHTML}} + {{ $cleanedHTML := partial "strip-material-icons" .Summary | transform.XMLEscape | safeHTML}} {{ $cleanedHTML }} {{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }} diff --git a/layouts/partials/strip-material-icons.html b/layouts/partials/strip-material-icons.html new file mode 100644 index 00000000..44593729 --- /dev/null +++ b/layouts/partials/strip-material-icons.html @@ -0,0 +1 @@ +{{ return replaceRE `]*class="[^"]*\bmaterial-symbols-rounded\b[^"]*"[^>]*>.*?` "" . }} diff --git a/layouts/partials/teaser.html b/layouts/partials/teaser.html index 46b7e864..feee86be 100644 --- a/layouts/partials/teaser.html +++ b/layouts/partials/teaser.html @@ -22,7 +22,7 @@

{{ $page.Title }}

- {{ $page.Summary | plainify | truncate 100 }} + {{ partial "strip-material-icons" $page.Summary | plainify | truncate 200 }}
From a5df44cc0e6f9e81fe7d0464660fea7e7130c6d8 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 12 Jun 2025 20:24:13 +0200 Subject: [PATCH 02/11] feat: Increase padding of news teaser --- assets/sass/teaser.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index 1dd2db55..44a58c22 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -80,7 +80,7 @@ } .m-teaser__content { - padding: .8rem; + padding: 1.4rem; } .m-teaser__text { From 06ca57a8a651b866e002fbf17c322316558371ca Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 12 Jun 2025 20:42:13 +0200 Subject: [PATCH 03/11] feat: Improve layout of teaser shortcuts --- assets/sass/teaser.scss | 23 ++++++++++++++--------- content/operator/_index.de.md | 2 +- content/operator/_index.en.md | 2 +- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index 44a58c22..a3fddbdc 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -20,11 +20,6 @@ .m-teaser--listview .m-teaser__wrapper { margin-bottom: 2.4rem; - flex-direction: row; - - @media (max-width: #{$breakpoint-md}) { - flex-direction: column; - } .m-teaser__image { @media (min-width: #{$breakpoint-md}) { @@ -46,8 +41,7 @@ .m-teaser__wrapper { width: 100%; height: 12rem; - padding: .8rem; - flex-direction: row; + padding: 1.4rem; justify-content: space-between; span { @@ -59,10 +53,21 @@ 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; + + &:hover, + &:focus { + background: var(--link-hovered); + border-color: var(--link-hovered); + color: #fff; + } } } 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." --- From 9b593ae83b83646846acfa33638af48107de5c1d Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 12 Jun 2025 20:50:01 +0200 Subject: [PATCH 04/11] feat: Remove image and reduce fontsize on mobile --- assets/sass/styles.scss | 12 ++++++++++++ layouts/_default/home.html | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index c77af8c6..9341c95c 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -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/layouts/_default/home.html b/layouts/_default/home.html index 7b3b25d0..b3855da8 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -5,9 +5,9 @@

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

{{ .Content }}
-
+
{{ $image := resources.Get "images/startpage.webp" }} - {{ partial "image.html" (dict "image" $image "eager" true) }} + {{ partial "image" (dict "image" $image "eager" true) }}
From fdc63b704a961b3efd20d43f4711f179c73bf502 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 12 Jun 2025 20:55:48 +0200 Subject: [PATCH 05/11] refactor: Remove padding next to logo properly --- assets/sass/navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index f191a26d..31a7d8bd 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; @@ -58,7 +59,6 @@ display: flex; margin: .6rem; position: relative; - left: -1.6rem; text-decoration: none; border-radius: var(--border-radius-m); From 54715fba6b4be944b4b75ee67ac2e2cea6cb3c66 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 12 Jun 2025 22:07:03 +0200 Subject: [PATCH 06/11] feat: Rework news list layout --- assets/sass/teaser.scss | 23 +++++++++++++---------- layouts/news/list.html | 2 +- layouts/partials/teaser.html | 2 +- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index a3fddbdc..ed695ad5 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -20,19 +20,20 @@ .m-teaser--listview .m-teaser__wrapper { margin-bottom: 2.4rem; + display: grid; + grid-template-columns: 1fr 2fr; - .m-teaser__image { - @media (min-width: #{$breakpoint-md}) { - max-width: 33%; - } + @media (max-width: #{$breakpoint-md}) { + display: flex; + flex-direction: column; + } - 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%; } } } @@ -74,6 +75,8 @@ .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 { diff --git a/layouts/news/list.html b/layouts/news/list.html index 1c926e59..7c3fe0e0 100644 --- a/layouts/news/list.html +++ b/layouts/news/list.html @@ -5,7 +5,7 @@

{{ .Title }}

{{ .Content }}
{{ range .Pages }} - {{ partial "teaser.html" (dict "listview" "true" "page" .) }} + {{ partial "teaser" (dict "listview" "true" "page" .) }} {{ end }}
diff --git a/layouts/partials/teaser.html b/layouts/partials/teaser.html index feee86be..551714d1 100644 --- a/layouts/partials/teaser.html +++ b/layouts/partials/teaser.html @@ -22,7 +22,7 @@

{{ $page.Title }}

- {{ partial "strip-material-icons" $page.Summary | plainify | truncate 200 }} + {{ partial "strip-material-icons" $page.Summary | plainify | truncate 500 }}
From 919d76690ab5b33ca563ccec4eb1124bcdea3f75 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Thu, 12 Jun 2025 22:13:41 +0200 Subject: [PATCH 07/11] fix: Remove horizontal margin of logo --- assets/sass/navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 31a7d8bd..909d2c77 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -57,7 +57,7 @@ .o-header__logo { display: flex; - margin: .6rem; + margin: .6rem 0; position: relative; text-decoration: none; border-radius: var(--border-radius-m); From cd6ea1fe940f2984e338770447d705162f426fc0 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 16 Jun 2025 22:09:34 +0200 Subject: [PATCH 08/11] fix: Slightly change margin to an even value --- assets/sass/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 9341c95c..4cab4ad8 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -196,7 +196,7 @@ img { } .o-startpage .row { - margin-bottom: 3.2rem; + margin-bottom: 2.4rem; } .o-startpage__intro { From 8512b59f7b7737eae25297246f28af69a50ea290 Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Mon, 16 Jun 2025 22:12:33 +0200 Subject: [PATCH 09/11] fix: Remove HTML suffix from all partial calls --- layouts/_default/baseof.html | 2 +- layouts/partials/head.html | 6 +++--- layouts/partials/header.html | 2 +- layouts/partials/sidemenu.html | 2 +- layouts/partials/toc.html | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) 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" . }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 19fbaf90..3c9f8d63 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,9 +1,9 @@ -{{ partial "headMeta.html" . }} +{{ partial "headMeta" . }} {{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }} -{{ partialCached "head/js.html" . }} +{{ partialCached "head/js" . }} {{ $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed") }} {{ with resources.Get "sass/main.scss" }} {{ $style := (resources.ExecuteAsTemplate "sass/main_templated.scss" $ .) | toCSS $options | minify }} @@ -43,4 +43,4 @@ {{- end -}} -{{ partial "structuredData.html" . }} +{{ partial "structuredData" . }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 8995308a..fef7af1d 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1 +1 @@ -{{ partial "menu.html" (dict "menuID" "main" "page" .) }} +{{ partial "menu" (dict "menuID" "main" "page" .) }} diff --git a/layouts/partials/sidemenu.html b/layouts/partials/sidemenu.html index 2f5d9b49..1ba76371 100644 --- a/layouts/partials/sidemenu.html +++ b/layouts/partials/sidemenu.html @@ -20,7 +20,7 @@ {{ end }}

{{ .Title }}

- {{ partial "toc.html" (dict "context" . "startLevel" 2 "endLevel" 3 ) }} + {{ partial "toc" (dict "context" . "startLevel" 2 "endLevel" 3 ) }} {{ if eq .Page.Type "country" }} {{ partial "related" (dict "index" "country" "pageType" "operator" "title" (T "_operator__list_title") "page" . "identifier" "operators") }} diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html index 49dc7388..5b0972ad 100644 --- a/layouts/partials/toc.html +++ b/layouts/partials/toc.html @@ -64,7 +64,7 @@ @returns {template.HTML} -@example {{ partial "toc.html" (dict "context" . "startLevel" 2 "endLevel" 3 ) }} +@example {{ partial "toc" (dict "context" . "startLevel" 2 "endLevel" 3 ) }} */}} {{- /* Initialize. */}} From 04edae821fbe5e49c3e6be5625d868031a4729ea Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Fri, 20 Jun 2025 20:07:30 +0200 Subject: [PATCH 10/11] fix: Use consistent design for shortcut tiles and teasers --- assets/sass/styles.scss | 2 +- assets/sass/teaser.scss | 30 ++++++++++++++++------------- layouts/partials/shortcut-tile.html | 2 +- layouts/partials/teaser.html | 17 ++++++++-------- 4 files changed, 27 insertions(+), 24 deletions(-) diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 4cab4ad8..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; diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index ed695ad5..1ccace27 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,6 +16,20 @@ 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 { @@ -44,12 +58,6 @@ height: 12rem; padding: 1.4rem; justify-content: space-between; - - span { - align-self: flex-end; - font-size: 2.4rem; - margin-left: .8rem; - } } a { @@ -63,12 +71,6 @@ transition: background 0.2s, color 0.2s; - &:hover, - &:focus { - background: var(--link-hovered); - border-color: var(--link-hovered); - color: #fff; - } } } @@ -81,6 +83,7 @@ .m-teaser__dateline { font-size: 1.4rem; + color: var(--link-special); } .m-teaser__headline { @@ -97,4 +100,5 @@ -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; + color: var(--link-special); } diff --git a/layouts/partials/shortcut-tile.html b/layouts/partials/shortcut-tile.html index edeb6cb0..006e6464 100644 --- a/layouts/partials/shortcut-tile.html +++ b/layouts/partials/shortcut-tile.html @@ -1,6 +1,6 @@
-

{{ .Title }}

+

{{ .Title }}

{{- partial "icon" "arrow_forward" -}}
diff --git a/layouts/partials/teaser.html b/layouts/partials/teaser.html index 551714d1..14746c6e 100644 --- a/layouts/partials/teaser.html +++ b/layouts/partials/teaser.html @@ -4,7 +4,7 @@ {{ $dateMachine := $page.Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ $dateHuman := $page.Date | time.Format ":date_long" }}
-
+ {{ $image := (partial "helper/contentImage" $page ) }} {{ if $image }}
@@ -13,17 +13,16 @@
- - {{ if $listview }} -

{{ $page.Title }}

- {{ else }} -

{{ $page.Title }}

- {{ end }} - + {{ if $listview }} +

{{ $page.Title }}

+ {{ else }} +

{{ $page.Title }}

+ {{ end }}
{{ partial "strip-material-icons" $page.Summary | plainify | truncate 500 }}
+ {{- partial "icon" "arrow_forward" -}}
-
+
From e8fd1c30b9b9a1fbab7cbb855865ff72c42ba2ae Mon Sep 17 00:00:00 2001 From: MoritzWeber Date: Fri, 20 Jun 2025 20:22:03 +0200 Subject: [PATCH 11/11] feat: Equally allocate space/gap in teasers --- assets/sass/teaser.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index 1ccace27..d4589b35 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -92,6 +92,9 @@ .m-teaser__content { padding: 1.4rem; + display: flex; + flex-direction: column; + justify-content: space-between; } .m-teaser__text {