Tighten responsive library hero

Author: Doppp

apps/dev-preview/src/styles.css

@@ -439,7 +439,7 @@ h3 {
 
 .library-hero {
   width: 100%;
-  margin-bottom: clamp(3.5rem, 7vw, 6rem);
+  margin-bottom: clamp(2.5rem, 4vw, 4rem);
 }
 
 .library-masthead {
@@ -475,10 +475,10 @@ h3 {
 
 .library-hero-content {
   display: grid;
-  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
-  gap: clamp(2rem, 7vw, 6.5rem);
-  align-items: end;
-  padding: clamp(3rem, 7vw, 5.75rem) 0 2.25rem;
+  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
+  gap: clamp(2rem, 4vw, 4rem);
+  align-items: center;
+  padding: clamp(2.25rem, 4vw, 3.5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
 }
 
 .library-eyebrow {
@@ -487,14 +487,14 @@ h3 {
 
 .library-title {
   margin: 0;
-  max-width: 12ch;
-  font-size: clamp(2.85rem, 6vw, 4.8rem);
+  max-width: none;
+  font-size: clamp(2.85rem, 5vw, 4.5rem);
   line-height: 0.98;
-  text-wrap: balance;
+  text-wrap: pretty;
 }
 
 .library-introduction {
-  padding-left: 1.5rem;
+  padding-left: clamp(1rem, 2vw, 1.5rem);
   border-left: 1px solid var(--border-strong);
 }
 
@@ -1237,6 +1237,26 @@ pre code {
   padding: 2rem;
 }
 
+@media (max-width: 70rem) {
+  .library-hero-content {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.5rem;
+    align-items: start;
+  }
+
+  .library-title {
+    max-width: 16ch;
+  }
+
+  .library-introduction {
+    max-width: 46rem;
+    padding-top: 1.35rem;
+    padding-left: 0;
+    border-top: 1px solid var(--border-strong);
+    border-left: 0;
+  }
+}
+
 @media (max-width: 62rem) {
   .course-layout {
     display: block;
@@ -1353,13 +1373,12 @@ pre code {
   }
 
   .library-hero {
-    margin-bottom: 3.25rem;
+    margin-bottom: 2.5rem;
   }
 
   .library-hero-content {
-    grid-template-columns: minmax(0, 1fr);
     gap: 1.5rem;
-    padding: 2.5rem 0 1.75rem;
+    padding: 2.25rem 0 1.75rem;
   }
 
   .library-title {
@@ -1368,8 +1387,7 @@ pre code {
   }
 
   .library-introduction {
-    padding-left: 0;
-    border-left: 0;
+    padding-top: 1.1rem;
   }
 
   .library-section + .library-section {

docs/implementation-status.md

@@ -1,6 +1,6 @@
 # Implementation status
 
-Updated: 19 August 2026
+Updated: 20 August 2026
 
 ## Completed
 
@@ -35,6 +35,7 @@ Updated: 19 August 2026
 - Reworked the local course library and lesson shell as a quiet, editorial learning interface with accessible pastel color roles, lesson-first hierarchy, explicit navigation states, compact course contents below 992px, and visually consistent sandbox controls. The course shell now reflows at 320px without putting the full lesson list ahead of the active lesson.
 - Reframed the local collection home as a product-general, status-first course library. Available courses now lead the page, planned AI courses are subordinate roadmap content, and the visible display name is `Explorables` while lowercase technical identifiers remain stable.
 - Added an explicit, persistent light/dark theme control to the course library and lesson shell, including live theme synchronization into already-mounted sandboxed explorables. Retuned the dark pastel roles, restored the library hero and local-data notice to the full responsive content width, and corrected title casing while preserving the lowercase `explorables` wordmark.
+- Tightened the course-library hero into a compact responsive composition: wide screens use a smaller, content-filled column gutter, while Codex-sized panes stack the introduction below a two-line headline before the layout becomes squeezed. Reduced the masthead and section whitespace so the available-course section begins within the first compact-browser viewport.
 - Retained Node.js 24/pnpm 11 as the default toolchain while adding an enforced, CI-tested compatibility floor of Node.js 22.22.2 and pnpm 10.26.0.
 - Refreshed the planned `Inside DeepSeek` course through DeepSeek V4 Pro/Flash while retaining V3/R1 as lineage, and refreshed `Inside GLM` through GLM 5.2 while retaining GLM 5 as the available architecture/post-training lineage. The revised briefs add hybrid long-context attention, mHC, Muon, mixed precision and policy consolidation for DeepSeek, plus DSA/IndexShare, multi-token prediction, serving ablations, and long-horizon evaluation for GLM.
 - Recorded exact reviewed official model-artifact commits, report revisions, and code/weight licence signals for DeepSeek V4 and GLM 5.2 in the candidate source register without misrepresenting them as immutable course-local source freezes.
@@ -51,7 +52,7 @@ Updated: 19 August 2026
 
 The v0.1 runtime MVP remains verified. Course-session continuity now provides a framework-owned resume surface, lesson-level local state for persistent courses, Guided checkpoint resume and confirmed rollback, page-exit flushing, storage-failure messaging, host-neutral state attributes, shared lifecycle language, and a stable strict development origin. Model Atlas implementation, local hardening, clean-checkout verification, and pull-request CI are complete.
 
-`AI from First Principles` `0.4.0-foundations.1`, Guided Course Mode, Agent Plugins v1 packaging, and the local course-library milestone are implemented. The course UI redesign and its responsive/theme follow-up are complete. The library presents the shared frontier core and DeepSeek, Kimi, Qwen, MiniMax, and GLM specializations as planned rather than runnable. Its DeepSeek and GLM cards now reflect the V4 and 5.2 endpoints. The next implementation increment remains the shared-core source freeze and its five research/comparison lessons, followed by the pinned model-specific courses. External DNS and learner-study evidence also remain.
+`AI from First Principles` `0.4.0-foundations.1`, Guided Course Mode, Agent Plugins v1 packaging, and the local course-library milestone are implemented. The course UI redesign and its responsive/theme follow-up are complete, including compact embedded-browser hero spacing. The library presents the shared frontier core and DeepSeek, Kimi, Qwen, MiniMax, and GLM specializations as planned rather than runnable. Its DeepSeek and GLM cards now reflect the V4 and 5.2 endpoints. The next implementation increment remains the shared-core source freeze and its five research/comparison lessons, followed by the pinned model-specific courses. External DNS and learner-study evidence also remain.
 
 ## Decisions
 
@@ -71,6 +72,7 @@ The v0.1 runtime MVP remains verified. Course-session continuity now provides a
 ## Latest verification
 
 ```text
+20 Aug compact library hero          pass (16 browser tests; 320×700, 720×800, 900×700, 1100×760, and 1427×900 geometry; light/dark in-app Codex visual QA; scoped format/lint, typecheck, 33 suites/102 tests, validation, and all builds)
 19 Aug foundations + PRD v0.4     pass (clean worktree: format/lint/typecheck, 33 suites/102 tests, 17 course suites/54 tests, 14 starter/reference pairs, all builds, 16 browser tests, axe, 320px overflow check, and in-app visual QA)
 19 Aug general library redesign      pass (typecheck, 7 suites/29 targeted tests, collection validation/build, 15 browser tests, 2 site tests, axe, light/dark visual QA at 843px and 320px)
 18 Aug Model Atlas unit/integration    pass (33 suites/100 tests; strict descriptors, exact traces, comparisons, renderer lifecycle, validator, and real catalogue bundle)

tests/browser/course.spec.ts

@@ -159,8 +159,14 @@ test("follows the system theme, syncs explorables, and persists an override", as
 });
 
 test("keeps the general course library responsive", async ({ page }) => {
-  for (const width of [320, 720, 1156, 1427]) {
-    await page.setViewportSize({ width, height: 900 });
+  for (const viewport of [
+    { width: 320, height: 700 },
+    { width: 720, height: 800 },
+    { width: 900, height: 700 },
+    { width: 1100, height: 760 },
+    { width: 1427, height: 900 },
+  ]) {
+    await page.setViewportSize(viewport);
     await page.goto("/");
     await expect(page.locator("h1.library-title")).toHaveText(
       "Learn by exploring, coding, and testing.",
@@ -170,24 +176,60 @@ test("keeps the general course library responsive", async ({ page }) => {
       const hero = document.querySelector<HTMLElement>(".library-hero");
       const note = document.querySelector<HTMLElement>(".local-note");
       const title = document.querySelector<HTMLElement>(".library-title");
+      const masthead = document.querySelector<HTMLElement>(".library-masthead");
+      const eyebrow = document.querySelector<HTMLElement>(".library-eyebrow");
+      const introduction = document.querySelector<HTMLElement>(".library-introduction");
       const available = document.querySelector<HTMLElement>(".available-courses");
-      if (!library || !hero || !note || !title || !available)
+      if (
+        !library ||
+        !hero ||
+        !note ||
+        !title ||
+        !masthead ||
+        !eyebrow ||
+        !introduction ||
+        !available
+      )
         throw new Error("Expected library header elements");
+      const titleStyles = getComputedStyle(title);
+      const titleLineHeight = Number.parseFloat(titleStyles.lineHeight);
+      const titleRect = title.getBoundingClientRect();
+      const introductionRect = introduction.getBoundingClientRect();
       return {
         overflow:
           document.documentElement.scrollWidth > document.documentElement.clientWidth,
         libraryWidth: library.getBoundingClientRect().width,
         heroWidth: hero.getBoundingClientRect().width,
         noteWidth: note.getBoundingClientRect().width,
-        titleWidth: title.getBoundingClientRect().width,
+        titleWidth: titleRect.width,
         availableWidth: available.getBoundingClientRect().width,
+        mastheadToContentGap:
+          eyebrow.getBoundingClientRect().top - masthead.getBoundingClientRect().bottom,
+        heroToCoursesGap:
+          available.getBoundingClientRect().top - note.getBoundingClientRect().bottom,
+        titleLines: titleRect.height / titleLineHeight,
+        introductionTop: introductionRect.top,
+        introductionLeft: introductionRect.left,
+        titleBottom: titleRect.bottom,
+        titleLeft: titleRect.left,
+        titleRight: titleRect.right,
       };
     });
     expect(metrics.overflow).toBe(false);
     expect(Math.abs(metrics.heroWidth - metrics.libraryWidth)).toBeLessThan(1);
     expect(Math.abs(metrics.availableWidth - metrics.libraryWidth)).toBeLessThan(1);
     expect(metrics.noteWidth).toBeLessThanOrEqual(metrics.heroWidth);
     expect(metrics.titleWidth).toBeLessThanOrEqual(metrics.heroWidth);
+    expect(metrics.mastheadToContentGap).toBeLessThanOrEqual(70);
+    expect(metrics.heroToCoursesGap).toBeLessThanOrEqual(70);
+    if (viewport.width >= 720) expect(metrics.titleLines).toBeLessThanOrEqual(3.1);
+    if (viewport.width <= 1120) {
+      expect(metrics.introductionTop).toBeGreaterThan(metrics.titleBottom);
+      expect(Math.abs(metrics.introductionLeft - metrics.titleLeft)).toBeLessThan(1);
+    } else {
+      expect(metrics.introductionLeft).toBeGreaterThan(metrics.titleLeft);
+      expect(metrics.introductionLeft - metrics.titleRight).toBeLessThan(200);
+    }
   }
 });