A field guide to this stylesheet

This page is both a reference and a test. It shows each element the stylesheet supports, so you can see how they look together and check that nothing has broken. The last section explains how to add a new post.

Inline text#

Body text can carry emphasis, strong importance, links, inline code, keyboard shortcuts like Ctrl + C, highlighted passages and abbreviations such as HTML. Footnotes look like this.¹ Dates, tables and list numbers switch to tabular figures, so digits line up in columns.

Headings#

Second-level headings divide a post into sections. Hover over one and a # appears, linking straight to that section.

A third-level heading#

Use these for subsections. They are a little bolder and smaller than the level above.

A fourth-level heading

The smallest level switches to small, spaced capitals in the sans, for labelling rather than structuring.

Lists#

• Unordered lists use small vermilion bullets.
• Items can wrap across several lines without losing their alignment, which matters more than it sounds once a list item runs on.
  • They can also nest.
• A third item, for rhythm.

1. Ordered lists number in the sans, in a muted tone.
2. The numbers are tabular, so they line up once the list passes nine items.
3. Use them when sequence matters.

Quotations#

Typography exists to honor content.

A pull quote lifts a line out of the text to give it room on its own:

Plain files are easy to read, easy to back up, and will still open long after the tooling has moved on.

Code#

Code blocks are set in Plex Mono on a slightly sunken background. They scroll sideways rather than wrapping, and an optional data-lang attribute labels the language in the corner. There is no highlighting library, but a few tok-* classes colour keywords, strings, comments, functions and numbers when you want them.

# Serve the blog straight from disk
server {
    server_name bv-jp.lee65535.dev;
    root        /var/www/bv-jp.lee65535.dev;
    index       index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

const readingTime = (text, wpm = 230) =>
  Math.max(1, Math.round(text.split(/\s+/).length / wpm));

console.log(`${readingTime(post)} min read`);

Tables#

Tables switch to the sans with tabular figures, so columns of numbers line up. Wrap them in <div class="table-wrap"> so wide tables scroll on small screens.

Figures#

Figures take an image or an inline SVG and a caption. Add the wide class to let a figure extend past the text column on larger screens. Inline SVG can use the site’s colour variables, so diagrams follow the light and dark themes automatically.

Asides#

---

A horizontal rule, drawn as a small asterism above, marks a change of scene without starting a new section.

Adding a new post#

The site has no generator, so publishing means editing a few files:

1. Copy an existing post folder, for example posts/hello-world/, to posts/your-slug/.
2. In the copy’s index.html, update the <title>, the description and og: meta tags, the canonical URL, the heading, the dek, the date, and the content inside <div class="prose">.
3. Add an <li> for the post at the top of the list in /index.html.
4. Add an <item> to /feed.xml.
5. Fix the Older and Newer links at the bottom of the new post and the post before it.

cd /var/www/bv-jp.lee65535.dev
cp -r posts/hello-world posts/my-new-post
$EDITOR posts/my-new-post/index.html index.html feed.xml

That’s the whole workflow. Once the files are saved, the post is live.

1. Footnotes collect at the end of a post. The arrow jumps back to where you were reading. ↩︎