fix: Add aspect ratios for logo, operator logos and country flags (#252)

Author: MoritzWeber0

assets/sass/navigation.scss

@@ -64,6 +64,7 @@
     height: 4.4rem;
     padding: .2rem .4rem;
     align-self: center;
+    aspect-ratio: 696 / 200;
   }
 }
 

assets/sass/styles.scss

@@ -205,18 +205,13 @@ img {
     h1 {
       margin-bottom: 0;
     }
-
-    img {
-      max-height: 3.6rem;
-      width: auto;
-      border-radius: var(--border-radius-m);
-    }
   }
 
   &__content-header-title {
     display: flex;
     align-items: center;
     gap: 1.5rem;
+    font-size: 3rem;
   }
 
   &__news-image {
@@ -244,8 +239,9 @@ img {
 }
 
 .a-flag {
-  height: 2rem;
+  height: 1.3em;
   width: auto;
+  aspect-ratio: 1 / 1;
 }
 
 button:not(:disabled) {
@@ -262,3 +258,10 @@ hr {
 details > summary {
   cursor: pointer;
 }
+
+.a-operator-logo {
+  height: 1.3em;
+  width: auto;
+  aspect-ratio: 120 / 50;
+  border-radius: var(--border-radius-m)
+}

layouts/country/list.html

@@ -6,8 +6,7 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
       {{ range .Pages }}
       <a href="{{ .RelPermalink }}" class="o-list__link">
         <div class="o-list__picture">
-          {{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
-          {{ partial "flag" $object }}
+          {{ partial "flag" (dict "country" .File.ContentBaseName) }}
         </div>
         <div>
           {{ .Title }}

layouts/country/single.html

@@ -7,9 +7,7 @@
         <div class="o-single__container content_with_heading">
             <div class="o-single__content-header">
                 <div class="o-single__content-header-title">
-                    {{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
-                    {{ $image := resources.Get (printf "images/flags/%s.webp" $object) }}
-                    <img data-pagefind-meta="image[src]" src="{{ $image.RelPermalink }}" alt="" />
+                    {{ partial "flag" (dict "country" .File.ContentBaseName "pagefind" true) }}
                     <h1 data-pagefind-meta="title">{{ .Title }}</h1>
                 </div>
                 {{ partial "updateDate.html" . }}

layouts/operator/list.html

@@ -6,8 +6,7 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
     {{ range .Pages }}
     <a href="{{ .RelPermalink }}" class="o-list__link">
       <div class="o-list__picture">
-        {{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
-        {{ partial "logo" $object }}
+        {{ partial "logo" (dict "operator" .File.ContentBaseName) }}
       </div>
       <div>
         {{ .Title }}

layouts/operator/single.html

@@ -5,11 +5,7 @@
             <div class="o-single__container content_with_heading">
                 <div class="o-single__content-header">
                     <div class="o-single__content-header-title">
-                        {{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
-                        {{ $logo := resources.Get (printf "images/logos/%s.svg" $object) }}
-                        {{ if $logo }}
-                            <img data-pagefind-meta="image[src]" src="{{ $logo.RelPermalink }}" alt="" />
-                        {{ end }}
+                        {{ partial "logo" (dict "operator" .File.ContentBaseName "pagefind" true)}}
                         <h1 data-pagefind-meta="title">{{ .Title }}</h1>
                     </div>
                     {{ partial "updateDate.html" . }}

layouts/partials/flag.html

@@ -1,2 +1,2 @@
-{{ $image := resources.Get (printf "images/flags/%s.webp" .) }}
-<img class="a-flag" src="{{ $image.RelPermalink }}" alt="" />
+{{ $image := resources.Get (printf "images/flags/%s.webp" .country) }}
+<img class="a-flag" src="{{ $image.RelPermalink }}" alt="" {{ if .pagefind }}data-pagefind-meta="image[src]"{{ end }} />

layouts/partials/logo.html

@@ -1,4 +1,4 @@
-{{ $logo := resources.Get (printf "/images/logos/%s.svg" .) }}
+{{ $logo := resources.Get (printf "/images/logos/%s.svg" .operator) }}
 {{ if $logo }}
-<img src="{{ $logo.RelPermalink }}" alt="" style="height: 1.3em; width: auto" />
+<img src="{{ $logo.RelPermalink }}" alt="" class="a-operator-logo" {{ if .pagefind }}data-pagefind-meta="image[src]"{{ end }} />
 {{ end }}

layouts/partials/related.html

@@ -4,15 +4,14 @@
 <h3 id="o-related__title-{{ .identifier }}">{{ .title }}</h3>
 <ul class="o-related__list" aria-labelledby="o-related__title-{{ .identifier }}">
 {{ range $related }}
-    {{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
     <li class="o-related__item">
         {{ $text := .LinkTitle }}
         {{ if eq .Page.Type "news" }}
             {{ $text = print (partial "icon" "newspaper") $text }}
         {{ else if eq .Page.Type "operator" }}
-            {{ $text = print (partial "logo" $object) $text }}
+            {{ $text = print (partial "logo" (dict "operator" .File.ContentBaseName)) $text }}
         {{ else if eq .Page.Type "country" }}
-            {{ $text = print (partial "flag" $object) $text }}
+            {{ $text = print (partial "flag" (dict "country" .File.ContentBaseName)) $text }}
         {{ end }}
 
         {{ partial "internal_link" (

layouts/partials/sidemenu.html

@@ -9,8 +9,7 @@
                     <li>
                         <a href="{{ .RelPermalink }}" aria-label="{{ print (T "navigate-to-country") " " .LinkTitle }}">
                             {{ partial "icon" "arrow_back" }}
-                            {{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
-                            <span class="o-aside__backlink-text">{{ partial "flag" $object }} {{ .LinkTitle }}</span>
+                            <span class="o-aside__backlink-text">{{ partial "flag" (dict "country" .File.ContentBaseName) }} {{ .LinkTitle }}</span>
                         </a>
                     </li>
                     {{ end }}