/style

Table of contents

Palette

Typography

Body text is set in IBM Plex Mono, titles and small labels in Press Start 2P. This paragraph is long enough to wrap a few times, so line height and measure can be judged at a glance on both a phone and a wide screen.

Inline elements

A link, bold, italic, both, strikethrough, inline code, Ctrl + C, DMG, highlighted text, H₂O and E = mc². A footnote reference sits at the end of this sentence.¹

Lists

• An unordered list
• With a second item
  • And a nested one
  • With a sibling

1. An ordered list
2. With a second item
   1. And a nested one

• A finished task
• An open task

Quotes and callouts

A plain blockquote. It can run over several lines and still read as one quotation.

Table

Code

type Greeting = { name: string };

export function hello({ name }: Greeting) {
  const message = `Hello, ${name}!`; 
  console.log(message);
}src/hello.ts

function boot() {
  return "Nintendo"; 
  return "Nintendo®"; 
}

pnpm install
pnpm run build

Long lines scroll sideways instead of wrapping:

pnpm exec astro build && pnpm exec pagefind --site dist --output-subdir pagefind --glob "**/*.html"

Collapsible

Image

Until an image arrives a pixel block blinks in its place, and a cross marks one that never does:

Diagram

Share card

The preview shown when a page is shared. Posts get their own, with the post title on the screen.

Maps

Before Leaflet loads, and if it never does:

Components

Post page

The parts below every post. The back to top button is live on this page too, once you scroll.