08Layout & elevation
Containers, breakpoints, fixed chrome, and the six-layer elevation order.
Containers & breakpoints
--target-min | 1.5rem | |
--target-comfy | 2.5rem | |
--breakpoint-sm | 40rem | |
--breakpoint-md | 48rem | |
--breakpoint-lg | 64rem | |
--breakpoint-xl | 80rem | |
--breakpoint-2xl | 96rem | |
--container-prose | 42rem | |
--container-narrow | 56rem | |
--container-page | 72rem | |
--container-wide | 88rem | |
--gutter | var(--space-4) | |
--gutter-md | var(--space-6) | |
--gutter-lg | var(--space-8) | |
--navbar-h | 3.5rem | |
--sidebar-w | 16rem | |
--toc-w | 15rem | |
--player-side-w | 21rem |
Elevation order — six layers, no more
--z-base | 0 | |
--z-raised | 10 | |
--z-sticky | 100 | |
--z-dropdown | 200 | |
--z-overlay | 300 | |
--z-toast | 400 | |
--z-max | 999 |