redesign 05 — article page (TOC rail, cover plate, drop cap) #10

Merged

michalvankodev merged 3 commits from redesign/05-article-page into redesign/00-foundation 2026-09-07 12:55:21 +02:00

Conversation 0 Commits 3 Files changed 9 +174 -62

michalvankodev commented 2026-08-21 12:26:49 +02:00

Owner

Copy link

What

Slice 5/9 of the selected redesign (base: redesign/00-foundation, rebased just-in-time per the stack policy in #5). The article page — the reading experience.

• Kicker ~/blog · 8 November 2024 · 5 min read (machine voice; 220 wpm), title as authored in Exo 2, mono tag row.
• Cover as a chapter-intro side plate — ~480px square max, floated right beside the opening paragraphs (rounded-xs, hairline, shadow). The full-width frontispiece was explicitly rejected (weak covers must not get big canvases).
• Sticky "on this page" TOC rail — h2/h3 anchors from extract_headings() (the TOC contract: ids mirror parse_markdown slugs exactly), IntersectionObserver scroll-spy, ↑ top button on the rail. Renders only at 2xl+, right of the content in a reserved 30rem grid column — wide article images never slide under it (see layout fix below). print:hidden.
• Drop cap — regular typographic variant (v2), display-voice glyph, float-based (bulletproof).
• End matter = further reading only — now ranked by tag-overlap count, then date (replaces the old slug-sorted any-match). Prev/next cards and keyboard nav rejected: "we are building a site, not an app."
• Reading progress hairline — 2px pink, fixed top, gated by prefers-reduced-motion (hidden + script skips), print:hidden.
• Smooth anchor scrolling site-wide behind prefers-reduced-motion; scroll-margin-top on article headings; ← ./blog footer link.

Preview: https://redesign-05-article-page.dev.michalvanko.dev — open any article; resize wide (≥1536px) for the TOC rail.

Fixes during review (2026-09-04)

• Further-reading rows: added <hr class="border-slate-300 my-5 md:my-8"> separators between rows — same rhythm as the / and /blog listings (rows previously merged into one visual block).
• Branch rebased onto merged redesign/00-foundation (includes the list-pages slice).

Layout fix: article images vs the TOC rail (2026-09-04, review feedback)

Found by DOM measurement during review: .article-body img overrode Tailwind preflight's max-width:100% with lg:max-w-image (1120px) inside a 640px figure — pictures overflowed rightward only, sliding under the sticky TOC rail while scrolling, and mx-auto cannot center an overflowing box, so they also sat off-center relative to their captions. The "rail can never overlap wide images" claim above did not hold in practice.

Decisions:

• Keep full image size — reserve space instead of shrinking. A smaller 2xl image cap (63rem) was tried and rejected. Images stay at full max-w-image; the 2xl article grid became [gutter | 42rem content | 30rem rail] inside a 90rem container. The 256px gap between content column and rail absorbs the 224px overhang of a centered 1120px image — 44px clearance verified at both 1536px and 1720px viewports, no overlap at any 2xl width.
• Center, don't right-spill. figure is now a flex column with items-center, so wide images overflow the text column symmetrically — centered on the content — and the figcaption sits centered under the picture.
• One shared grid axis. Header (kicker/title/tags) and the further-reading footer join the body's grid column, fixing a pre-existing ~136px jog between the page-centered title and the body text.
• Tables and iframes keep max-w-image and clear the rail by the same geometry.
• Below 2xl nothing changes: no rail, images capped at max-w-image centered — same as before this fix.

Verified during review (pixel + DOM): TOC id contract (extract_headings ↔ parse_markdown), reading time (220 wpm), overlap-ranked further reading, TOC rail at 2xl+ with scroll-spy, RM-gated progress hairline + smooth anchors, view-transition names preserved, drop cap + floated cover plate, image/rail clearance at 2xl–1720px with no horizontal scrollbar, layout unchanged below 2xl.

Review round 2: listing geometry unification (2026-09-07)

Live-reviewed against a local dev server, verified by DOM measurement at 1720px. One rule now holds everywhere a preview row appears (article header, /blog, tag archives, further reading, homepage lead/featured/broadcasts): rows are content-width and centered; all text sits inside the 42rem reading measure.

• Article header restyled to the listing row pattern: date + reading time left, #tags right on one baseline, big bold title below. post_date_/post_tags_ view-transition names preserved.
• Preview rows fit their content (w-fit): thumbnail (180px) + gap + text capped at max-w-read — 896px natural width instead of a stretched 1120px page-width row with dead space.
• Text never exceeds the reading measure: preview meta header and excerpt capped at max-w-read; #tags end flush with the excerpt's right edge instead of flying to the container edge (mr-auto on the date keeps the left/right split inside the cap).
• Row separators span the row, not the page: w-fit on listing/further-reading uls — hrs go thumbnail-left-edge → text-right-edge, no full-bleed rules between articles.
• Homepage gets the same rules: lead story text capped at max-w-read; lead story, featured and broadcasts containers are content-width and centered (w-fit mx-auto) — featured/broadcast rows previously sat in a 42rem box that squeezed row text to ~448px; they now match /blog rows exactly.
• Article footer back-link centers on the page when the 2xl TOC rail is reserved (2xl:col-span-3 instead of pinning to the content column — with the rail present, column-centering read as off-center).
• Alternative thumbnails (posts without a cover image) now use the display font (Baloo 2), matching titles.

Also cleaned up a stray push to redesign/04-list-pages during the session — branch restored, commit landed on redesign/05-article-page only.

## What Slice 5/9 of the selected redesign (base: `redesign/00-foundation`, rebased just-in-time per the stack policy in #5). The article page — the reading experience. - **Kicker** `~/blog · 8 November 2024 · 5 min read` (machine voice; 220 wpm), title as authored in Exo 2, mono tag row. - **Cover as a chapter-intro side plate** — ~480px square max, floated right beside the opening paragraphs (`rounded-xs`, hairline, shadow). The full-width frontispiece was explicitly rejected (weak covers must not get big canvases). - **Sticky "on this page" TOC rail** — h2/h3 anchors from `extract_headings()` (the TOC contract: ids mirror `parse_markdown` slugs exactly), IntersectionObserver scroll-spy, `↑ top` button on the rail. Renders only at 2xl+, right of the content in a reserved 30rem grid column — wide article images never slide under it (see layout fix below). `print:hidden`. - **Drop cap** — regular typographic variant (v2), display-voice glyph, float-based (bulletproof). - **End matter = further reading only** — now ranked by **tag-overlap count, then date** (replaces the old slug-sorted any-match). Prev/next cards and keyboard nav rejected: *"we are building a site, not an app."* - **Reading progress hairline** — 2px pink, fixed top, gated by `prefers-reduced-motion` (hidden + script skips), `print:hidden`. - **Smooth anchor scrolling** site-wide behind `prefers-reduced-motion`; `scroll-margin-top` on article headings; `← ./blog` footer link. **Preview:** https://redesign-05-article-page.dev.michalvanko.dev — open any article; resize wide (≥1536px) for the TOC rail. ## Fixes during review (2026-09-04) - **Further-reading rows:** added `<hr class="border-slate-300 my-5 md:my-8">` separators between rows — same rhythm as the `/` and `/blog` listings (rows previously merged into one visual block). - Branch rebased onto merged `redesign/00-foundation` (includes the list-pages slice). ## Layout fix: article images vs the TOC rail (2026-09-04, review feedback) Found by DOM measurement during review: `.article-body img` overrode Tailwind preflight's `max-width:100%` with `lg:max-w-image` (1120px) inside a 640px figure — pictures overflowed **rightward only**, sliding under the sticky TOC rail while scrolling, and `mx-auto` cannot center an overflowing box, so they also sat off-center relative to their captions. The "rail can never overlap wide images" claim above did not hold in practice. **Decisions:** - **Keep full image size — reserve space instead of shrinking.** A smaller 2xl image cap (63rem) was tried and rejected. Images stay at full `max-w-image`; the 2xl article grid became `[gutter | 42rem content | 30rem rail]` inside a 90rem container. The 256px gap between content column and rail absorbs the 224px overhang of a centered 1120px image — 44px clearance verified at both 1536px and 1720px viewports, no overlap at any 2xl width. - **Center, don't right-spill.** `figure` is now a flex column with `items-center`, so wide images overflow the text column symmetrically — centered on the content — and the figcaption sits centered under the picture. - **One shared grid axis.** Header (kicker/title/tags) and the further-reading footer join the body's grid column, fixing a pre-existing ~136px jog between the page-centered title and the body text. - Tables and iframes keep `max-w-image` and clear the rail by the same geometry. - **Below 2xl nothing changes:** no rail, images capped at `max-w-image` centered — same as before this fix. Verified during review (pixel + DOM): TOC id contract (extract_headings ↔ parse_markdown), reading time (220 wpm), overlap-ranked further reading, TOC rail at 2xl+ with scroll-spy, RM-gated progress hairline + smooth anchors, view-transition names preserved, drop cap + floated cover plate, image/rail clearance at 2xl–1720px with no horizontal scrollbar, layout unchanged below 2xl. ## Review round 2: listing geometry unification (2026-09-07) Live-reviewed against a local dev server, verified by DOM measurement at 1720px. One rule now holds everywhere a preview row appears (article header, `/blog`, tag archives, further reading, homepage lead/featured/broadcasts): **rows are content-width and centered; all text sits inside the 42rem reading measure.** - **Article header restyled to the listing row pattern:** date + reading time left, `#tags` right on one baseline, big bold title below. `post_date_`/`post_tags_` view-transition names preserved. - **Preview rows fit their content** (`w-fit`): thumbnail (180px) + gap + text capped at `max-w-read` — 896px natural width instead of a stretched 1120px page-width row with dead space. - **Text never exceeds the reading measure:** preview meta header and excerpt capped at `max-w-read`; `#tags` end flush with the excerpt's right edge instead of flying to the container edge (`mr-auto` on the date keeps the left/right split inside the cap). - **Row separators span the row, not the page:** `w-fit` on listing/further-reading `ul`s — `hr`s go thumbnail-left-edge → text-right-edge, no full-bleed rules between articles. - **Homepage gets the same rules:** lead story text capped at `max-w-read`; lead story, featured and broadcasts containers are content-width and centered (`w-fit mx-auto`) — featured/broadcast rows previously sat in a 42rem box that *squeezed* row text to ~448px; they now match `/blog` rows exactly. - **Article footer back-link centers on the page** when the 2xl TOC rail is reserved (`2xl:col-span-3` instead of pinning to the content column — with the rail present, column-centering read as off-center). - **Alternative thumbnails** (posts without a cover image) now use the display font (Baloo 2), matching titles. Also cleaned up a stray push to `redesign/04-list-pages` during the session — branch restored, commit landed on `redesign/05-article-page` only.

michalvankodev referenced this pull request 2026-08-21 12:29:17 +02:00

redesign 06 — content rendering (dark code cards, tables v3, quotes, copy affordance) #11

michalvankodev referenced this pull request 2026-08-21 14:40:14 +02:00

WIP: redesign 09 — a11y & print sweep (stack tip) #14

michalvankodev force-pushed redesign/05-article-page from 8c856f9c8f to 01fc6c7192 2026-08-21 16:17:08 +02:00 Compare

michalvankodev force-pushed redesign/05-article-page from 01fc6c7192 to ae1fb0a804 2026-08-23 12:37:05 +02:00 Compare

michalvankodev force-pushed redesign/05-article-page from ae1fb0a804 to 99bccad1d9 2026-08-23 12:49:35 +02:00 Compare

michalvankodev force-pushed redesign/05-article-page from 99bccad1d9 to 7f4101bcd8 2026-08-23 12:57:55 +02:00 Compare

michalvankodev force-pushed redesign/05-article-page from 7f4101bcd8 to de77b53adb 2026-08-24 10:19:42 +02:00 Compare

michalvankodev changed target branch from redesign/04-list-pages to redesign/00-foundation 2026-09-04 13:55:56 +02:00

michalvankodev force-pushed redesign/05-article-page from de77b53adb to aaf4a4dd08 2026-09-04 14:39:56 +02:00 Compare

michalvankodev added 1 commit 2026-09-07 10:26:14 +02:00

redesign: center article images on content; reserve rail gutter so they never slide under the TOC ... c595d562e6

Review found .article-body img overrode preflight max-width:100% with
lg:max-w-image inside the 640px figure — pictures overflowed rightward
only, sliding under the sticky TOC rail while scrolling, and mx-auto
cannot center an overflowing box so they sat off-center of captions.

- 2xl article grid becomes [gutter | 42rem content | 30rem rail] in a
  90rem container; images keep full max-w-image (63rem cap tried,
  rejected) and the 256px content-to-rail gap absorbs their 224px
  centered overhang (44px clearance verified at 1536/1720)
- figure is a flex column with items-center: symmetric overflow,
  caption centered under the picture
- header and further-reading footer join the same grid column, fixing
  the ~136px jog between page-centered title and body text
- below 2xl unchanged: no rail, max-w-image images

michalvankodev added 1 commit 2026-09-07 12:53:45 +02:00

redesign: listing geometry — content-width rows, centered containers, reading-measure text ... 2d9a936549

- alternative thumbnails use the display font (Baloo 2) like titles
- article header: date + reading time left, tags right, big title (listing row style)
- blog/tag/further-reading rows: container fits content (thumbnail + capped text), centered
- preview excerpts and meta header capped at max-w-read; row separators span the row, not the page
- homepage: lead story, featured and broadcasts get the same content-width centered treatment
- article footer back-link centers on the page when the TOC rail is reserved

michalvankodev changed title from WIP: redesign 05 — article page (TOC rail, cover plate, drop cap) to redesign 05 — article page (TOC rail, cover plate, drop cap) 2026-09-07 12:55:11 +02:00

michalvankodev merged commit 4b5e1eb26e into redesign/00-foundation 2026-09-07 12:55:21 +02:00

michalvankodev referenced this pull request from a commit 2026-09-07 12:55:22 +02:00

Merge pull request 'redesign 05 — article page (TOC rail, cover plate, drop cap)' (#10) from redesign/05-article-page into redesign/00-foundation

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

michalvankodev/michalvankodev-site!10

No description provided.