A guide to writing posts on this site

This post exists as a reference. Copy it to blog/your-slug.html, replace the contents, and link to it from blog.html. The structure is hand-written HTML rather than Markdown, which means a few more characters per post but full control over every element. The trade-off feels right for a research blog, where occasional posts contain equations or interactive elements that Markdown handles awkwardly.

Inline styling is what you'd expect: bold, italic, inline code, and an internal link. External links automatically open in a new tab when you write like this. The lead paragraph above the article uses a slightly larger italic serif; the first line of the first body paragraph is rendered in subtle small caps as an old-print flourish.

Section headings

Use <h2> for main sections and <h3> for sub-sections. The styles are inherited from the prose base, so they match the rest of the site automatically. Don't use <h1> in the body, since that's reserved for the post title in the header.

A sub-section

Sub-sections are useful for breaking down a topic without making the table of contents too noisy. The visual weight steps down naturally: the <h2> rule and the <h3> margin together make the hierarchy obvious without numbering.

Lists

Unordered lists are usually what you want:

• Each bullet should carry one idea.
• The marker color is the site's terracotta accent, which lets bullets feel intentional without screaming for attention.
• Nested lists work, but they rarely look good in prose; consider a sub-section instead.

Ordered lists when sequence or numbering matters:

1. Identify the problem.
2. Write down a candidate Lyapunov function.
3. Check that the derivative is negative definite on the relevant set.
4. If it is, declare victory; otherwise, return to step 2.

Figures with captions

A figure is an image (or video, or diagram) accompanied by a caption. Replace the placeholder below with an actual image saved under images/blog/:

The HTML for a real figure is short:

<figure>
  <img src="../images/blog/diagram.png" alt="A control loop diagram">
  <figcaption>
    <strong>Figure 1.</strong> A simple closed-loop diagram.
  </figcaption>
</figure>

A wider figure

Sometimes a diagram or screenshot needs more horizontal room than the text column allows. Add the figure-wide class and the figure breaks out symmetrically on both sides:

An image gallery

For two or more images side by side, wrap them in a <div class="figure-grid">. The grid is responsive: it stays in two (or more) columns on desktop and collapses to a single column on narrow screens.

Video

Two ways to include video: embed from a service like YouTube or Vimeo, or host the file yourself. Both use the same outer container so they look identical.

Embedded from a service

Wrap the iframe in <div class="video-embed">. The container maintains a 16:9 aspect ratio at any width:

Self-hosted video

For videos you control, drop the file into images/blog/ (or any folder you like) and use a native <video> tag. Modern browsers handle .mp4 and .webm well; provide both if you want maximum compatibility:

Math equations

MathJax is loaded on every blog page. Write inline math between dollar signs: $\dot{x}(t) = A(\rho(t))\, x(t) + B(\rho(t))\, u(t)$ becomes part of the running text. For display equations, use double dollar signs on their own paragraph:

$$ V(x) = x^\top P x, \qquad P = P^\top \succ 0 $$

Both syntaxes accept full LaTeX inside, including environments like aligned, cases, and matrix. For a multi-line aligned block:

$$ \begin{aligned} \dot{V}(x) &= 2 x^\top P\, \dot{x} \\ &= x^\top \big(A^\top P + P A\big)\, x \\ &\leq -\alpha\, \|x\|^2 \end{aligned} $$

Pull quotes

Use a pull quote to highlight a single key sentence, especially when the prose around it is dense:

The hardest part of writing about control theory isn't the mathematics; it's deciding which mathematics to leave out.

— a thought to demonstrate the pull-quote style

A pull quote should be self-contained and quotable on its own. If the reader sees only the pull quote, they should still get something from it.

Callouts

Callouts are short notes set apart from the prose. Use them sparingly — they're attention-grabbing and lose impact when overused. Two variants:

Code blocks

For longer snippets, wrap them in a <pre><code> pair. The block has a quiet background, monospace type at a slightly smaller size than the prose, and horizontal scrolling for long lines:

function lyapunovDerivative(x, A, P) {
  // Returns x' (A'P + PA) x
  const AtP_PA = transpose(A).mul(P).add(P.mul(A));
  return transpose(x).mul(AtP_PA).mul(x);
}

// Sanity check
const x = [1, 2, 3];
const result = lyapunovDerivative(x, A, P);
console.assert(result < 0, "P must satisfy A'P + PA < 0");

Tables

Tables are styled to match the rest of the site, with quiet header rules and a subtle hover state per row:

Footnotes

Footnotes are useful for citations and side remarks that would interrupt the flow if inlined.¹ The mark is a small accent-colored pill linked to the footnote at the bottom of the post.² The footnote text itself sits below a divider after the article body.

Section breaks

Use <hr> for a soft section break when you want a pause that's larger than a paragraph but doesn't deserve a new heading:

The rule above is rendered as three centered asterisks, which is gentler than a solid line. After it, you can keep writing as if the section had no name.

Closing the post

This template covers the elements I expect to need on this blog: text, figures, video, math, code, tables, callouts, pull quotes, and footnotes. If you find yourself wanting something else, add the CSS in assets/css/main.css under the "Blog post" block and document it in this template so you remember it exists.

1. Footnote text goes here. Numbering is manual; renumber if you rearrange. ↩
2. A second footnote. Footnotes can contain links, code, even small bits of math. ↩