From 6b8d32a0f1df84b9cdfbc9d58dd343c3f22c33be Mon Sep 17 00:00:00 2001 From: Shayan Rais Date: Sun, 19 Apr 2026 12:48:46 +0500 Subject: [PATCH] .claude/agents/presentation-learning-journey: record legend-footer pattern Documents the color-coded definition table technique: shrink chip-cloud container to free vertical space, add 2-col grid below with matching hex term colors, 0.82rem rows, 9 items per column balancing color tiers. Co-Authored-By: Claude --- .claude/agents/presentation-learning-journey.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.claude/agents/presentation-learning-journey.md b/.claude/agents/presentation-learning-journey.md index fed24fd..e5a81fc 100644 --- a/.claude/agents/presentation-learning-journey.md +++ b/.claude/agents/presentation-learning-journey.md @@ -142,6 +142,7 @@ _Findings from previous executions are recorded here. Add new entries as bullet - **2026-04-18 single-slide insertion at position 3 (vocabulary slide "What is Claude Code?")**: inserted one slide between old slide 2 (Boris GIF) and old slide 3 (Vibe Coding vs Agentic Engineering, now slide 4). Method: sed descending renumber for data-slide="3" through data-slide="37" (35 expressions), then separate sed for TOC goToSlide targets (7→8, 13→14, 19→20, 24→25, 30→31), then sed for all banner comments, then Edit to insert the new slide div. New slide has no `data-level` — journey bar shows 0%/empty for slides 3-7 (pre-arc vocabulary slides), which is correct. Three-column layout uses inline `grid-template-columns: 1fr 1fr 1fr` grid (not `.two-col`) since no three-column class exists in the deck. Icons used: 🧠 Model (purple), 💪 Harness (blue), 🤜 Tools (green). Color-coded with existing deck border-left convention: purple=#9c27b0, blue=#2196f3, green=#4caf50. New section-divider positions after insertion: **Agents=8, Skills=14, Context=20, CLAUDE.md=25, Commands=31, Workflow=34**. TOC goToSlide targets updated to match. Total slide count: **38**. - **2026-04-18 sed-vs-Edit sequencing rule confirmed**: after the sed renumber pass, waited for each sed to fully complete before running the Edit for the new slide. Running sed and Edit in parallel on the same file causes Edit to fail with "file modified since read" — confirmed this is the safe sequencing order. +- **2026-04-19 legend-footer with color-coded terms (slide 2)**: to add a definition reference table below a large absolute-positioned chip cloud, (1) shrink the cloud container's `height` from `calc(100vh - 200px)` to `calc(100vh - 420px)` and its `min-height` from `480px` to `300px` — this frees ~220px at the bottom of the slide without changing chip positions (they are `%`-based inside the container); (2) add a two-column `display: grid; grid-template-columns: 1fr 1fr` div with a `border-top` separator immediately after the cloud's closing tag; (3) color-code each term with `term` using the same hex values as the chip backgrounds (blue `#1565c0`, purple `#7b1fa2`, green `#2e7d32`, amber `#e65100`); (4) use `font-size: 0.82rem` with `line-height: 1.4` and `gap: 5px` between rows — fits 9 rows per column without overflow at typical presentation viewport heights. Column distribution: left = 6 blue hero + first 3 purple (9 items); right = last purple + 4 green + 4 amber (9 items). This balances the color mix so neither column is mono-hued. The cloud stays visually dominant because the chips are 1.5-1.6rem and bold while legend rows are 0.82rem plain weight. - **2026-04-19 word-cloud / jargon slide pattern**: absolute-positioned chips inside a `position: relative; width: 100%; height: calc(100vh - 200px)` container produces a true sticker-wall layout with no JS required. Each chip is a `` with `position: absolute; top: N%; left: N%; transform: rotate(Xdeg)` plus pill styling (`border-radius: 24px`, `padding`, `font-weight: 600`, `white-space: nowrap`). Use `%`-based top/left so the layout scales with viewport height. Organize chips into 5 conceptual rows (top % bands: 2-8%, 17-20%, 33-37%, 50-54%, 67-70%) with 3-4 chips per row, staggering left % values so chips spread horizontally without overlapping. Keep `white-space: nowrap` on every chip — line-wrapping inside a rotated pill breaks the visual. The container's `overflow: hidden` clips any chip that accidentally runs off the right edge. Verify chip count by grepping for `box-shadow` (each chip has exactly one). The slide has no `data-level` so journey bar shows 0%/empty — correct for a pre-arc slide. Total slide count after this insertion: **39**. Section-divider positions: Agents=9, Skills=15, Context=21, CLAUDE.md=26, Commands=32, Workflow=35. TOC goToSlide targets: Agents=9, Skills=15, Context=21, CLAUDE.md=26, Commands=32. ## Critical Requirements