feat: Implement enhancements for new design

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);
 

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;
+  }
 }

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,39 +56,52 @@
     .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 {
     margin-bottom: .5rem;
 }
 
 .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);
 }

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."
 ---
 

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."
 ---
 

layouts/_default/baseof.html

@@ -4,7 +4,7 @@
   dir="{{ or site.Language.LanguageDirection `ltr` }}"
 >
   <head>
-    {{ partial "head.html" . }}
+    {{ partial "head" . }}
   </head>
   <body>
     <header id="header" class="o-header">{{ partialCached "header.html" . }}</header>

layouts/_default/home.html

@@ -5,9 +5,9 @@ <h1 class="sr-only">{{ T "home-page-text" }}</h1>
     <div class="col-12 col-lg-6 order-2 order-lg-1">
       {{ .Content }}
     </div>
-    <div class="col-12 col-lg-6 order-1 order-lg-2">
+    <div class="col-12 col-lg-6 order-1 order-lg-2 o-startpage__image">
       {{ $image := resources.Get "images/startpage.webp" }}
-      {{ partial "image.html" (dict "image" $image "eager" true) }}
+      {{ partial "image" (dict "image" $image "eager" true) }}
     </div>
   </div>
   <div class="row">

layouts/_default/rss.xml

@@ -11,7 +11,7 @@
             <title>{{ .Title }}</title>
             <link>{{ .Permalink }}</link>
             <!-- Remove the icons and XML escape the summary -->
-            {{ $cleanedHTML := .Summary | replaceRE `<span[^>]*class="material-symbols-rounded"[^>]*>.*?</span>` "" | transform.XMLEscape | safeHTML}}
+            {{ $cleanedHTML := partial "strip-material-icons" .Summary | transform.XMLEscape | safeHTML}}
             <description>{{ $cleanedHTML }}</description>
             <pubDate>{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
             <enclosure url="{{ (partial "helper/contentImage" . ).Permalink }}" />

layouts/news/list.html

@@ -5,7 +5,7 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
       {{ .Content }}
       <div class="row">
         {{ range .Pages }}
-          {{ partial "teaser.html" (dict "listview" "true" "page" .) }}
+          {{ partial "teaser" (dict "listview" "true" "page" .) }}
         {{ end }}
       </div>
     </div>

layouts/partials/head.html

@@ -1,9 +1,9 @@
-{{ partial "headMeta.html" . }}
+{{ partial "headMeta" . }}
 
 <title>
   {{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}
 </title>
-{{ 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 -}}
 <link rel="alternate" hreflang="x-default" href="{{ .Site.BaseURL }}" />
 
-{{ partial "structuredData.html" . }}
+{{ partial "structuredData" . }}

layouts/partials/header.html

@@ -1 +1 @@
-{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+{{ partial "menu" (dict "menuID" "main" "page" .) }}

layouts/partials/shortcut-tile.html

@@ -1,6 +1,6 @@
 <div class="m-teaser m-teaser--shortcut-tile col-6 col-sm-4 col-lg-3 col-xl-2">
   <a href="{{ .RelPermalink }}" class="m-teaser__wrapper">
-    <h3>{{ .Title }}</h3>
+    <h3 class="m-teaser__headline">{{ .Title }}</h3>
     {{- partial "icon" "arrow_forward" -}}
   </a>
 </div>

layouts/partials/sidemenu.html

@@ -20,7 +20,7 @@
         {{ end }}
 
         <h3 id="toc">{{ .Title }}</h3>
-        {{ 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") }}

layouts/partials/strip-material-icons.html

@@ -0,0 +1 @@
+{{ return replaceRE `<span[^>]*class="[^"]*\bmaterial-symbols-rounded\b[^"]*"[^>]*>.*?</span>` "" . }}

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" }}
 <div class="m-teaser{{ if $listview }} m-teaser--listview{{ else }} col-lg-4 col-md-6{{ end }} col-12">
-  <div class="m-teaser__wrapper">
+  <a href="{{ $page.RelPermalink }}" class="m-teaser__wrapper">
     {{ $image := (partial "helper/contentImage" $page ) }}
     {{ if $image }}
     <div class="m-teaser__image">
@@ -13,17 +13,16 @@
     </div>
     <div class="m-teaser__content">
       <time class="m-teaser__dateline" datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
-      <a href="{{ $page.RelPermalink }}">
-        {{ if $listview }}
-          <h2 class="m-teaser__headline">{{ $page.Title }}</h2>
-        {{ else }}
-          <h3 class="m-teaser__headline">{{ $page.Title }}</h3>
-        {{ end }}
-      </a>
+      {{ if $listview }}
+        <h2 class="m-teaser__headline">{{ $page.Title }}</h2>
+      {{ else }}
+        <h3 class="m-teaser__headline">{{ $page.Title }}</h3>
+      {{ end }}
 
       <div class="m-teaser__text">
-        {{ $page.Summary | plainify | truncate 100 }}
+        {{ partial "strip-material-icons" $page.Summary | plainify | truncate 500 }}
       </div>
+      {{- partial "icon" "arrow_forward" -}}
     </div>
-  </div>
+  </a>
 </div>

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. */}}