Content Layout
Style the content area's own layout skeleton, both the article, TOC, footer grid and the full-width landing layout.
Content renders inside the Content Area box from App Layout. It owns one more level of layout: which of two skeletons a page uses, and where the table of contents and footer sit within it.
Article pages use a two-column grid, with the footer spanning only under the article column:
┌───────────────────────────────────┬──────────────┐
│ │ │
│ Article │ TOC │
│ │ │
├───────────────────────────────────┤ │
│ Footer │ │
└───────────────────────────────────┴──────────────┘Landing pages (layout: landing in frontmatter) use the full width instead, with no TOC column:
┌──────────────────────────────────────────────────────┐
│ │
│ Hero / Sections │
│ │
├──────────────────────────────────────────────────────┤
│ Footer │
└──────────────────────────────────────────────────────┘The TOC column also disappears below the 1280px breakpoint on article pages, leaving just the article and footer stacked full width.
Open the override file
config/styles/content.cssTokens
| Token | What it controls |
|---|---|
--toc-width | Width of the TOC column on article pages. Defaults to 16rem. |
--article-max-width | Maximum width of the article reading column. Also used by the 404 page and the loading skeleton, so they always match the real article's width. |
:root {
--article-max-width: 48rem;
}The not-found page and the shimmering loading placeholder shown while a page loads both reuse --article-max-width above and the global color tokens from Design Tokens. They don't have their own component-specific tokens to override.
Example content.css
A config/styles/content.css that sets every token on this page. Neither is a color, so there's no separate dark-mode variant to set:
:root {
--toc-width: 18rem;
--article-max-width: 48rem;
}