UI glyphs

Authored on a 24×24 grid with a 1.75 stroke, round caps, no fill — one hand throughout. They are drawn below at 28px so the stroke reads as a stroke.

• arrow-up
• arrow-right
• arrow-left
• external
• hash
• search
• pencil
• chevron-right
• check
• moon
• sun
• rss
• email
• ai

The ai mark is the odd one and the argued one: a drawing nib above a plotted line, the line dashed because a machine laid it down. It is not a sparkle. A sparkle says magic; this mark has to say tooling, and it is the same mark at both grains — stamped beside a post’s title for a whole sheet, flagged on the change bar for a single passage.

Brand marks

These are official logotypes from Simple Icons (CC0), so they are filled shapes rather than strokes. They cannot be redrawn on the 24×24 stroke grid without misrepresenting somebody’s mark, which is why they switch the stroke off and carry their own fill.

• github
• gitlab
• codeberg
• stackoverflow
• mastodon
• bluesky
• x
• linkedin
• reddit
• ycombinator
• telegram
• whatsapp

One of those has a second name. ycombinator is what a site writes in socialIcons; hackernews is the key the share row uses for the submit target. They resolve to the same logotype:

• ycombinator
• hackernews

What an unknown name does

Nothing silently. A name with no branch falls through to a generic link glyph, so a typo shows up on the page instead of leaving a hole where an icon should be:

• not-an-icon

That is the whole failure mode, and it is why this page exists as a rendered sheet rather than a list: every name above is really drawn here, so one that stops resolving turns into that link glyph in the open.

To add your own, extend _partials/icon.html with another branch and keep the 24×24 grid.

One profile, up to five views

Under the profile block a landing page can carry about, skills, record, projects and contact. Each renders only when its own key is set, so there is nothing to switch off — set none and you have the plain profile the theme started with.

This demo sets all five in English and deliberately leaves projects out in German. That is not an oversight to fix. A branch nothing builds is a branch nothing checks, so the “view absent” path needed a page that actually omits one, and the German landing page is it.

Two things about the index that are easy to miss:

• Fewer than two views and no index is drawn. A single view simply stands open. An index with one entry is a control that cannot control anything.
• It needs no JavaScript. Without it every view stands open at once and the index entries are plain anchor links to them. With it, one view shows at a time and /#profile-view-skills opens that view directly. Nothing is behind the script that is not also reachable without it.

The same params, drawn two ways

view = "terminal" swaps the drawn index for a working macOS-style shell. Same keys, same content, nothing to migrate — delete the line and you are back. This demo runs one of each so you can put them side by side:

• This site’s landing page — the default, a drawn index under the profile.
• The German landing page — the same theme, the same five keys, rendered as a shell.

Go and use the second one. The shell is not a picture of a shell: commands are typed, the arrow keys walk the history, Tab completes, Ctrl+C and Ctrl+L do what they do, and <command> --json prints the raw data instead of the table. Every command in help is also a button, so a phone reaches all of it without a keyboard, and the three window buttons work — close collapses the window to one line, minimise to its title bar, zoom grows it from 24 rows to 40.

Output arrives a character at a time rather than appearing, and a command you click is typed into the prompt. Any keystroke finishes what is still pending at once, so nothing is ever held behind the effect, and prefers-reduced-motion: reduce turns all of it off.

Turn JavaScript off and the window shows the whole session already run — every command and its output, in order. Nothing is lost and nothing pretends to be interactive. That transcript is also what prints, without the window around it.

What the choice costs

Almost nothing, and in one direction less than nothing: 35-terminal.css is dropped from the stylesheet entirely unless a site asks for the terminal. It is the theme’s only feature that is off by default, so it is the only sheet a site could otherwise be shipping for markup no page of it will ever contain.

This demo is the case that proves it. Because the view is set per language, English and German build different stylesheets — one with the terminal rules, one without. View source on either landing page and compare the filename in the <link>.