21 August 2026 · A kitchen sink for the template · Meta · Typographyedit

Style guide

One page that exercises every element the template can set.

Block elements

Level three

Level four

Level five

Level six

Bold, italic, and bold italic in one run. Struck through stays quiet. The morph target is resampled on every page load, which is the bug.

An inline link, a https://example.com/autolink, and a reference — Bishop.

Everything should be built top-down, except the first time.

Second paragraph inside the same quote.

• Unordered item
• Item with nesting
• Nested one level
  • Nested two levels
• Last item

1. Ordered item
2. Item with nesting
3. Nested ordered
4. Sibling
5. Last item

Point sprite : A single gl.POINTS vertex, discarded outside a unit disc.

Arcball : Quaternion drag mapping screen delta to an axis-angle rotation.

Press Ctrl+C to abort; the program prints built 3 posts, 5 projects → _site/. H₂O, and E = mc². The GPU is saturated.

1

const q = qnorm(qmul(qaxis(0, 1, 0, 0.0022), q));

Editorial

Dual section titles

A muted mono .section-label over a serif h2 — the label owns the field hairline so the pair reads as one composition. Authors can also wrap both in <header class="section-head">.

Code

Read the palette with getComputedStyle(document.documentElement). Token tour: keywords (teal mix + weight), strings (rose), numbers/bools (warn), types/builtins (accent), decorators (ok), comments (mute).

Preferred fence and chip languages: python, json, html, bash, zsh, curl. (curl / zsh / sh colour as bash.) Other langs still work; these are the ones the palette is tuned for.

Inline chips

Bare backticks stay a wash chip — good for paths and ids: src/static/style.css, 0x2982. Opt into the same Pygments tokens with a mock shebang inside the backticks:

• Python: print("hi") + 1
• JSON: {"ok": true, "n": 2}
• HTML: <span class="mark-ok">✓</span>
• Bash: export PORT=8000
• Zsh: print -l ${(k)path}
• Curl: curl -sS -I https://example.com
• Unknown langs drop the marker: foo() → plain foo()

Fences

Python — full token tour:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# -*- coding: utf-8 -*-
"""Module docstring — String.Doc, then every other token the plate cares about."""
from __future__ import annotations

import asyncio
import re
from collections.abc import AsyncIterator, Callable, Mapping
from dataclasses import dataclass, field
from enum import Enum, auto
from pathlib import Path
from typing import ClassVar, Final, Literal, Self, TypeVar, overload

π: Final[float] = 3.141592653589793  # Name + float
HEX, BIN, OCT = 0xDEAD_BEEF, 0b1010_1100, 0o755
COMPLEX = 1.5 + 2j
TRUE, FALSE, NONE = True, False, None  # Keyword.Constant → warn (amber)

T = TypeVar("T")
Kind = Literal["sphere", "torus", "helix"]

@dataclass(slots=True, frozen=True)
class Sample[T]:
    """Generic dataclass — class keyword, Name.Class, decorators."""

    name: str
    payload: T
    tags: tuple[str, ...] = ()
    meta: Mapping[str, object] = field(default_factory=dict)
    _cache: ClassVar[dict[str, Self]] = {}

    def __post_init__(self) -> None:
        if not self.name:  # Operator.Word: not / and / or / in / is
            raise ValueError(f"empty name for {self!r}")

Bash:

1
2
3
4
5
6

#!/usr/bin/env bash
set -euo pipefail
export PORT="${PORT:-8000}"
docker run --rm -p "$PORT:$PORT" -e PORT \
  --entrypoint granian olivares.cl \
  --interface wsgi --host 0.0.0.0 --port "$PORT" server:app

Zsh (same BashLexer as bash / curl):

1
2
3
4

#!/usr/bin/env zsh
typeset -U path
path=(~/.local/bin $path)
print -l ${(k)commands} | rg '^python'

Curl (aliased to bash):

1
2
3
4

curl -sS -X POST 'https://api.example.com/v1/chat' \
  -H 'Accept: application/json' \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"model":"gpt-4.1","messages":[{"role":"user","content":"ping"}]}'

JSON:

1
2
3
4
5
6

{
  "ok": true,
  "status": 200,
  "data": {"id": "msg_01", "tokens": 12},
  "errors": null
}

HTML:

1
2
3
4
5
6

<figure class="plate">
  <img src="/static/images/cover.jpg" alt="Cover" width="960" height="540" />
  <figcaption>
    Caption voice.
  </figcaption>
</figure>

A bare pre / div.highlight hangs half a module. The same three width tiers apply to figures, listings, and tables — one vocabulary, not three:

1
2

# .compact — on the measure, tighter pad
print("measure")

1
2
3

# .plate — listing bay, centred on the column
for shape in ("sphere", "torus", "helix"):
    print(shape, 4200)

1
2

# .fullwidth — listing bay plus the note channel
print("hang-l + reach-r")

Table

The same .compact / .plate / .fullwidth tiers. Narrow tables stay on the measure; five or more columns — or class="plate" — open the listing bay; class="fullwidth" spends the note channel. Column heads are mono micro-labels; the first body cell becomes a stub th[scope="row"] (sticky when a bay scrolls). Column alignment is the colon dance — ------ left, -----: right, :----: centre. On the measure, prose cells may wrap; stubs, heads, and right-aligned (numeric) cells stay one line. Bay tables keep every cell one line and scroll instead. Status marks colour a cell without shouting: ✓ ok, ✗ fail, ✗ warn.

Default (measure)

Bare pipe table — on the prose measure, textbook frame. Points is right-aligned (-----:); Morph target and Status are centred (:----:). Prose in a body cell may wrap; the stub and the numeric column stay one line.

Compact + caption

A caption is ordinary HTML on the table. Dense grids opt into class="compact" — same measure, tighter rhythm.

Plate (listing bay)

Five or more columns auto-open the listing bay (or pass class="plate"). Same hang as figure.plate / code plates; the stub freezes when the bay scrolls.

Fullwidth

class="fullwidth" lifts onto the scroll bay at build — listing hang plus the note channel, same edges as figure.fullwidth / pre.fullwidth.

Media

Four widths share one centre line. A bare figure keeps the measure; a figure.plate opens half a module onto the field listings and section rules already use; a figure.fullwidth also spends the note channel; a figure.margin floats into that channel beside the prose.

A margin figure sits beside this paragraph rather than interrupting it, which is where a picture belongs when it is evidence for a sentence and not the subject of the section. It shares the channel with the sidenotes, so notes and small pictures queue down one column instead of two.

Figure gallery

A figure.plate.gallery is a caption-bound slide stack: one locked bay sized from the first plate (contain-fit — scale hits max width or max height first), every later slide letterboxes into that frame, dots and Prev/Next in the mono voice, and a Hilbert-curve WebGL wipe between contain-fitted plates (instant cut under prefers-reduced-motion). Focus the gallery and use the arrow keys.

Fig. G1 — Rembrandt hatching as the reference plate for the engraving shader.

Fig. G2 — The TexTube plugin card: four sample prompts on a white UI plate.

Fig. G3 — The 1948 Universal Declaration as a born-digital document plate.

An embed has no intrinsic ratio, so .iframe-wrapper carries one (16/9 by default; override with --ratio). YouTube uses a lite facade (data-youtube) — poster until click:

Interactives

Two runtimes. fig3d is the WebGL point-cloud morph; [data-fig] mounts a canvas component from fig-core.js (same plate bay as tables and listings). The lab page holds the full catalog — one of each here is enough to catch a layout or script regression.

Mermaid

A fenced mermaid block becomes figure.mermaid on the listing bay (same hang as bare pre); graphs wider than that bay scroll. Paper nodes, mute outlines, and JetBrains Mono labels — the same plate voice as tables and kbd, not Mermaid’s default/dark themes.

Flowchart

Shapes, a decision, edge labels, and a dashed cluster.

flowchart TB
    subgraph build["build.py"]
        A["markdown"] --> B{"draft?"}
        B -->|no| C["render"]
        B -->|yes| D["skip"]
        C --> E[("_site/")]
    end
    E --> F[["Cloud Run"]]
    F --> G(("CDN"))

Sequence

Actors, notes, loops, and activation.

sequenceDiagram
    participant M as markdown
    participant B as build.py
    participant S as _site/
    M->>B: fence
    activate B
    Note right of B: themeVariables<br/>from :root
    B->>S: figure.mermaid
    deactivate B
    loop prefers-color-scheme
        B-->>S: remount
    end

State

stateDiagram-v2
    [*] --> Source: fence
    Source --> Rendered: mermaid.render
    Rendered --> Source: color-scheme change
    Rendered --> [*]: ok
    Source --> Source: CDN miss

Class

classDiagram
    class Figure {
        +string className
        +render(id, code) svg
    }
    class Theme {
        +paper
        +ink
        +mute
    }
    Figure --> Theme : brandTheme()

Pie

pie showData
    title Tokens on the page
    "accent" : 40
    "mute" : 25
    "ok" : 15
    "warn" : 12
    "fail" : 8

Math

Inline: $\mathcal{L} = -\sum_k y_k \log \hat{y}_k$ with $w_i \in \mathbb{R}^{d}$.

$$ \hat{y} = \sigma\!\left(\sum_{i=1}^{n} w_i x_i + b\right) $$

A Push 3 costs \$2,000 — escaped, so KaTeX leaves it alone.

Footnotes and citations

Hand-written notes use the Markdown footnote form. Point sprites are cheaper than instanced quads.One vertex, one fragment, no index buffer. See fig.js. 

Smarty typography: straight quotes “become curly”, an em dash — like so, a numeric range 30–40, an ellipsis… and it’s got apostrophes.

Bibliographic cites use [@key]. Keys resolve from src/references.bib at build time — the same file the README lists. On a wide viewport the note rides the margin; below 1152px the marker jumps to the Notes list at the end of the page. Bishop remains the reference for the classical view Bishop, C. M. & Nasrabadi, N. M. Pattern recognition and machine learning. Springer. (2006) , and the deep-learning successor updates it Goodfellow, I., Bengio, Y. & Courville, A. Deep learning. MIT press. (2016) .

Murphy’s introduction is the probabilistic counterpart Murphy, K. P. Probabilistic machine learning: an introduction. MIT press. (2022) .

1
2
3
4
5
6

@book{bishop2006pattern,
  author    = {Bishop, Christopher M and Nasrabadi, Nasser M},
  publisher = {Springer},
  title     = {Pattern recognition and machine learning},
  year      = {2006}
}

Dates

Shipped 21 August 2026 — relative by default; hover for the exact date.