Layout
Every screen in Jaunt sits inside the same shell, so no page sets its own outer spacing.
| Part | Value |
|---|---|
| Column | One column, at most 384px wide, centred. On a phone it’s the whole screen; on a wider window it stays 384px and floats in the middle |
| Side gutter | 20px each side |
| Top and bottom | 24px |
| Between blocks | 32px between a page’s top-level blocks |
| Safe areas | Where a phone’s notch, home bar or rounded corners need more room than the gutter, the bigger one wins |
| Footer | Sticks 24px above the bottom (or above the home bar). See Navigation |
| Page background | The Page colour, set once here |
When the footer shows: only once someone is signed in and has a name. Someone halfway through signing up doesn’t get the full footer yet.
Scrolling: the page scrolls inside the shell, not the browser window. The shell stays put between pages, so a new page is scrolled back to the top on purpose. Otherwise it would open at the old page’s scroll position.
Height: the shell is the phone’s visible height, so the browser’s own bars never hide the footer.
Source
Section titled “Source”src/web/components/Layout.tsx