No description
Jonathan Hvid
7bd3997564
Replaces the 3-column grid on /pulse with a CSS scroll-snap carousel.
3 cards per view on desktop (flex 0 0 calc((100% - 2px) / 3)), one full
card with a slice of the next at 88% on mobile.
Header row: serif 22px 'On the roadmap' title on the left; right side has
the 'See the full roadmap →' section link plus two 30px round arrow
buttons. Arrows disable (opacity 0.25) when at start/end of scroll. Hidden
on mobile — touch swipe is the affordance.
Carousel-scroll has 0.5px top + bottom borders in rgba(0,0,0,0.08).
Scrollbar hidden cross-browser. Each card has a 0.5px right border (last
card excluded), 24/26 padding, background --background so it sits on the
cream rather than introducing a white surface.
Card contents:
- 6px status dot in the status colour + tracked 10px label
'{STATUS_LABEL} · {TARGET}' in the same family colour. The
considering tier uses the lighter #d4d2c8 dot with the #b4b2a9 label
to distinguish it from exploring.
- 19px serif title, line-height 1.2.
- 12px description, line-height 1.55, --on-surface-variant. If the
item has attributions, an attributionLine() trailer appends 'Shaped
by Lars.' / 'Shaped by Lars and Anna.' / etc. in --on-surface-muted.
Right-edge fade gradient (80px) fades to opacity 0 at scrollEnd via a
small vanilla script. The script also handles arrow disabled state and
scrollBy ±cardWidth on click. No library.
Items are loaded with the full set ordered by display_order ASC (then
id ASC tiebreak) — admin orders chronologically nearest-to-furthest and
the carousel just consumes that.
If items.length < 4 the arrows + fade are hidden; the cards still flex
naturally and don't actually need to scroll.
/pulse: dropped the old .roadmap-section/.roadmap-grid/.roadmap-card +
status-dot/breathe styles. Carousel does its own.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .claude | ||
| content | ||
| design | ||
| migrations | ||
| public | ||
| scripts | ||
| src | ||
| tests | ||
| .env.example | ||
| .gitignore | ||
| astro.config.mjs | ||
| CLAUDE.md | ||
| DECISIONS.md | ||
| HANDOVER.md | ||
| KNOWN_ISSUES.md | ||
| package.json | ||
| pnpm-lock.yaml | ||
| SPEC.md | ||
| todo.md | ||
| tsconfig.json | ||
| vitest.config.ts | ||