Specimen: anatomy of an entry

This entry is a specimen. It shows every element a Journal entry can use, so the design can be reviewed before the real writeups arrive, and so the browser tests have one page that exercises all of it. It is a draft, and drafts never reach the live site.

Text

Body text is set in Taz Read, with a measure short enough to follow without losing the line. Emphasis and strong emphasis stay quiet. Inline code, like check-inline.mjs, sits on the raised surface. Links are underlined and turn red on hover.

A footnote looks like this.¹

Code

Code is highlighted at build time into classes, so no style attribute reaches the page. Literals, comments and definitions get colour; keywords keep the text colour, because their shape already marks them.

def contrast(fg: str, bg: str) -> float:
    """WCAG 2.2 contrast ratio between two #rrggbb colours."""

    def luminance(colour: str) -> float:
        channel = lambda c: c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
        r, g, b = (channel(int(colour[i : i + 2], 16) / 255) for i in (1, 3, 5))
        return 0.2126 * r + 0.7152 * g + 0.0722 * b

    hi, lo = sorted((luminance(fg), luminance(bg)), reverse=True)
    return (hi + 0.05) / (lo + 0.05)


print(round(contrast("#e6ebf1", "#07070a"), 2))  # soul on void: 16.78

Shell sessions

$ npm run build
$ npm run gates

Diffs

The signs mark added and removed lines. The copy button leaves them out.

- base-uri 'none'; object-src 'none'; upgrade-insecure-requests
+ base-uri 'none'; object-src 'none'

Long lines

A line wider than the column scrolls inside its block instead of widening the page.

Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; manifest-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; object-src 'none'; require-trusted-types-for 'script'; trusted-types 'none'

Lists and quotes

• An unordered list.
• A second item, with a nested list:
  • one level down.

1. An ordered list.
2. Its second item.

A quotation, set off by a rule rather than a box.

Tables

Token	Value	Used for
--t-spatial	327 ms	anything that moves or resizes
--t-effect	150 ms	colour and opacity
--t-exit	120 ms	overlays closing

Figures

Images live beside the entry’s Markdown file and are converted to WebP at build.

The flag

A flag in the front matter renders at the end of the entry, behind the Dream Nail, and stays hidden until the reader opens it.

Footnotes

1. Footnotes collect at the end of the entry. ↩