Layout Demo#
This is the wide left column at 65%. It holds the main prose content of the page, flowing naturally across multiple lines so you can see the column width.
It can contain anything — lists, links like index, and more.
This is the narrow 35% right column — good for an infobox or sidebar notes.
Column A
Column B
This cell spans all columns — useful for a full-width image or table row.
A standalone image with a quoted title becomes a captioned figure:
Text flows around a :::figure{align="right"} block, the way an article wraps
its media. On phones the float collapses to full width. Use align="left" or
align="center" the same way — and width caps the figure's size.
A :::gallery is a swipeable strip — scroll it horizontally:
The universe has a beginning, but no end. — Okabe quoting Stein
Quotes carry a decorative mark, themeable via the blockquote tokens.
This block is centered — :::center (also :::right and :::justify).
Wide tables scroll horizontally on small screens instead of breaking the layout:
| # | Worldline | Divergence |
|---|---|---|
| 1 | Alpha | 0.337187 |
| 2 | Alpha | 0.409431 |
| 3 | Alpha | 0.456903 |
| 4 | Alpha | 0.523299 |
| 5 | Alpha | 0.523307 |
| 6 | Alpha | 0.571015 |
| 7 | Alpha | 0.571024 |
| 8 | Beta | 1.049809 |
| 9 | Beta | 1.064750 |
| 10 | Beta | 1.129848 |
| 11 | Beta | 1.130205 |
| 12 | Beta | 1.130212 |
| 13 | Steins Gate | 1.048596 |
| 14 | Omega | 3.406288 |
Callouts: :::note, :::tip, :::warning, :::danger — and math renders
too: $E = mc^2$, worldline divergence $d = 1.048596$.
Okabe reaches the Steins Gate worldline. Sorry.
The worldline where SERN wins.
The worldline where the war happens instead.