From 9b1b709baba360ba93d8d500b83ebbbdc008addd Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 8 Apr 2026 09:56:40 -0700
Subject: [PATCH] Align sidebar to header logo, bump sidebar font, rework
 detail title

Three tightening passes based on visual feedback.

- Sidebar alignment. The skills layout now uses the same horizontal
  padding clamp as the site header, so the sidebar column's left edge
  sits under the brand logo above. Sidebar items drop their 10px left
  padding and sit flush with the column edge; the 2px active-item
  accent lives in a -2px margin so it hangs in the layout gutter
  without pushing text right. Drop the max-width constraint so the
  docs shell extends wall-to-wall on wide screens like a real docs site.

- Sidebar font. The command list was 0.8125rem which read too small
  next to the sidebar group titles. Bump to 0.875rem and tighten the
  vertical rhythm (4px vs 3px padding, group title margin-bottom 6px).

- Skill detail title. The title was set in mono at ~3rem and the
  tagline in italic display, which inverted the visual weight (the
  tagline felt heavier than the title). Rework to match the landing
  page's .spread-command-name palette styling:
    - Title: display serif, clamp(3rem, 5.5vw, 5rem), line-height 0.95
    - Leading '/' split into <span class="skill-detail-title-slash">
      and colored with --color-accent at weight 300 so it reads as a
      quiet prefix glyph
    - Tagline: body sans at 1-1.125rem, no italics, max-width 60ch
---
 public/css/sub-pages.css   | 46 +++++++++++++++++++++++++-------------
 scripts/build-sub-pages.js |  2 +-
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css
index fa01ce588..ac5019c65 100644
--- a/public/css/sub-pages.css
+++ b/public/css/sub-pages.css
@@ -319,9 +319,12 @@ main#main {
   display: grid;
   grid-template-columns: var(--skills-sidebar-width) minmax(0, 1fr);
   gap: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl));
-  max-width: var(--width-max);
-  margin: 0 auto;
-  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
+  /*
+   * Match horizontal padding to .site-header so the sidebar content lines
+   * up with the brand logo in the nav bar above. Intentionally no max-width
+   * so the docs-browser feels wall-to-wall on wide screens.
+   */
+  padding: 0 clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
   align-items: start;
 }
 
@@ -381,8 +384,8 @@ main#main {
   text-transform: uppercase;
   letter-spacing: 0.14em;
   color: var(--color-ash);
-  margin-bottom: 4px;
-  padding: 0 10px;
+  margin-bottom: 6px;
+  padding: 0;
 }
 
 .skills-sidebar-list {
@@ -397,14 +400,19 @@ main#main {
 
 .skills-sidebar-list a {
   display: block;
-  padding: 3px 10px;
+  /* No left padding: text starts at the column edge so it lines up with
+     the header logo. The 2px active accent lives 2px to the left via a
+     negative margin, sitting in the layout's horizontal padding gutter. */
+  padding: 4px 0;
+  margin-left: -2px;
+  border-left: 2px solid transparent;
+  padding-left: 2px;
   font-family: var(--font-mono);
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.5;
   color: var(--color-charcoal);
   text-decoration: none;
-  border-left: 2px solid transparent;
   transition: color var(--duration-fast) var(--ease-out),
               border-color var(--duration-fast) var(--ease-out);
 }
@@ -619,22 +627,28 @@ main#main {
 }
 
 .skill-detail-title {
-  font-family: var(--font-mono);
-  font-size: clamp(2.25rem, 5vw, 3.5rem);
+  font-family: var(--font-display);
+  font-size: clamp(3rem, 5.5vw, 5rem);
   font-weight: 600;
+  line-height: 0.95;
   letter-spacing: -0.02em;
   color: var(--color-ink);
-  margin-bottom: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+  white-space: nowrap;
+}
+
+.skill-detail-title-slash {
+  color: var(--color-accent);
+  font-weight: 300;
 }
 
 .skill-detail-tagline {
-  font-family: var(--font-display);
-  font-size: clamp(1.125rem, 2vw, 1.5rem);
-  font-style: italic;
+  font-family: var(--font-body);
+  font-size: clamp(1rem, 1.4vw, 1.125rem);
   font-weight: 400;
   color: var(--color-charcoal);
-  line-height: 1.4;
-  max-width: 58ch;
+  line-height: 1.55;
+  max-width: 60ch;
   margin-bottom: var(--spacing-md);
 }
 
diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js
index 9c4243bf5..5111b5eb0 100644
--- a/scripts/build-sub-pages.js
+++ b/scripts/build-sub-pages.js
@@ -87,7 +87,7 @@ ${refBody}
 <article class="skill-detail">
   <header class="skill-detail-header">
     <p class="skill-detail-eyebrow"><a href="/skills">Skills</a> / ${escapeHtml(categoryLabel)}</p>
-    <h1 class="skill-detail-title">/${escapeHtml(skill.id)}</h1>
+    <h1 class="skill-detail-title"><span class="skill-detail-title-slash">/</span>${escapeHtml(skill.id)}</h1>
     <p class="skill-detail-tagline">${escapeHtml(tagline)}</p>
     ${metaStrip}
   </header>