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

Merged

michalvankodev merged 3 commits from redesign/06-content-rendering into redesign/00-foundation 2026-09-07 15:10:13 +02:00

Conversation 0 Commits 3 Files changed 9 +215 -48

michalvankodev commented 2026-08-21 12:29:17 +02:00

Owner

Copy link

What

Slice 6/9 of the selected redesign (base: #10). How markdown renders inside articles.

• Code blocks go LIGHT — syntect theme base16-ocean.dark → InspiredGitHub. The dark theme arrived by accident inside the askama-upgrade commit; the site is light, code cards stay light. Light card styling + the nested-pre normalization (syntect emits its own <pre>).
• Copy button on every code block — hover-revealed copy → clipboard → ✓ flash.
• Blockquote — border-l-2 border-blue-500 + indent, slate-700 roman text. The pink callout card and long-italics treatments are out.
• Tables (v3, wholesale) — mono lowercase header row, 2px navy rule, zebra blue-50 rows.
• Figure captions — bookish image subtitles: reading voice, smaller + muted, roman (mono rejected, italics dropped). Photos rounded-xs.
• Blue list markers (pink rejected). Inline code untouched (chips rejected).
• Heading # anchors — # appears on heading hover, copies the deep link (ids already exist from the TOC contract). Together with the copy button: the site's only two JS affordances beyond scroll-spy.

Preview: https://redesign-06-content-rendering.dev.michalvanko.dev — open a code-heavy article (e.g. the RSS feed post) and hover a code block / heading.

Review round: geometry pass + code-card rework (2026-09-07)

Live-reviewed on a local dev server with DOM measurement; every number below verified at 1720px.

Corrections to the claims above:

• Code theme went back to DARK — base16-ocean.dark on a slate-900 .code-card is the deliberate terminal-chrome accent now (originally accidental → dropped for light → re-adopted after live review). Recorded in DESIGN.md.
• Heading # anchors are NOT in this slice — found missing during review; deferred (ids already exist, CSS scaffolding present, only markup+JS missing).

Delivered during review:

• Code blocks reworked completely — the filter now emits a .code-card div (copy button + syntect <pre>), eliminating the <pre><code><pre> triple nesting. The copy button works: clipboard + "✓ copied" flash, hover/:focus-visible reveal, print:hidden, transitions off under reduced motion. Verified end-to-end with trusted clicks.
• Tables v3 actually break out — w-max up to max-w-image, centered via left-1/2 + -translate-x-1/2 (auto margins can't center an overflowing box); wide tables clear the TOC rail by the figure geometry.
• Blockquote evolved during review: soft blue-25 plate (new token, lighter than the page bg), mx-6 inset, leading-normal.
• --spacing-image 70rem → 50rem — leaner articles (images cap at 800px); w-fit listing containers uncapped so rows keep the 42rem reading measure.
• Article 2xl grid rail 30rem → 24rem — TOC closer, text column now ~page-centered. Found + fixed: mx-auto on the header grid item shrink-wrapped it to the title's width and floated it mid-column (grid auto-margin semantics) — title now sits on the column's left edge.
• TOC capped at w-72 — long headings wrap instead of extending over content/images.
• clear-both on breakout boxes (figure/table/blockquote/code-card) — nothing heavy renders beside the floated cover plate (fixed an 800px image overlapping the cover on the redox post).
• Deduped the drop-cap rule; commented out the redox post's duplicate cover image; DESIGN.md token table corrected (read 42rem, note 36rem, image 50rem) + palette/content-rendering sections match reality.
• .forgejo/workflows/preview.yaml: previews also rebuild on pushes to branches with open PRs (stacked-PR merges otherwise leave dependent previews stale) — D11 updated.

## What Slice 6/9 of the selected redesign (base: #10). How markdown renders inside articles. - **Code blocks go LIGHT** — syntect theme `base16-ocean.dark` → `InspiredGitHub`. The dark theme arrived by accident inside the askama-upgrade commit; the site is light, code cards stay light. Light card styling + the nested-`pre` normalization (syntect emits its own `<pre>`). - **Copy button on every code block** — hover-revealed `copy` → clipboard → `✓` flash. - **Blockquote** — `border-l-2 border-blue-500` + indent, `slate-700` **roman** text. The pink callout card and long-italics treatments are out. - **Tables (v3, wholesale)** — mono lowercase header row, 2px navy rule, zebra `blue-50` rows. - **Figure captions** — bookish image subtitles: reading voice, smaller + muted, roman (mono rejected, italics dropped). Photos `rounded-xs`. - **Blue list markers** (pink rejected). Inline code untouched (chips rejected). - **Heading `#` anchors** — `#` appears on heading hover, copies the deep link (ids already exist from the TOC contract). Together with the copy button: the site's only two JS affordances beyond scroll-spy. **Preview:** https://redesign-06-content-rendering.dev.michalvanko.dev — open a code-heavy article (e.g. the RSS feed post) and hover a code block / heading. ## Review round: geometry pass + code-card rework (2026-09-07) Live-reviewed on a local dev server with DOM measurement; every number below verified at 1720px. **Corrections to the claims above:** - **Code theme went back to DARK** — `base16-ocean.dark` on a slate-900 `.code-card` is the deliberate terminal-chrome accent now (originally accidental → dropped for light → re-adopted after live review). Recorded in DESIGN.md. - **Heading `#` anchors are NOT in this slice** — found missing during review; deferred (ids already exist, CSS scaffolding present, only markup+JS missing). **Delivered during review:** - **Code blocks reworked completely** — the filter now emits a `.code-card` div (copy button + syntect `<pre>`), eliminating the `<pre><code><pre>` triple nesting. **The copy button works**: clipboard + "✓ copied" flash, hover/`:focus-visible` reveal, `print:hidden`, transitions off under reduced motion. Verified end-to-end with trusted clicks. - **Tables v3 actually break out** — `w-max` up to `max-w-image`, centered via `left-1/2` + `-translate-x-1/2` (auto margins can't center an overflowing box); wide tables clear the TOC rail by the figure geometry. - **Blockquote** evolved during review: soft `blue-25` plate (new token, lighter than the page bg), `mx-6` inset, `leading-normal`. - **`--spacing-image` 70rem → 50rem** — leaner articles (images cap at 800px); `w-fit` listing containers uncapped so rows keep the 42rem reading measure. - **Article 2xl grid rail 30rem → 24rem** — TOC closer, text column now ~page-centered. Found + fixed: `mx-auto` on the header grid item shrink-wrapped it to the title's width and floated it mid-column (grid auto-margin semantics) — title now sits on the column's left edge. - **TOC capped at `w-72`** — long headings wrap instead of extending over content/images. - **`clear-both` on breakout boxes** (figure/table/blockquote/code-card) — nothing heavy renders beside the floated cover plate (fixed an 800px image overlapping the cover on the redox post). - Deduped the drop-cap rule; commented out the redox post's duplicate cover image; DESIGN.md token table corrected (read 42rem, note 36rem, image 50rem) + palette/content-rendering sections match reality. - `.forgejo/workflows/preview.yaml`: previews also rebuild on pushes to branches with open PRs (stacked-PR merges otherwise leave dependent previews stale) — D11 updated.

michalvankodev added 1 commit 2026-08-21 12:29:17 +02:00

redesign: content rendering — light code, ruled quotes, v3 tables, affordances ... 9738c64f49

- Code blocks: LIGHT syntect theme (InspiredGitHub — base16-ocean.dark
  was accidental, not a choice); light card styling + nested-pre
  normalization (syntect emits its own <pre>); copy button on every
  block (hover-revealed, clipboard, ✓ flash)
- Blockquote: border-l-2 blue-500 + indent + slate-700 roman text —
  pink callout card and italics retired
- Tables (v3 wholesale): mono lowercase header row, 2px navy rule,
  zebra blue-50 rows on white
- Figure captions: bookish — reading voice, smaller + muted, roman
  (mono and italics rejected); photos rounded-xs
- Blue list markers (pink rejected); hr styling ported
- Heading anchor affordance: # on hover copies the deep link
  (ids already existed via the TOC contract); modifier-clicks keep
  native link behavior
- Inline code kept as-is (chips rejected)

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

redesign 07 — components (rows, plates, cards, 404) #12

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/06-content-rendering from 9738c64f49 to 38d7363719 2026-08-21 16:17:11 +02:00 Compare

michalvankodev force-pushed redesign/06-content-rendering from 38d7363719 to 4c6bee7b9a 2026-08-23 12:37:10 +02:00 Compare

michalvankodev force-pushed redesign/06-content-rendering from 4c6bee7b9a to 16054c0c10 2026-08-23 12:49:38 +02:00 Compare

michalvankodev force-pushed redesign/06-content-rendering from 16054c0c10 to 82ebb6a036 2026-08-23 12:57:58 +02:00 Compare

michalvankodev force-pushed redesign/06-content-rendering from 82ebb6a036 to a736a8040c 2026-08-24 10:19:45 +02:00 Compare

michalvankodev changed target branch from redesign/05-article-page to redesign/00-foundation 2026-09-07 12:56:39 +02:00

michalvankodev force-pushed redesign/06-content-rendering from a736a8040c to 35c820fb84 2026-09-07 12:56:39 +02:00 Compare

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

ci(preview): rebuild previews on pushes to branches with open PRs ... 13b9ba72fe

Stacked-PR merges land as pushes to the base branch and fire no
pull_request event for the PRs headed by it, so dependent previews went
stale (found live: foundation preview froze pre-merge while slice 06 was
in review). preview.yaml now also triggers on push (main excluded) and
deploys iff some open PR's head branch equals the pushed branch —
head-matched only, so pushes to already-merged branches can't resurrect
orphaned previews. Decision recorded in specs/CI-deploy.md D11.

michalvankodev added 1 commit 2026-09-07 15:09:38 +02:00

redesign: dark code cards with working copy button; content-rendering geometry pass ... 2761578a2b

- Code blocks reworked into .code-card (filter emits card + button, no more
  pre/code/pre nesting); syntect theme back to base16-ocean.dark — deliberate
  terminal-chrome accent (reverses the light-theme claim, recorded in DESIGN.md)
- Copy button works: clipboard + '✓ copied' flash, hover/focus-visible reveal,
  print:hidden, transitions off under reduced motion
- Tables v3 actually break out: w-max up to max-w-image, centered via
  left-1/2/-translate-x-1/2 (auto margins can't center overflow)
- Blockquote: blue-25 plate (new token), mx-6 inset, leading-normal
- --spacing-image 70rem -> 50rem: leaner articles; w-fit listing containers
  uncapped so rows keep the 42rem reading measure
- Article 2xl grid rail 30rem -> 24rem: TOC closer, text column ~page-centered;
  TOC capped at w-72 so long headings wrap instead of overlapping content
- clear-both on breakout boxes: nothing heavy sits beside the floated cover
- dedupe duplicated drop-cap rule; comment out redox post's duplicate cover image
- preview.yaml: rebuild previews on pushes to branches with open PRs (D11 update)
- DESIGN.md: tokens corrected (read 42rem, note 36rem, image 50rem), palette
  gains blue-25, content-rendering section matches reality

michalvankodev changed title from WIP: redesign 06 — content rendering (light code, tables, quotes) to redesign 06 — content rendering (dark code cards, tables v3, quotes, copy affordance) 2026-09-07 15:10:03 +02:00

michalvankodev merged commit 4712d0ac15 into redesign/00-foundation 2026-09-07 15:10:13 +02:00

michalvankodev referenced this pull request from a commit 2026-09-07 15:10:15 +02:00

Merge pull request 'redesign 06 — content rendering (dark code cards, tables v3, quotes, copy affordance)' (#11) from redesign/06-content-rendering 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!11

No description provided.