From 26436a657ac4457c4360927a99b83fa327a694cf Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 8 Apr 2026 11:40:36 -0700
Subject: [PATCH] Put Before, caption, After on a single row

The demo's Before/After labels and the descriptive caption were on two
separate rows below the card. Merge them into one row: Before pinned
left, caption centered in the middle, After pinned right.

- Move the caption <p> inside .split-labels between the two label spans.
  If a skill has no caption, emit an empty <span> placeholder so the
  grid still has three cells and Before/After sit at the edges.
- Switch .split-labels from flex space-between to a 3-column grid
  (auto minmax(0,1fr) auto) with baseline alignment. Before is
  justify-self: start, After is justify-self: end, caption is
  justify-self: center.
- Reset the caption's typography inside the grid (default body font,
  not mono; text-transform: none; letter-spacing: 0) since it inherits
  the label row's monospace caps by default.
---
 public/css/sub-pages.css   | 23 ++++++++++++++++++-----
 scripts/build-sub-pages.js |  2 +-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css
index d0a300314..f5348c857 100644
--- a/public/css/sub-pages.css
+++ b/public/css/sub-pages.css
@@ -1070,10 +1070,14 @@ main#main {
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 }
 
+/* Before | caption | After all on one row. The caption lives in the
+   middle column; if a skill has no caption we emit an empty <span> so
+   the grid still has three cells and Before/After sit at the edges. */
 .split-labels {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: var(--spacing-md);
   margin-top: 10px;
   font-family: var(--font-mono);
   font-size: 0.6875rem;
@@ -1085,18 +1089,27 @@ main#main {
 
 .split-label-item[data-point="before"] {
   color: var(--color-ash);
+  justify-self: start;
 }
 
 .split-label-item[data-point="after"] {
   color: var(--color-accent);
+  justify-self: end;
 }
 
 .skill-demo-caption {
+  margin: 0;
+  font-family: var(--font-body);
   font-size: 0.8125rem;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
   color: var(--color-ash);
-  margin-top: 12px;
   font-style: italic;
-  max-width: 500px;
+  text-align: center;
+  justify-self: center;
+  /* Allow wrapping inside the middle column if the text is long. */
+  max-width: 100%;
 }
 
 .skill-demo-eyebrow {
diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js
index 5ef53f6a9..48d35ae71 100644
--- a/scripts/build-sub-pages.js
+++ b/scripts/build-sub-pages.js
@@ -52,9 +52,9 @@ function renderSkillDemo(skill) {
     </div>
     <div class="split-labels">
       <span class="split-label-item" data-point="before">Before</span>
+      ${caption ? `<p class="skill-demo-caption">${escapeHtml(caption)}</p>` : '<span></span>'}
       <span class="split-label-item" data-point="after">After</span>
     </div>
-    ${caption ? `<p class="skill-demo-caption">${escapeHtml(caption)}</p>` : ''}
   </div>
 </section>`;
 }