mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
a729b1707f
Two changes in one pass — site polish + skill expansion. SITE: Worked-examples rail's first card now aligns with the section header on initial paint. Was: rail used `padding-inline: var(--page-gutter)` (~20 px), so Tide started flush against the viewport's left gutter — out of column with the "02 / EXAMPLES" label and "Worked examples." title above it. Now uses `padding-inline: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2 + var(--page-gutter)))` so the first card's left edge matches the page-content edge. As the user scrolls horizontally, cards traverse the full bleed (right edge unchanged — still extends to viewport). Trailing `::after` spacer also uses the new `--rail-edge` so the last card snaps to matching content edge. SKILL: Added N10 Floating-on-scroll morph to the nav archetype catalogue plus a dedicated `references/floating-nav.md` recipe. The pattern: one DOM with two layers — `.nav` (outer) owns the default bar visuals, `.nav__inner` (inner) owns the floating pill visuals — cross-faded on a single `.is-floating` class toggle past a scroll threshold. Documents the four laws Hallmark refuses to break: 1. Total nav height stays constant (compensate inner shrink with outer padding-block math), or content below jitters. 2. Visible offset uses `transform: translateY()`, never margin or padding (those trigger layout and break Law 1). 3. Cross-fade ownership of every shared visual property (background, border, backdrop-filter, box-shadow). Forget one and you get ghost effects. 4. Single timing curve across every transitioning property — `cubic-bezier(0.16, 1, 0.3, 1)` at ~520 ms. Eight curves reads as eight animations. Plus the property morph table (10 properties, one curve), the scroll-handler script with passive listener + rAF throttle + boolean-flip guard, and an 8-item slop list (the AI-default mistakes Hallmark must not emit). N10's cookbook entry links to floating-nav.md and stays brief — the deep recipe lives in one focused reference file (~80 lines). Skill grew by ~95 lines; one new file, one updated entry. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>