No description
Jonathan Hvid
39996ab93e
Council section gets a proper carousel — a horizontal marquee that moves continuously across the page, listing every cab member in turn rather than a fixed-size grid. Implementation: - Members rendered twice in a single flex track; CSS keyframe translates from translateX(0) to translateX(-50%) over 40s+ (duration scales with member count via the --marquee-duration inline custom prop, capped at 6 sec per member or 28 sec minimum). At -50% the first copy is fully offscreen and the second copy occupies the visible window seamlessly; the loop resets without a visible jump. - aria-hidden on the duplicated copies so screen readers don't double- announce. - mask-image fades both edges so members slide in and out softly rather than clipping at the container edge. - Paused on hover so a reader can stop and parse a tile. - prefers-reduced-motion: animation off and the strip becomes a quietly scrollable horizontal list — keyboard / trackpad users can pan manually instead of relying on the animation. Seed adds 3 more cab members for a total of 7 (Mads Lindberg, Camilla Storm, Frederik Lund) with backdated cab_joined_date so member_numbers allocate 5/6/7. Each gets title + pull_quote + focus_tags consistent with the existing four. Tenure spread is now 3 → 24 weeks across the seven members so /members renders meaningfully varied 'member since' dates. The previous 4-tile grid + 5th-tile-as-link case is gone; the marquee loops the full set so no truncation is needed. 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 | ||