Preferences

6 min read (1109 words)

Everything on this site that you can change and have personalized experience.

Source
github.com/idlip/hakimacs (the readme, and the whole thing)

Try everything at once

Each button does exactly what it says. Nothing navigates away, so click freely and watch the page change under you.

Wander My Small Web is a separate feature, not a theme preference: it launches a small-web console that drops you on a random site from a curated list of personal blogs.

Launch Wander Console browse random sites from this network

This paragraph is here on purpose, as something long enough to actually watch change. Cycle the font and the letterforms change under you; cycle the width and the measure gets narrower or wider. The colours come from whichever scheme loaded this visit, and dark/light flips the whole palette without touching the scheme itself.

The cycles

Three settings are cycles: each press advances one step and wraps around at the end. The step you land on is remembered.

Font mode

Four modes, and Mixed is the default for a first visit.

Mode Prose Structure, meta, UI Code
Mixed serif sans mono
Mono mono mono mono
Sans sans sans mono
Serif serif serif mono

Two things never move. Code, verbatim, and preformatted blocks are always monospace, in every mode. And headings always use the display face, outside the cycle entirely.

Content width

Steps: 840px (default), then 100%, 80%, 60%.

840px is a comfortable measure for prose. 100% fills the window, which is useful for wide code blocks and tables. 80% and 60% are proportions of the window rather than fixed widths, so on a very wide screen they can still come out wider than the 840px default.

Dark / light

This flips the variant, not the scheme. If the scheme you are on has both a dark and a light palette, it swaps. If it has only one (Everforest, Monokai, Dracula and Kanagawa are dark-only), nothing pretends to work: the page tells you there is no such variant and opens the scheme search filtered to the mode you asked for, so you can pick one that has it.

Colour schemes

Where they come from

Three different sources, deliberately:

  • Haki is mine, hand-written as CSS.
  • Modus is the built-in default, following Protesilaos Stavrou's Modus themes for Emacs, with both a dark (Vivendi) and a light (Operandi) variant. It is what you get when no scheme is set at all.
  • Everything else comes straight from tinted-theming/schemes, the base16 community collection, unmodified. Twelve of them sit in the menu as presets; the full set of 305 is one search away.

How the whole thing works

Every scheme is just sixteen colours, base00 through base0F, and the entire UI is built from semantic names that point at those sixteen. So --link means "base0D", dates mean "base0A", and swapping a scheme means swapping sixteen values while every rule in the stylesheet keeps working untouched.

That is the reason 305 imported editor themes can drive a website they were never designed for. It also means schemes cost almost nothing: the presets in the menu are plain CSS, and the rest are fetched only when you actually open the picker.

Colours carry consistent meaning, which is worth knowing if you switch schemes a lot: yellow is always dates, cyan is reading time, blue is links.

Random every visit, unless you pin it

By default the scheme is picked at random on every page load. If you find one you like, Pin it and that choice sticks until you unpin. Pinning also works from the modeline at the bottom and from the command palette; all three controls stay in sync.

Open the preset popup from the menu, or open the command palette and type t followed by a space to search all 305 by name. Hovering a scheme in either previews it live on the real page, and moving away puts it back.

The command palette

One dialog does search and every command. Open it by clicking Command palette above, or with x, Ctrl-P, Ctrl-K, or Alt-x (Emacs M-x), whichever your fingers already know.

Type this Get
anything commands and posts together
t then space all 305 colour schemes, by name
# tags

Esc or Ctrl-g closes it. Backspace at an empty prefix goes back to the default list.

Palette shortcut on / off turns the x key off if you need your browser's own x back, or use voice input where a stray letter fires a command. Esc and the other open-palette keys keep working either way. This is WCAG 2.1.4 Character Key Shortcuts.

Reading a post

  • Images click to open full size, and load lazily as you reach them.
  • Code blocks get a copy button on hover, and show their language.
  • Headings get a # anchor on hover, so any section is directly linkable.
  • References are collected automatically from the links in the post and numbered at the end. See Also fills the leftover space with related posts, and only when there is room.
  • The progress bar along the modeline is pure CSS, driven by scroll position with no JavaScript running as you scroll.
  • Comments have no backend at all. The box composes a pre-filled email and hands it to your mail client. Embrace email!

What gets stored

Seven keys in localStorage, no cookies, no analytics, no third-party requests.

Key Holds
emacs-theme dark or light
emacs-scheme-fixed the pinned preset, if you pinned one
emacs-custom-palette a pinned scheme from the 305
emacs-scheme-hint-seen whether the random-scheme note was shown
emacs-font-mode mono, sans, serif or mixed
emacs-width-idx which width step
emacs-keys-off palette shortcut disabled

Clearing site data resets everything to defaults. Nothing here identifies you, and none of it leaves your browser.

How my site is put/designed together

Written down mostly because people ask.

  • No framework, no build step beyond Hugo. Content is Org-mode, rendered by go-org.
  • One stylesheet, in cascade layers, so the responsive rules can win without a specificity fight.
  • Three small scripts, bundled into one deferred file.
  • Your scheme and font mode are applied before the first paint, so there is no flash of the wrong colours on load.
  • prefers-reduced-motion is respected: smooth scrolling and transitions are opt-in on it, never forced.
  • Every interactive thing is reachable by keyboard and has a visible focus ring.

More detail on the stack is on the Colophon page, and the whole source is on GitHub if you would rather just read it.

References

  1. github.com/idlip/hakimacsgithub.com
  2. Wander My Small Web
  3. Launch Wander Console
  4. Modus themesprotesilaos.com
  5. tinted-theming/schemesgithub.com
  6. WCAG 2.1.4 Character Key Shortcutsw3.org
  7. cascade layersdeveloper.mozilla.org
  8. Colophon