Grid system
Module math used across the personal site and these docs.
The layout is not decorative: vertical lines, column widths, and outer padding are meant to stay in sync.
Module
- Column track:
184px - Gutter:
20px(--gutter) - Module:
204px(one column plus one gutter)
Page grid
main uses display: grid with repeat(n, 184px) and column-gap: var(--gutter). The number of columns steps up at 640px, 1024px, 1440px, and 2560px — same breakpoints as the homepage.
Wide anchor
At 1024px and above, main gets margin-left: 204px — exactly one module — so the first column starts on the same vertical rhythm as the main site’s “column two” anchor.
Mobile
Below 480px, the background grid and main switch to a two-track rhythm with 18px horizontal padding so the drawn lines still match the layout grid.