redesign: article body gutter — drop legacy per-block padding #23

Merged

michalvankodev merged 9 commits from redesign/article-body-gutter into main 2026-09-13 21:30:40 +02:00

Conversation 1 Commits 9 Files changed 8 +53 -23

michalvankodev commented 2026-09-13 20:06:40 +02:00

Owner

Copy link

Article body gutter cleanup

Investigated with live computed-style measurements across viewports (360→1920px).

Drop legacy px-4 on .article-body text blocks (h1–h4, p)

The per-block padding stacked three gutter layers and caused:

• mobile: px-5 (20) + px-4 (16) + 95vw mx-auto (~10) ≈ 46px/side → only ~299px of text on a 390px screen (now 331px)
• desktop 2xl: body text sat 16px off-grid from the article title (460 vs 444); all text blocks now flush at the column edge
• reading measure was effectively 40rem, not the 42rem from DESIGN.md (~65–75 cpl)

Unset container px-5 on the article body (experimental)

Isolates the container so its behavior is fully attributable to
max-w-image = min(50rem, 95vw) + mx-auto: on viewports where 95vw is
active (<843px) the box shrinks below the viewport and auto margins split
the leftover → 2.5vw phantom margin per side (9–19px). Swept 360→1920px
to document the three regimes (95vw / 50rem cap / 2xl 90rem grid).

Follow-up candidate: give page containers a flat --spacing-shell: 50rem
token and keep max-w-image (with its 95vw safety) for figures/tables only.

Docs

AGENTS.md: katelyn (self-hosted Forgejo) is the only git remote; the stale
origin alias (dead Gitea hostname) was removed, repo-local defaults
(checkout.defaultRemote, push.autoSetupRemote) make katelyn the default
for new work.

🤖 Generated with pi

## Article body gutter cleanup Investigated with live computed-style measurements across viewports (360→1920px). ### Drop legacy `px-4` on `.article-body` text blocks (h1–h4, p) The per-block padding stacked three gutter layers and caused: - **mobile**: px-5 (20) + px-4 (16) + 95vw mx-auto (~10) ≈ **46px/side** → only ~299px of text on a 390px screen (now 331px) - **desktop 2xl**: body text sat 16px off-grid from the article title (460 vs 444); all text blocks now flush at the column edge - reading measure was effectively **40rem**, not the 42rem from DESIGN.md (~65–75 cpl) ### Unset container `px-5` on the article body (experimental) Isolates the container so its behavior is fully attributable to `max-w-image = min(50rem, 95vw)` + `mx-auto`: on viewports where 95vw is active (<843px) the box shrinks below the viewport and auto margins split the leftover → **2.5vw phantom margin per side** (9–19px). Swept 360→1920px to document the three regimes (95vw / 50rem cap / 2xl 90rem grid). > Follow-up candidate: give page containers a flat `--spacing-shell: 50rem` > token and keep `max-w-image` (with its 95vw safety) for figures/tables only. ### Docs AGENTS.md: `katelyn` (self-hosted Forgejo) is the only git remote; the stale `origin` alias (dead Gitea hostname) was removed, repo-local defaults (`checkout.defaultRemote`, `push.autoSetupRemote`) make katelyn the default for new work. 🤖 Generated with pi

michalvankodev added 2 commits 2026-09-13 20:06:40 +02:00

redesign: article body gutter — drop legacy per-block padding ... e2a0821398

- remove px-4 from .article-body h1-h4/p: it double-guttered mobile
  (stacking with the container px-5 to ~46px/side on a 390px screen),
  left the real reading measure at 40rem instead of the 42rem spec,
  and broke title/body flush alignment at 2xl (444 vs 460)
- unset px-5 on the article body container (experimental): isolate the
  container behavior — max-w-image = min(50rem,95vw) + mx-auto leaves a
  2.5vw/side phantom margin on viewports where 95vw is active

docs: AGENTS.md — katelyn is the only git remote ... 3bb3e45939

origin was a stale alias of the dead Gitea hostname; removed and
replaced with repo-local defaults (checkout.defaultRemote,
push.autoSetupRemote, all branches tracking katelyn/*).

forgejo-actions commented 2026-09-13 20:07:59 +02:00

Copy link

🪦 Live preview

removed (PR closed)

<!-- preview-link --> ## 🪦 Live preview removed (PR closed)

michalvankodev added 1 commit 2026-09-13 20:37:51 +02:00

redesign: one shell token for all page containers ... 941419a48f

New --spacing-shell: 50rem (flat). Page containers (base shell, header
nav, footer, homepage sections, about-me, article body) switch from
borrowing max-w-image / max-w-read to max-w-shell; about-me keeps its
42rem reading column as nested content, not container.

Why: container tokens with different caps (42rem flat vs min(50rem,95vw))
made mobile header padding drift between pages by -10..+64px depending
on viewport (about-me h1 at 68px vs subpage h1 at 39px at 768px). The
95vw term is inert for media but active on mobile containers, feeding
mx-auto a phantom 2.5vw/side margin.

Also restores px-5 on the article body container — the earlier removal
was an isolation experiment; with the phantom gone it is just the
standard gutter again.

max-w-image stays media-only (figures, tables, iframes). DESIGN.md token
table + gutter rules updated.

michalvankodev added 1 commit 2026-09-13 21:00:38 +02:00

redesign: tighten page gutter px-5 -> px-2 (20px -> 8px) ... 65d4e3b8de

All page-level gutters move together (base shell, header nav, footer,
homepage sections, about-me, article header/body/footer) so the
alignment won from the shell token is preserved. The 2xl grid's gutter
column absorbs the difference (344px -> 368px at 1600px viewport).

michalvankodev added 1 commit 2026-09-13 21:01:08 +02:00

docs: DESIGN.md — gutter is px-2 now b306a71236

michalvankodev added 1 commit 2026-09-13 21:03:29 +02:00

redesign: extract page gutter into a semantic .page-gutter class ... 2f392a31c2

Single point of change in input.css (currently @apply px-2); the 12
page-container spots reference the class instead of hardcoding px-*,
so the intent ('this is THE page gutter') is visible in the markup and
future tweaks can't drift out of sync between pages.

michalvankodev added 1 commit 2026-09-13 21:12:32 +02:00

redesign: page gutter px-2 -> px-4 (8px -> 16px) 9acdf61e1d

michalvankodev added 1 commit 2026-09-13 21:17:31 +02:00

redesign: footer feed icons align right when the row wraps ... f76a97bd98

justify-between left-aligns a lone item on its own flex line; ml-auto
on the aside pushes it right when wrapped and is a no-op on one line.

michalvankodev referenced this pull request 2026-09-13 21:29:50 +02:00

Tighten mobile content rail padding to px-2 #22

michalvankodev added 1 commit 2026-09-13 21:30:25 +02:00

docs: fix git remotes note — origin (GitHub) exists but unused, katelyn is default 5a1d21b3ed

michalvankodev merged commit 5a1d21b3ed into main 2026-09-13 21:30:40 +02:00

michalvankodev deleted branch redesign/article-body-gutter 2026-09-13 21:30:41 +02:00

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

2 participants

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!23

No description provided.