From: Danilo M. Date: Tue, 21 Apr 2026 09:49:39 +0000 (+0200) Subject: docs: add timeline articles list design spec X-Git-Tag: release_22042026-1342~43 X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=175a1f5ac0ea70a3d1b00c04c050e8b1d2ea0ac8;p=danix.xyz-2.git docs: add timeline articles list design spec --- diff --git a/docs/superpowers/specs/2026-04-21-timeline-articles-list-design.md b/docs/superpowers/specs/2026-04-21-timeline-articles-list-design.md new file mode 100644 index 0000000..4275d1d --- /dev/null +++ b/docs/superpowers/specs/2026-04-21-timeline-articles-list-design.md @@ -0,0 +1,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-)`. 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-)`, 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-)`, 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). +- `