Blog: stop cropping the sides of cover images (#106)

The list thumbnails were filled to 16:9 although share covers are 1200x630
(about 1.9:1), which cut about 7% off each side. Use a 1200:630 thumbnail box
and resize the in-article hero instead of filling it to 16:9.

Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>

Author: Mazizova

assets/scss/_blog.scss

@@ -61,7 +61,8 @@
   .post-card-image {
     display: block;
     width: 100%;
-    aspect-ratio: 16 / 9;
+    // Same ratio as the 1200×630 share covers, so they are not cropped
+    aspect-ratio: 1200 / 630;
     object-fit: cover;
     transition: transform 0.3s ease;
   }

layouts/_default/list.html

@@ -17,7 +17,7 @@ <h1>{{ .Title }}</h1>
     {{ $imgRes := $page.Resources.Get . }}
     {{ if not $imgRes }}{{ $imgRes = resources.Get (strings.TrimPrefix "/" .) }}{{ end }}
     {{ with $imgRes }}
-    {{ $thumb := .Fill "680x382 jpg q85" }}
+    {{ $thumb := .Fill "680x357 jpg q85" }}
     <div class="post-card-image-wrap">
       <img src="{{ $thumb.RelPermalink }}" alt="" class="post-card-image" loading="lazy" width="{{ $thumb.Width }}" height="{{ $thumb.Height }}">
     </div>

layouts/_default/single.html

@@ -56,7 +56,7 @@ <h1>{{ .Title }}</h1>
     {{ $imgRes := $.Resources.Get . }}
     {{ if not $imgRes }}{{ $imgRes = resources.Get (strings.TrimPrefix "/" .) }}{{ end }}
     {{ with $imgRes }}
-    {{ $hero := .Fill "1400x788 jpg q85" }}
+    {{ $hero := .Resize "1400x jpg q85" }}
     <img src="{{ $hero.RelPermalink }}" alt="" class="post-hero-image" width="{{ $hero.Width }}" height="{{ $hero.Height }}">
     {{ end }}
     {{ end }}