1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
# 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`).
|
