Refactor featured image styles for entry pages to ensure consistent sizing and alignment

Author: Daniel Precioso

layouts/_default/single.html

@@ -12,6 +12,7 @@
 {{ $isProjectPage := and .IsPage (or (eq .Type "industry") (eq .Type "research")) }}
 {{ $isWideSinglePage := and .IsPage (or (eq .Type "industry") (eq .Type "research") (eq .Type "event") (eq .Type "post")) }}
 {{ $isPostPage := and .IsPage (eq .Type "post") }}
+{{ $isEntryFeaturedConstrained := $isWideSinglePage }}
 
 <div class="mx-auto flex {{ if $isWideSinglePage }}max-w-screen-2xl{{ else }}max-w-screen-xl{{ end }}">
   {{ if not $isWideSinglePage }}
@@ -153,9 +154,9 @@ <h1 class="mt-2 text-4xl font-bold tracking-tight text-center text-slate-900 dar
         {{end}}
         {{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
         {{/* Featured image */}}
-        <div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-16 mx-auto {{ if $isPostPage }}post-featured-image-wrapper{{ end }}">
+        <div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-16 mx-auto {{ if $isEntryFeaturedConstrained }}entry-featured-image-wrapper{{ end }} {{ if $isPostPage }}post-featured-image-wrapper{{ end }}">
           <div style="position: relative">
-            <img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image {{ if $isPostPage }}post-featured-image{{ end }}">
+            <img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image {{ if $isEntryFeaturedConstrained }}entry-featured-image{{ end }} {{ if $isPostPage }}post-featured-image{{ end }}">
             {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
           </div>
         </div>

layouts/partials/components/headers/navbar.html

@@ -39,7 +39,19 @@
   }
   {{ end }}
 
-  /* Post pages: keep featured images visually smaller than body content width. */
+  /* Single entry pages: keep featured images visually smaller than body content width. */
+  .page-body .entry-featured-image-wrapper {
+    text-align: center;
+  }
+
+  .page-body .entry-featured-image {
+    width: min(100%, 42rem);
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  /* Post pages use a slightly tighter cap. */
   .page-body .post-featured-image-wrapper {
     text-align: center;
   }