ken/crashtestdev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement three-width layout system (reading, wide, full-bleed)

Browse Source 
Replace the narrow 720px column layout with a three-width breakout system:

- Reading width (--width-prose, 720px): prose paragraphs, lists, blockquotes
- Wide width (--width-code, 840px): code blocks, inline SVGs, figures, .wide/.breakout
- Full width (--width-container, 1100px): hero diagrams, .full elements

The outer container is wide; individual content blocks self-constrain via
max-width + margin: auto. This creates the narrow-wide-narrow rhythm.

Changes:
- prose.css: Add .prose > * breakout pattern for three widths, SVG styling
- BaseLayout.astro: Remove max-width from main (children handle their own widths)
- [...slug].astro: Remove --width-prose constraint from .prose-wrapper
- prose.css: Remove old left:50%/translateX(-50%) code block hack
This commit is contained in:
Ken
2026-05-27 04:02:12 +00:00
parent 84bf9e706b
commit eaef3f8e84
6 changed files with 169 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/post-page.test.mjs
+1 -2
View File
@@ -126,10 +126,9 @@ describe('Post page template', () => {
});
describe('Style', () => {
it('should have .prose-wrapper with prose max-width, auto margins, and space-12 bottom padding', () => {
it('should have .prose-wrapper with auto margins and space-12 bottom padding (no max-width — children self-constrain)', () => {
const content = readPage();
assert.match(content, /\.prose-wrapper/, 'should style .prose-wrapper');
assert.match(content, /max-width\s*:\s*var\(--width-prose\)/, 'should have prose max-width');
assert.match(content, /margin-left\s*:\s*auto/, 'should have auto left margin');
assert.match(content, /margin-right\s*:\s*auto/, 'should have auto right margin');
assert.match(content, /padding-bottom\s*:\s*var\(--space-12\)/, 'should have space-12 bottom padding');