Blog cards: thumbnail beside the summary, and bust the CSS cache

The reported symptom — enormous images and arrows, no card framing — was
the blog CSS not applying at all. styles.css is served with max-age=14400
and was linked without a version, so browsers held the pre-blog stylesheet
against the new markup and fell back to intrinsic sizes. Link it as
styles.css?v=3 on all three pages so the rules actually arrive.

Rework the card as a horizontal media object: a 236px thumbnail on the
left, summary on the right, in a single 900px column so lines stay a
readable length. The thumbnail fills its column via absolute inset, so it
tracks the card height the text sets. Below 940px it narrows to 190px;
below 560px it stacks with the image on top. The post hero is capped at
340px so a wide screenshot no longer pushes the headline off-screen.

Also make that failure mode survivable rather than catastrophic: inline
icons and images now carry width/height, so missing CSS yields a plain
page instead of full-bleed screenshots and 300px arrows. Image dimensions
double as aspect-ratio hints, removing load-time layout shift.

build.py now matches the stylesheet link by pattern — the exact-string
replace would have silently skipped inlining and emitted an unstyled
bundle the moment a version query appeared.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: ten9876

404.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Signal lost — AetherSDR</title>
   <link rel="icon" type="image/png" href="/assets/img/logo-96.png" />
-  <link rel="stylesheet" href="/styles.css" />
+  <link rel="stylesheet" href="/styles.css?v=3" />
   <style>
     .nf { min-height: 78vh; display: grid; place-items: center; text-align: center; }
     .nf-inner { max-width: 30rem; padding: 0 24px; }

blog.html

@@ -28,7 +28,7 @@
 
   <link rel="icon" type="image/png" href="assets/img/logo-96.png" />
   <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png" />
-  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="styles.css?v=3" />
 
   <!-- Without JS there's nothing to route, so show every post stacked under
        the index rather than a grid of cards that go nowhere. -->
@@ -58,19 +58,19 @@
         <div class="nav-item">
           <button class="nav-dd-toggle" type="button" aria-haspopup="true">
             Support
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
           </button>
           <div class="nav-dd" role="menu">
             <a role="menuitem" href="https://lu5dx.github.io/AetherSDRDocsEnglish/latest/" target="_blank" rel="noopener">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M4 5a2 2 0 0 1 2-2h9l5 5v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/><path d="M8 10h8M8 14h8"/></svg>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M4 5a2 2 0 0 1 2-2h9l5 5v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/><path d="M8 10h8M8 14h8"/></svg>
               User Manual
             </a>
             <a role="menuitem" href="https://www.youtube.com/@AetherSDR" target="_blank" rel="noopener">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9l5 3-5 3z"/></svg>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9l5 3-5 3z"/></svg>
               Video tutorials
             </a>
             <a role="menuitem" href="https://github.com/aethersdr/AetherSDR/issues/new/choose" target="_blank" rel="noopener">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg>
               File an issue on GitHub
             </a>
           </div>
@@ -102,7 +102,7 @@ <h2>The AetherSDR blog</h2>
 
           <a class="blog-card" href="#gpu-multislice">
             <div class="blog-card-media">
-              <img src="assets/img/pan-multislice.jpg" alt="Multiple AetherSDR panadapter slices rendering simultaneously on the 20m band" loading="lazy" />
+              <img width="1400" height="1098" src="assets/img/pan-multislice.jpg" alt="Multiple AetherSDR panadapter slices rendering simultaneously on the 20m band" loading="lazy" />
             </div>
             <div class="blog-card-body">
               <span class="blog-meta">
@@ -116,14 +116,14 @@ <h3>Every slice, rendered at once</h3>
                 removed that tradeoff — here's what changed in the render pipeline, and what
                 a real multislice 20m capture looks like at 60 fps.</p>
               <span class="blog-more">Read post
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m0 0-5-5m5 5-5 5"/></svg>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m0 0-5-5m5 5-5 5"/></svg>
               </span>
             </div>
           </a>
 
           <a class="blog-card" href="#signal-chain">
             <div class="blog-card-media">
-              <img src="assets/img/aetherial-strip.jpg" alt="The Aetherial signal-chain strip in AetherSDR, showing the processing stages end to end" loading="lazy" />
+              <img width="1400" height="926" src="assets/img/aetherial-strip.jpg" alt="The Aetherial signal-chain strip in AetherSDR, showing the processing stages end to end" loading="lazy" />
             </div>
             <div class="blog-card-body">
               <span class="blog-meta">
@@ -137,14 +137,14 @@ <h3>Inside the Aetherial signal chain</h3>
                 what each stage does to the audio, why the order matters, and how to
                 set it up for a crowded band without over-processing yourself into mush.</p>
               <span class="blog-more">Read post
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m0 0-5-5m5 5-5 5"/></svg>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m0 0-5-5m5 5-5 5"/></svg>
               </span>
             </div>
           </a>
 
           <a class="blog-card" href="#three-platforms">
             <div class="blog-card-media">
-              <img src="assets/img/hero-3dss.jpg" alt="AetherSDR's 3D stacked-trace panadapter over the 40m band with the full control surface" loading="lazy" />
+              <img width="1640" height="830" src="assets/img/hero-3dss.jpg" alt="AetherSDR's 3D stacked-trace panadapter over the 40m band with the full control surface" loading="lazy" />
             </div>
             <div class="blog-card-body">
               <span class="blog-meta">
@@ -158,7 +158,7 @@ <h3>Native on three platforms, no compromises</h3>
                 Qt6 and C++20 codebase. Here's how the build is structured, and where
                 platform-specific code actually earns its keep.</p>
               <span class="blog-more">Read post
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m0 0-5-5m5 5-5 5"/></svg>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m0 0-5-5m5 5-5 5"/></svg>
               </span>
             </div>
           </a>
@@ -174,12 +174,12 @@ <h3>Native on three platforms, no compromises</h3>
     <article class="blog-post" data-post="gpu-multislice" tabindex="-1" aria-labelledby="h-gpu-multislice" hidden>
       <div class="wrap blog-post-wrap">
         <a class="blog-back" href="#" data-blog-back>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
           Back to blog
         </a>
 
         <figure class="blog-hero">
-          <img src="assets/img/pan-multislice.jpg" alt="Multiple AetherSDR panadapter slices rendering simultaneously on the 20m band" />
+          <img width="1400" height="1098" src="assets/img/pan-multislice.jpg" alt="Multiple AetherSDR panadapter slices rendering simultaneously on the 20m band" />
         </figure>
 
         <span class="blog-meta">
@@ -230,7 +230,7 @@ <h2>What it means at the operating position</h2>
         </div>
 
         <a class="blog-back blog-back-end" href="#" data-blog-back>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
           Back to blog
         </a>
       </div>
@@ -239,12 +239,12 @@ <h2>What it means at the operating position</h2>
     <article class="blog-post" data-post="signal-chain" tabindex="-1" aria-labelledby="h-signal-chain" hidden>
       <div class="wrap blog-post-wrap">
         <a class="blog-back" href="#" data-blog-back>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
           Back to blog
         </a>
 
         <figure class="blog-hero">
-          <img src="assets/img/aetherial-strip.jpg" alt="The Aetherial signal-chain strip in AetherSDR, showing the processing stages end to end" />
+          <img width="1400" height="926" src="assets/img/aetherial-strip.jpg" alt="The Aetherial signal-chain strip in AetherSDR, showing the processing stages end to end" />
         </figure>
 
         <span class="blog-meta">
@@ -295,7 +295,7 @@ <h2>On transmit</h2>
         </div>
 
         <a class="blog-back blog-back-end" href="#" data-blog-back>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
           Back to blog
         </a>
       </div>
@@ -304,12 +304,12 @@ <h2>On transmit</h2>
     <article class="blog-post" data-post="three-platforms" tabindex="-1" aria-labelledby="h-three-platforms" hidden>
       <div class="wrap blog-post-wrap">
         <a class="blog-back" href="#" data-blog-back>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
           Back to blog
         </a>
 
         <figure class="blog-hero">
-          <img src="assets/img/hero-3dss.jpg" alt="AetherSDR's 3D stacked-trace panadapter over the 40m band with the full control surface" />
+          <img width="1640" height="830" src="assets/img/hero-3dss.jpg" alt="AetherSDR's 3D stacked-trace panadapter over the 40m band with the full control surface" />
         </figure>
 
         <span class="blog-meta">
@@ -357,7 +357,7 @@ <h2>Get the build for your machine</h2>
         </div>
 
         <a class="blog-back blog-back-end" href="#" data-blog-back>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></svg>
           Back to blog
         </a>
       </div>

index.html

@@ -29,7 +29,7 @@
 
   <link rel="icon" type="image/png" href="assets/img/logo-96.png" />
   <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png" />
-  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="styles.css?v=3" />
 </head>
 <body>
 

scripts/build.py

@@ -27,11 +27,16 @@ def main():
     with open(os.path.join(ROOT, "styles.css"), encoding="utf-8") as f:
         css = f.read()
 
-    # Inline the stylesheet.
-    html = html.replace(
-        '<link rel="stylesheet" href="styles.css" />',
-        f"<style>\n{css}\n</style>",
+    # Inline the stylesheet. Matched by pattern rather than exact string so a
+    # cache-busting query (styles.css?v=3) doesn't silently skip the inlining
+    # and produce an unstyled bundle.
+    html, n = re.subn(
+        r'<link rel="stylesheet" href="styles\.css[^"]*"\s*/?>',
+        lambda _m: f"<style>\n{css}\n</style>",
+        html,
     )
+    if n != 1:
+        raise SystemExit(f"expected 1 stylesheet link to inline, found {n}")
 
     # Inline JS as a real <script> before the asset pass — data-URI-ing a
     # script src would break execution in the single-file bundle.

styles.css

@@ -549,9 +549,13 @@ footer.foot { border-top: 1px solid var(--line); margin-top: 30px; padding: 46px
 .nav-links a.is-active { color: var(--cyan); }
 
 .blog-index { padding-top: 76px; }
-.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
+/* One column of wide cards: thumbnail left, summary right. Capped well under
+   the page width so summary lines stay a comfortable reading length. */
+.blog-grid { display: grid; gap: 18px; max-width: 900px; margin: 0 auto; }
 .blog-card {
-  display: flex; flex-direction: column;
+  display: grid;
+  grid-template-columns: 236px 1fr;
+  min-height: 176px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background: var(--bg-1);
@@ -563,13 +567,16 @@ footer.foot { border-top: 1px solid var(--line); margin-top: 30px; padding: 46px
   transform: translateY(-3px);
   box-shadow: var(--shadow);
 }
-.blog-card-media { display: block; aspect-ratio: 16 / 9; background: var(--bg-2); overflow: hidden; }
+/* Absolute fill so the thumbnail matches the card's height — set by the text —
+   without stretching, whatever the source image's aspect ratio is. */
+.blog-card-media { position: relative; background: var(--bg-2); overflow: hidden; }
 .blog-card-media img {
+  position: absolute; inset: 0;
   width: 100%; height: 100%; object-fit: cover; display: block;
   transition: transform .35s ease;
 }
 .blog-card:hover .blog-card-media img { transform: scale(1.035); }
-.blog-card-body { display: block; padding: 20px 21px 22px; }
+.blog-card-body { display: block; padding: 20px 24px 22px; align-self: center; }
 .blog-card-body h3 { font-size: 18px; margin: 9px 0 8px; line-height: 1.3; }
 .blog-card-body p {
   margin: 0; color: var(--muted); font-size: 14px; line-height: 1.62;
@@ -610,7 +617,8 @@ footer.foot { border-top: 1px solid var(--line); margin-top: 30px; padding: 46px
   overflow: hidden;
   box-shadow: var(--shadow);
 }
-.blog-hero img { width: 100%; display: block; }
+/* Capped so a wide screenshot doesn't push the headline below the fold. */
+.blog-hero img { width: 100%; max-height: 340px; object-fit: cover; display: block; }
 .blog-post h1 {
   font-size: clamp(30px, 4.4vw, 44px);
   line-height: 1.14; letter-spacing: -0.02em;
@@ -644,7 +652,7 @@ footer.foot { border-top: 1px solid var(--line); margin-top: 30px; padding: 46px
 
 /* ---------- Responsive ---------- */
 @media (max-width: 940px) {
-  .blog-grid { grid-template-columns: repeat(2, 1fr); }
+  .blog-card { grid-template-columns: 190px 1fr; min-height: 158px; }
   .blog-index { padding-top: 46px; }
   .blog-post { padding-top: 36px; }
   .feature-grid, .dl-grid { grid-template-columns: repeat(2, 1fr); }
@@ -661,7 +669,11 @@ footer.foot { border-top: 1px solid var(--line); margin-top: 30px; padding: 46px
   .nav-links > :not(.nav-blog) { display: none; }
 }
 @media (max-width: 560px) {
-  .feature-grid, .dl-grid, .partners-grid, .blog-grid { grid-template-columns: 1fr; }
+  .feature-grid, .dl-grid, .partners-grid { grid-template-columns: 1fr; }
+  /* Too narrow to sit side by side — stack, with the image on top. */
+  .blog-card { grid-template-columns: 1fr; min-height: 0; }
+  .blog-card-media { height: 170px; }
+  .blog-hero img { max-height: 220px; }
   .built-grid { grid-template-columns: 1fr 1fr; }
   .foot-grid { grid-template-columns: 1fr; }
   .hero { padding-top: 62px; }