{% raw %}
# Layout
Layout uses CSS Grid and Flexbox. There is one shared page shell, and a small set of approved content layouts that sit inside it. New pages pick one of these rather than inventing a new structure.
## The page shell
Every page is wrapped by `base.html` in the same four-part shell, from top to bottom:
1. **Fixed top nav** (`.topnav`, height `--nav-height` = `56px`, `position: fixed`, `z-index: 1000`). It is always on screen and is never re-implemented per page.
2. **Breadcrumb** (`.breadcrumb`, optional but expected). It renders only when the page supplies two or more crumbs. Critically, it carries `padding-top: calc(var(--nav-height) + 0.5rem)`, which is what pushes content clear of the fixed nav. A page that omits breadcrumbs slides under the header. See [Consistency rules](/docs/styles-consistency.html).
3. **Content root** (``, `max-width: var(--max-content)` = `1200px`, centred, `padding: 1rem`). All page content lives inside this single element.
4. **Footer** (`.site-footer`), rendered from the `footer` block.
```text
+-----------------------------------------------+ .topnav (fixed, 56px)
| Dev[Place] Home Posts News ... bell user |
+-----------------------------------------------+
| Home / Feed | .breadcrumb (clears the nav)
| +-----------------------------------------+ |
| | | | max 1200px, centred
| | [ one approved layout goes here ] | |
| +-----------------------------------------+ |
| site footer |
+-----------------------------------------------+
```
A page never re-declares `max-width: 1200px`, never adds a second centred wrapper, and never rebuilds the nav or footer. It supplies exactly one layout container inside `.page`.
## Approved layouts
### 1. Three-column app layout (the default)
The feed / posts page. A fixed-width left sidebar, a fluid main column, and a fixed-width right rail.
```css
.feed-layout {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr 280px; /* 240px | fluid | 280px */
gap: 1.5rem;
align-items: start;
}
@media (max-width: 1024px) {
.feed-layout { grid-template-columns: 1fr; } /* collapse to one column */
.feed-right { display: none; } /* drop the right rail */
}
```
```text
<div class="feed-layout">
<aside class="sidebar-card"> ... </aside> left: navigation/filters (240px)
<div class="feed-main"> ... </div> centre: primary content (fluid)
<aside class="feed-right"> ... </aside> right: stats/context (280px, sticky)
</div>
```
Rules for this layout: the two side columns are `
Three-column app layout (resize the window below 600px to see it collapse, mirroring the real 1024px rule)
Sidebar<aside> 240px
Main content1fr, min-width: 0
Right rail280px, sticky
Single-column card list
A card. --bg-card, --border, --radius-lg, padding 1rem.