.claude/agents/presentation-learning-journey: record hero-tier chip hierarchy pattern
Document inline styling approach for dominant/supporting chip tiers on word-cloud slides: hero chips use 1.5-1.6rem / weight 800 / glow box-shadow; supporting chips use 0.9-1.0rem / weight 600 / plain shadow. No new CSS classes needed. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -160,5 +160,6 @@ After completing changes, report to the user:
|
||||
- Current level transitions (which slide carries which `data-level`)
|
||||
- Any tick-label or `LEVELS` map changes
|
||||
|
||||
- **2026-04-19 hero-tier chip visual hierarchy**: when a word-cloud slide needs a dominant/supporting split, introduce a hero tier by: (1) increasing font-size to ~1.5-1.6rem and font-weight to 800, (2) adding more padding (14px 28px vs 8px 16px), (3) using a stronger box-shadow with a colored glow (`0 4px 18px rgba(R,G,B,0.45), 0 0 0 2px rgba(R,G,B,0.2)` — the outer ring acts as a subtle halo), and (4) slightly increasing border-radius (28px vs 20px so the pill looks "fatter"). Supporting chips use padding 7-8px 14-16px, font-size 0.9-1.0rem, weight 600, and a plain `0 2px 6px rgba(0,0,0,0.18)` shadow. No new CSS classes are needed — all styling is inline on each `<span>`. When squinting, the hero chips should be immediately readable as headlines; supporting chips recede into background. Color rebalancing rule when switching chip tiers: confirm each chip's target tier/color before editing — "harness" and "compaction" moved from blue hero to purple supporting; "agentic engineering", "orchestration", "dumb zone" moved from their previous colors to blue hero. Position re-scatter tip: space hero chips ~15-20% apart vertically and distribute them across left/right/centre columns so no two heroes are adjacent; fill gaps between heroes with supporting chips at 8-12% vertical spacing.
|
||||
- **2026-04-19 chip-splitting pattern (slide 2 jargon cloud)**: when splitting one combined-jargon chip into two, keep the first chip at the original position (slightly smaller font/padding to fit), and place the second chip in a new "Row Nb" at a top offset ~6-8% lower and a left offset ~2-4% inward from the right edge. This creates a natural staggered sub-cluster. Color rebalancing rule: when removing amber chips and adding replacements, assign new chips to whichever colors are below the median count — target no color exceeding 5 chips. Final distribution for 17 chips: 4 blue / 4 purple / 5 green / 4 amber. The `progressive disclosure` chip was nudged 2% left (60%→58%) to avoid visual crowding with the newly inserted `prompt engineering` chip in Row 1b.
|
||||
- **2026-04-19 chip overlap check method**: after any chip insertion, mentally walk each new chip's bounding box against its neighbors — chip height is roughly `padding-top + padding-bottom + font-size * line-height` ≈ 38-46px at 0.9-1.3rem. A 6-9% vertical gap on a 480px min-height container is ~29-43px which is tight but sufficient for same-column chips with different left offsets. If left offsets are within 15% of each other, require at least 8% vertical gap.
|
||||
|
||||
Reference in New Issue
Block a user