eaef3f8e84
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
2026-05-27 04:02:12 +00:00
a1065364d8
feat: add prose styling for markdown content with full typographic treatment
2026-05-26 22:54:38 +00:00
e100119e3b
feat: download and self-host Google Fonts woff2 files
...
- Created scripts/download-fonts.py: downloads Google Fonts woff2 files (latin subset only) using urllib.request with Chrome User-Agent header
- Parses CSS response for latin @font-face blocks, extracts family/weight/style/URL metadata
- Downloads to src/fonts/ with naming convention {family}-{weight}{-italic}.woff2
- Created src/styles/fonts.css: 8 @font-face declarations for:
* Source Serif 4 (400, 600, 400-italic) — prose voice
* Inter (400, 500, 600, 700) — structure voice
* JetBrains Mono (400) — evidence voice
- All fonts use format('woff2'), font-display: swap, and relative URLs
- Fonts placed in src/fonts/ for Vite processing at build time
Generated with Amplifier
Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com >
2026-05-26 22:39:10 +00:00
b302f8d910
feat: add design tokens as CSS custom properties
...
Create src/styles/tokens.css with complete design token system including:
- Surface, text, accent, code, border, focus colors
- State colors (success, warning, error, info)
- Shadow definitions
- Typography families with full fallback stacks
- Typography scale (xs through 3xl) and line heights
- Spacing scale (0 through 12)
- Border radius tokens
- Layout constraints (prose, code, container widths)
- Motion tokens with reduced-motion media query
All values sourced from .design/specs/design-tokens-2026-05-26.md.
Includes verification test with 56 assertions across all categories.
2026-05-26 22:35:59 +00:00
Ken