Repository navigation
Conversation
A fixed terracotta thread down the left gutter with one node per section; the fill + active node advance as you snap through the deck — an ambient progress spine and a distributed-systems/dispatch nod (a route traversed hop by hop). The 003 signature. - index.html: a .through-line .screen nav (ol of section anchor-dots + a visually-hidden aria-live status), after the top nav. It's also a bonus jump-nav. - styles.css (@media not print): fixed left-gutter rail (position:fixed → CLS 0), faint full rail + a terracotta fill (height = --tl-progress), node dots with .is-past/.is-active states, visually-hidden labels/status, hidden below md (the top nav serves mobile); transitions only under prefers-reduced-motion: no-preference (reduce → the fill/node states jump). - deck.js: initThroughLine (DOMContentLoaded-guarded, since deck.js is in <head>) — on scroll (rAF-throttled) it finds the nearest-centred panel (hero + sections) and sets --tl-progress, the node .is-past/.is-active + aria-current, and the aria-live 'Section N of M' status. On the hero no node is active yet. No-JS: a static line of anchor-dot jump links. Reduced-motion: state jumps, no tween. Screen-only; PDF unchanged (verified: make visual 8/8, pdf-visual ✓, PDF baseline untouched). Lint verified directly (deck.js standard-clean, styles.css stylelint-clean). Code-reviewed — two findings fixed (empty-nodes guard; hero shows no active node). Note: the fixed Through-Line is not captured by the fullPage visual baselines (a Playwright fullPage + position:fixed limitation) — a gate coverage gap to address with a viewport-level snapshot (harness follow-up); the signature itself is verified working (viewport shots + probe). Closes #205 Closes #206 Closes #207 Closes #208 Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
|
🔺 Vercel preview: https://cv-7yf36tyqp-bruno-valerios-projects.vercel.app commit |
brunogbv
added a commit
that referenced
this pull request
Jul 4, 2026
Ships feature 003 (interactive editorial deck: full-viewport snap sections, summary-card rails + detail overlays, editorial restyle with vendored fonts, a11y/no-JS/reduced-motion, and the Through-Line signature) plus the US2 detail-overlay interaction fix. Screen-only; PDF unchanged. Integration branch 003-deck (US1 #214, US3+US2 #217/#218, US4 #219, US5 #220, overlay fix e5e713e).
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The 003 signature: a fixed terracotta thread down the left gutter with one node per section; the
fill + active node advance as you snap through the deck — an ambient progress spine and a
distributed-systems/dispatch nod (a route traversed hop by hop). It doubles as a bonus jump-nav.
Closes #205, #206, #207, #208. This is the last of the five user stories.
How it works
index.html: a.through-line .screennav (<ol>of section anchor-dots + a visually-hiddenaria-livestatus), placed after the top nav.styles.css(@media not print): fixed left-gutter rail (position:fixed→ CLS 0), a faint fullrail + a terracotta fill (
height: calc(var(--tl-progress) * 100%)), node dots with.is-past/.is-active, visually-hidden labels/status, hidden below md (the top nav servesmobile); transitions only under
prefers-reduced-motion: no-preference.deck.js:initThroughLine(DOMContentLoaded-guarded —deck.jsis in<head>) sets--tl-progress, the active node +aria-current, and thearia-live"Section N of M" on scroll(rAF-throttled). On the hero, no node is active yet.
No-JS: a static line of anchor-dot jump links. Reduced-motion: state jumps, no tween.
Verification
make visual8/8, pdf-visual ✓, PDF baseline unchanged (screen-only).deck.jsStandard-clean,styles.cssstylelint-clean.aria-live "Section 4 of 5". Viewport screenshots confirm the spine + fill.
The fixed Through-Line is not captured by the
fullPagevisual baselines (a known PlaywrightfullPage+position:fixedlimitation) — so the signature itself isn't visual-regression-protectedyet. The feature is verified working (viewport shots + geometry/aria probe). I'll raise a
harnessissue to add a viewport-level snapshot covering the fixed chrome.
Next
With US5 merged, all five stories are on
003-deck→ then003-deck→mainships the wholeinteractive editorial deck to valerio.dev in one production deploy and closes milestone #5.
🤖 Generated with Claude Code