Full-Width Layout
By default Holocron caps the page grid at 1200px. The left sidebar, content column, and right sidebar all live inside that constraint.
You can make the layout span the full viewport by overriding a single CSS variable.
Override --grid-max-width
In your
style.css file (see Custom CSS):1234/* style.css */ :root { --grid-max-width: 2600px; }
This pushes the left and right sidebars toward the screen edges. The content column grows to fill the extra space, up to its 720px cap. Any remaining width is distributed as gap between the three columns.
12345678910111213Default (1200px max) ┌────────────────────────────────────────────────────────────────────────────┐ │ ┌───────┐ ┌──────────────┐ ┌───────┐ │ │ │ nav │ │ content │ │ aside │ │ │ └───────┘ └──────────────┘ └───────┘ │ └────────────────────────────────────────────────────────────────────────────┘ Full-width (2600px max) ┌──────────────────────────────────────────────────────────────────────────────────────────┐ │ ┌───────┐ ┌──────────────┐ ┌───────┐ │ │ │ nav │ │ content │ │ aside │ │ │ └───────┘ └──────────────┘ └───────┘ │ └──────────────────────────────────────────────────────────────────────────────────────────┘
How the grid works
Holocron's page grid is controlled by four CSS variables:
| Variable | Default | Description |
--grid-max-width | 1200px | Overall page cap |
--grid-nav-width | 230px | Left sidebar (table of contents) |
--grid-sidebar-width | 230px | Right sidebar (aside content) |
--grid-gap | 60px | Gap between columns |
The content column width is derived automatically:
1content = min(720px, max-width - nav - sidebar - 2 × gap)
This means increasing
--grid-max-width does not make the content column infinitely wide. It grows until it hits the 720px cap, then the extra space becomes gap.Aside height and section spacing
A non-full
<Aside> shares its vertical space with the section it belongs to (the content between two headings). The section row expands to fit whichever is taller: the main content or the aside. If the aside callout is taller than the section text, you will see extra whitespace below the main content.To avoid this, keep aside callouts short and only place them in sections with enough body text to match or exceed the aside height.
True edge-to-edge
If you want the grid to always fill the viewport regardless of screen size, use
100vw:1234/* style.css */ :root { --grid-max-width: 100vw; }
This removes the max-width constraint entirely. The grid stretches on every screen.