Phase 9: Timeline — visual timeline layout split by days/weeks #165
Description
Description
Redesign the event timeline on the live page to look more like an actual timeline. Currently events are listed as cards — they should be visually organized along a time axis, grouped by days or weeks.
Requirements
- Visual timeline layout (vertical axis with date markers)
- Group events by day or week with clear date separators
- Maintain existing event card content (faction, type, region, outcome)
- Mobile-friendly (single-column timeline on small screens)
Design direction
- Use the existing design tokens (faction colors, surface layers, 0px border-radius)
- Consider a left-aligned timeline rail with events branching right
- Date headers as sticky elements or inline dividers