# Articles Timeline Layout — Design Spec

## Context

The current articles list is a plain vertical stack of full-width cards (image on top, text below). The goal is to redesign it into a vertical timeline with a center spine, alternating left/right cards, type-colored connector lines and nodes, while retaining the existing card content. On narrow screens it collapses to a single-column layout with a left spine, retaining the connector and node.

## Layout — Desktop (≥ 768px)

- A vertical spine runs down the center of the container (`left: 50%`), 2px wide, using a `linear-gradient` from `var(--accent)` to `var(--accent2)`.
- Articles alternate sides: odd items left, even items right (or driven by a Hugo `modBool` counter).
- Each card is a horizontal flex row occupying roughly 45% of the container width, with a 28px gap from the spine on each side.
- **Left-aligned cards:** thumbnail on the left (outer), text on the right (inner, closest to spine).
- **Right-aligned cards:** text on the left (inner), thumbnail on the right (outer).
- **Thumbnail:** `aspect-ratio: 2/3` (landscape), full height of the card, `object-fit: cover`.
- **Connector:** a 2px horizontal line bridging the card's inner edge to the spine, colored with `var(--type-<articleType>)`. Touches the card border exactly and terminates at the spine center.
- **Node:** a 12px circle centered on the spine at the same vertical position as the connector. Fill: `var(--type-<articleType>)`, border: 2px solid `var(--bg)`, box-shadow glow using the same type color at low opacity.
- Card border and box-shadow also use the type color at low opacity (matching existing `.card` pattern with `var(--accent-glow)`).

## Card Content

Each card contains (text side only — thumbnail side is image only):

1. **Type badge + date row:** `TYPE · Jan 15, 2025` — type label in `var(--type-<articleType>)`, date in `text-text-dim`, monospace font, small caps / letter-spacing.
2. **Title:** `font-semibold`, links to the article.
3. **Excerpt:** `line-clamp-3`, `text-text-dim`, `text-sm`.
4. **CTA:** `→ read more` styled as existing `.btn.btn-sm` or a minimal inline link.
5. **Pinned badge:** retained above the title when `Params.pinned` is true.

The full-width top-of-card image banner is **removed** from the timeline variant. The type badge pill overlay on the image is also removed (type is now shown in the text metadata row).

## Layout — Mobile (< 768px)

- Spine moves to `left: 20px`, 2px wide.
- All cards are full-width, stacked in a single column, offset to `margin-left: 44px` (spine 20px + connector 12px + gap 12px).
- **Connector:** 22px horizontal line from spine right edge (`left: 22px`) to card left edge (`left: 44px`), type-colored.
- **Node:** 10px circle on the spine, same vertical position as connector top + 5px, type-colored with glow.
- **Thumbnail:** stacks on top of the text content (full-width banner, height ~90px), `object-fit: cover`. The 2:3 side-by-side layout is dropped since the card is too narrow.

## Responsive Breakpoint

Switch at `md` (768px, Tailwind default — not overridden in this project).

## Type Color Mapping

| Type  | CSS var         | Dark value | Light value |
|-------|----------------|------------|-------------|
| tech  | `--type-tech`  | `#a855f7`  | `#7c3aed`   |
| life  | `--type-life`  | `#f59e0b`  | `#d97706`   |
| quote | `--type-quote` | `#00ff88`  | `#008f5a`   |
| link  | `--type-link`  | `#38bdf8`  | `#0284c7`   |
| photo | `--type-photo` | `#ec4899`  | `#be185d`   |

## Files Affected

| File | Change |
|------|--------|
| `themes/danix-xyz-hacker/layouts/partials/article-list-item.html` | Full rewrite into timeline card variant |
| `themes/danix-xyz-hacker/layouts/_default/list.html` | Replace list container with timeline container, add side-tracking counter |
| `themes/danix-xyz-hacker/layouts/taxonomy/term.html` | Same container change as list.html |
| `themes/danix-xyz-hacker/layouts/taxonomy/list.html` | Same container change as list.html |
| `themes/danix-xyz-hacker/assets/css/main.css` | Add `.timeline-*` CSS component classes |

## Accessibility

- Connector lines and nodes are decorative — `aria-hidden="true"` on their elements.
- Card links retain existing focus styles.
- Type label text is visible in the card body (not just color-coded), satisfying WCAG 1.4.1 (no info conveyed by color alone).
- `<time datetime="...">` retained for machine-readable dates.
- Thumbnail `alt` text retained from existing partial logic.

## Non-goals

- No JS required — pure CSS + Hugo template.
- No changes to single article pages.
- No changes to the related articles partial on single pages.
- No animation on the spine or nodes (hover glow on card is retained via existing `.card:hover`).
