Tidy blog layout: aligned columns, tighter spacing, captions, and index contrast

[3mdistal]

Problem

Layout problems on blog pages, all measured on production:

1. Header and body don't line up on wide screens. From 1280px, a post's header (breadcrumb, title, divider) started 64px to the right of the body text (40px from 1536px up). The header and the post container each defined their own horizontal padding and max-width, and from 1280px the container widens to 1320px for the owner editor while the 900px .prose column centers inside it.
2. The reading column jumped at 1280px. It went from 772px to 900px wide and shifted 64px left as the window crossed that width.
3. Too much empty space under the header divider: 104px on phones and 152px on desktop before the first paragraph. Three spacings stacked: the divider's bottom margin, the header's bottom padding, and the container's top padding.
4. The "back." link overhung the text column. Its box followed the wider editor container, so at 1600px it ended 170px past the body's right edge.
5. Image captions sat loose. A credit line under an image was 58px below it, closer to the next paragraph than to the photo.
6. Low contrast on the light-mode blog index. White text on the lavender-gray background measured about 3.6:1 for subtitles and 2.6–3.0:1 for dates and categories. WCAG AA asks 4.5:1 at those sizes.
7. Blog index titles crowded their dates. From 768px each row used three equal columns, with the title spanning two and the date taking the third, so long titles wrapped early and still ended 16px from the date.
8. The blog index didn't line up with posts. The list was 60% of the window, nudged 2.5rem right of center. At 1440px it started 58px right of where post text starts, and at 2560px it was 1,536px wide with dates about 480px from their titles.
9. Tight index typography on phones. Titles and subtitles had line-height: 1, so multi-line titles and subtitles nearly touched. The category was hidden below 768px.
10. Index semantics. Post titles were plain paragraphs inside divs, so screen-reader users couldn't jump between posts by heading or list item.

Changes

• One reading column for the whole blog (1, 2, 8): new global tokens in prose-variables.css, --content-column (900px) and --content-gutter (the per-breakpoint side padding: sm, then md from 640px, xl from 768px, lg from 1536px). .prose, blog-header.svelte, the post page's .blog-container, and the blog index's .blog-wrapper all size themselves as calc(var(--content-column) + 2 * var(--content-gutter)) with that gutter. The header, the body, and the index therefore share a left edge at every width, and the column grows smoothly to 900px. The post container still widens to 1320px from 1280px for the editor, but .prose stays centered at --content-column.
• Tighter opening (3): the header no longer has bottom padding, and the divider's bottom margin drops from md to sm, giving 56px on phones and 80px from 1280px up.
• "back." link (4): capped at --content-column and centered, with no right padding on the link, so the word ends at the column's right edge.
• Captions (5): prose.css treats a paragraph containing only <small>, directly after an image paragraph, as that image's caption. It sits 15px under the image in the secondary text color, with 2em before the next paragraph. Today only the Differential Analyzer credit uses it.
• Index contrast (6): the light-mode blog background uses a new, darker --color-steel-600 (#666674, same hue as steel-500). The bird painting's container is multiply-blended in light mode, so its pale areas can't lighten the background behind the text. Dark mode is unchanged.
• Index grid (7): from 768px the grid is minmax(0, 1fr) auto with a 48px gutter. The title takes the free width, the date column hugs the date, and the date sits on the title's first baseline. The title's phone font size now stops at 767px instead of also applying at exactly 768px.
• Index typography (9): title line-height 1.15, subtitle 1.35. On phones the category and date share one meta line, "Lyric · September 10, 2026". The dot is a CSS separator with empty alt text, so screen readers skip it.
• Index semantics (10): the index is a <ul>, and each post title is an <h2> under the page's <h1>, with no visual change.

Testing

Playwright in Chromium and WebKit, against a production build:

• Post pages at 320, 390, 640, 768, 1024, 1100, 1279, 1280, 1440, 1535, 1536, 1920, and 2560px: breadcrumb, title, divider, and body share a left edge; the divider and the "back." text end at the body's right edge; no horizontal overflow (26/26). The column is 896px at 1024 and 900px from 1100 up, with no shift at 1280.
• Blog index at 320, 390, 640, 768, 1024, 1440, 1920, and 2560px: the "Posts" heading and list start exactly at the post text's left edge at the same width, and the list caps at 900px. The smallest title-to-date gap is 48px or more (was 16px). On phones, category and date share one line. The page has 1 h1 and 13 h2s. No horizontal overflow (16/16).
• Divider to first paragraph: 56px below 1280px and 80px from 1280px up (was 104 and 152).
• Caption: 15px from the image and 43–53px to the next paragraph (was 58px from the image).
• Light-mode index contrast, with the bird painting rendered, per text element over its actual background pixels: titles and subtitles 5.4:1 or better, dates and categories 4.58:1 or better, even at the lightest pixel (was as low as 2.56:1).
• pnpm lint, pnpm check, and vitest (54 tests) pass.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
alicealexandra.com	Ready	Preview, v0	Sep 25, 2026 4:04pm UTC