Layout
Layout is two decisions made once: a single shared gutter that every region uses, and a floating bar that lives inside it. Everything else is content flowing top to bottom in one scroll context.
Imported system. Adopted from the app's design system. The rules apply as written; this site's Container is max-w-2xl with px-6. The app's gutter (max-w-6xl with px-5, md:px-8) stays the app's; the two repos share the rules, not the measure.
The gutter
- One Container component owns the horizontal margin: centered, full-width, one max-width, one padding pair. Every page region wraps its children in it.
- Never hand-roll a max-width plus padding combo on a page.
- Edges align. The navbar and the page content both use the Container; their left and right edges are always flush.
The floating bar
The navigation bar is a sticky element inside the Container, not a full-bleed strip:
- Sticky with a 12px gap above it; the bar is 48px tall.
- A 1px line border and a surface fill at 85% with backdrop blur, so content scrolls visibly beneath it. Where backdrop-filter is unsupported, the fill rises to 95%.
- Square corners and, per the depth rules, no shadow.
- The mark sits at the left, actions at the right.
- Links stay inline at every viewport; the bar never collapses into a hamburger. Each link's hit area is at least 44px tall.
- Hover tints a link with a faint ink step; the current section's link sits on tint.
- The root carries scroll-padding-top equal to the bar, its gap, and breathing room, so anchors and keyboard focus never land beneath the bar.
MarkActions