--- /dev/null
+# 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`).
