OVERHEAD

Heading 1

Heading levels are offset by two, such that <h1> is now <h3>, to avoid duplicate <h1> elements in the page. Also, headings which are direct siblings of each other have less separation between them, for example:

Heading 2

Heading 3

Text readability is prioritised wherever possible, leading to the following styling:

• Maximum --article-width: ~80ch.
• Minimum font-size: 15px.
• line-height: 1.7.
  • Headings and other height-constrained elements use line-height: 1.5.
• List item relationships, whether it’s a parent or sibling relation, are clearly differentiated using spacing.
  • Horizontal spacing (the left gap) increases with viewport width and, when the <article> becomes narrow, the list items are indented.

Blockquotes react similarly to --article-width, with the left border becoming indented as the width narrows, which is controlled with a negative margin-inline value through the --gap-offset variable.

Blockquotes become indented with each nesting.

Additionally, a glow effect on :hover & :active is present, along with box-shadow on relevant elements (e.g. monospace).

Moreover, paragraphs have consistent vertical spacing, identical to what they’d have if they were standalone paragraphs, which is demonstrated here:

Multiple paragraphs within the same blockquote…

…Such as these two lines.

Paragraphs in different nestings of blockquotes, like this one.

And, paragraphs in adjacent blockquotes…

Like these.

Additionally, specialised “callout” blockquotes such as:

Tips…

Notes…

Syntax descriptions…

Important notices…

Caution notices…

And warning notices each have their own prefixes controlled via CSS.

Heading 4

Various inline elements are available, for example: Italic, bold, code, samp, kbd, var, abbreviations, links, as well as more specialised semantic elements like:

• Keyboard shortcuts: CTRL+Z.
• Echoed inputs: Unknown argument: command --notathing. Try command --help.
• Navigation instructions: File⇒New.

Figure elements come in a handful of forms, each for a different purpose, and provide the necessary semantic information for screen readers. Firstly, there’s figure.img:

Where appropriate, the title, author, and license of the image are included, with titled links to the relevant sources. Images that fail to load, most likely because the user agent doesn’t support AVIF, will contain the following error message:

Next, there’s a generic <pre> element…

They have a line-height of 1.54, take advantage of available horizontal space like figure.img elements do, and are intended to be used as codeblocks.

…as well as captioned <pre> elements through figure.pre:

figure { margin-block: var(--padding); }

pre {
	margin-block: var(--padding);
	margin-inline: calc( var(--gap-offset) - var(--border-width) );
	border: var(--full-bg) solid var(--border-width);
	border-radius: var(--radius);
	padding: var(--padding);
	line-height: 1.54;
	white-space: pre-wrap;
	transition: background-color var(--long-time) ease-in;
}

pre:is(:hover, :focus) {
	background: var(--full-bg);
	transition: background-color var(--short-time) ease-out;
}

figure.pre { margin-inline: calc( var(--gap-offset) - var(--border-width) ); }

figure.pre pre {
	margin: 0;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

figure.pre figcaption {
	border: var(--full-bg) solid var(--border-width);
	border-block-end: none;
	border-start-start-radius: var(--radius);
	border-start-end-radius: var(--radius);
	padding-inline: min( var(--padding), var(--radius) );
}

Hit F12 to see how --gap-offset is calculated, or read the Styling with style blog post.

There’s also a figure.quote:

The visual order is flipped with flex-direction: column-reverse, so that the user or author name is shown above the quote itself. It also directly borrows the styling of normal <blockquote> elements, rather than copying the styling of the other <figure> elements.

As a bonus, there’s also an <audio> element. The element below doesn’t point to any audio file; it’s just for demonstration purposes:

And, for now, that’s all OVERHEAD has to offer! If you want more information, head to the About page.