This draft exercises every content style available in articles. It is the eyeball
test: run pnpm dev, open it, and confirm each block renders. Authoring guide
lives at docs/content-styles.md. The styles are defined in
shared/content-styles.css (shared by both sites) and scoped to the article, so the
classes below just work in Markdown — write the raw HTML inline.
Drop cap
This paragraph opens with a drop cap. The first
letter is wrapped in <span class="drop_cap">T</span> and floats large down the
left edge of the paragraph. The rest of the sentence wraps around it just as it
would in a print magazine, which is the whole point of the effect.
The impact lede
An impact paragraph is a larger, tighter lede line — use it for the opening sentence of a piece or a pull-quote that should carry weight.
Normal body text resumes here for contrast.
Highlight
You can highlight a run of words inline with a marker, mid-sentence, without breaking the flow. The mark is now a real highlighter — translucent ink with ragged edges, and every other mark tilts the other way so a page of them reads hand-done, not machine-even.
Scribble — handwritten / pencil text
This is an ordinary line, but this bit is scribbled in the margin by hand. The font is a Theme Studio choice — Nanum Pen Script, Caveat or Shantell Sans.
Pencil underline
A point worth a grey pencil underline, drawn by hand rather than the flat default rule.
Callouts — alert, note, box
Alert — amber background. Markdown works inside when blank lines wrap it, so you can use bold, italics, and links here.
Note — blue background. Good for an aside the reader should not miss.
Box — green background. Use it to fence off a worked example or a summary.
Sidebars — bar (right and left)
The body text keeps flowing in the main column while the bar above sits out in the right gutter on a wide viewport. Sidebars are good for definitions, asides, and source notes that should not interrupt the main argument.
More body text so the left bar has something to sit beside. On a narrow screen both bars collapse to normal inline blocks, so they never break the mobile read.
Pop and frame
.frame gives the grey panel; .pop adds the shadow. Put .pop on an image to lift it off the page.Caption
A standalone .caption — small, muted text for crediting or annotating the block above it.
Button
A .button renders a link or <button> as a solid call-to-action.
Extend — wider than the column
Extend breaks this block out wider than the reading column (up to the total width) while staying centred. Use it for a wide table, a code block, or a figure that needs more room than body text.
Alignment — centre and right
A centred heading
Centred text — add center to any block: a heading, a caption, a paragraph.
Combine center with extend for a wide, centred headline:
A wide, centred headline
And right pushes a block to the right edge.
Bleed — full-viewport bands
A bleed runs edge-to-edge across the whole viewport. The .bleed-inner
wrapper re-centres the text back to the reading column. This one uses the
turquoise swatch.
A dark bleed band — dark-grey (or black) flips the text to white.
Footnotes
Here is a claim that needs a source.1 Here is a second one, later in the paragraph, to prove the numbering and back-links work.2