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

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

src/layouts/BaseLayout.astro

-3

View File

@@ -87,9 +87,6 @@ const base = import.meta.env.BASE_URL;
   }
   main {
     max-width: var(--width-container);
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--gutter);
     padding-right: var(--gutter);
   }