Building This Site

This site is built for writing that depends on citation, qualification, and structured aside — a CV and this colophon today, longer-form work ahead. The design problem was how to make it read like a typeset policy brief, respect the reader’s attention, and work without complicated dependencies. Three traditions shaped the answer:

• Academic print typography
• Japanese spatial philosophy
• The first-person ethos of the early personal web

They constrain each other. Once you commit to all three, the rest follows.

Design Philosophy

The Japanese aesthetic concepts behind this site are ma (間), kanso (簡素), and shibui (渋い). None is a synonym for ‘minimalism,’ a word that has lost most of its meaning in web design.¹

Ma is negative space as compositional element rather than leftover space. The page is allowed to breathe — sections separated by enough rest that the eye registers each as a unit, body text at 1.7 line height, the reading column held to 75 characters.²

Kanso is the elimination of everything non-essential. No frameworks. The build is a single Hugo binary. No hamburger menu — the navigation has few items and they just stack on mobile. The entire site runs on one CSS file and one JavaScript file, and the JavaScript is optional. Everything earns its place or it goes.

Shibui is understated depth that reveals itself on closer inspection. Hover over a heading and an anchor link fades in. Hover over a footnote reference and a preview tooltip surfaces. Toggle dark mode and the warm parchment palette inverts to dark umber without losing its character. None of it announces itself.

The academic print tradition is the typographic buttress. Source Serif for body and headings, an editorial serif³ designed for sustained reading. Small-caps and letter-spacing on navigation labels. Horizontal rules as structural markers rather than decoration. Footnotes given the same design consideration as the body.

And the early web provides the underlying values: a single column, content-first, every page reachable by URL, no intermediary between writing and reader.

It avoids what the contemporary web has converged on — SaaS landing pages, gradient hero sections, card grids, scroll-jacking, stock photography, the homogenized output of generative design tools, and the mass-market templates that aggregate them.

The Stack

The entire site runs on four things:

• Hugo Extended — a single Go binary. No Node.js, no package.json, no bundler config. Markdown to HTML with Go templates. That’s the build step.
• Vanilla CSS — one file, every design token captured as a custom property. No preprocessor, no utility classes.
• Vanilla JS — one file, loaded with defer. Optional. If it fails to load, nothing breaks.
• Cloudflare Pages — push to main, site is live in under 30 seconds.

Each piece is small enough to hold in your head. The complexity budget goes to the writing.

Color and Typography

The background is #F7F5F0, a warm parchment. Warm tones read as documents, cool tones as applications. The palette has no cool grays. Text is #1C1917, a warm near-black against the background at 15:1 contrast, well past WCAG AAA.⁴

One accent color: #2D3A6E, an indigo with a slight violet undertone. A deliberate reference to aizome (藍染め), the Japanese tradition of indigo dyeing — a deep, sober blue that has signified craftsmanship and quiet authority in Japanese textiles for centuries.⁵ One accent is enough.

:root {
  --color-bg:         #F7F5F0;
  --color-text:       #1C1917;
  --color-accent:     #2D3A6E;
  --color-footnote-bg: #F0EDE8;
  /* ... 8 more tokens define the full palette */
}

Dark mode redefines the same custom properties, still no cool grays.

[data-theme="dark"] {
  --color-bg:         #1C1A17;
  --color-text:       #F0EDEA;
  --color-accent:     #8DB4F7;
  --color-footnote-bg: #262420;
}

The type scale follows a Major Third ratio (1.25), stepping from 0.8rem for footnotes and metadata up to 2.441rem for page titles. Body text is 1rem on mobile, bumping to 1.125rem at 768px. Subtle, but it makes a difference for sustained reading.

Serif (Source Serif 4) for body and headings. Sans-serif (Inter) appears only on UI chrome like nav labels, dates, and tag pills. Everything the reader actually reads is serif.

Footnotes

The implementation is three layers of progressive enhancement.⁶ Each layer adds something, but removing any layer leaves everything below it intact.

Layer 1: Semantic HTML (No JavaScript Required)

Hugo’s Goldmark renders [^n] references into proper HTML — <sup> references in the body and an ordered list of footnotes at the section’s end. Backlinks carry aria-label="Return to text". This is the baseline. It works in any browser, with any screen reader, with JavaScript disabled.

Layer 2: Position-Aware Navigation

The browser’s default footnote behavior is a harsh jump. The footnote snaps to the viewport top, you lose your place, and clicking the backref snaps you back to roughly where you were. Functional, but disorienting. It’s the kind of interaction that works with paper, where your thumb holds the page, but fails on screen, where context evaporates the moment you scroll.

The enhancement replaces this. Click a footnote reference and the script saves your exact viewport offset — where on screen the reference was sitting — then scrolls the footnote to 45% down the viewport rather than the top. The footnote <li> gets a persistent highlight so you can see which note you’re reading.

footnoteOffsets[sup.id] = sup.getBoundingClientRect().top;

var midViewport = window.innerHeight * 0.45;
var footnoteTop = footnote.getBoundingClientRect().top + window.scrollY;
window.scrollTo(0, Math.min(footnoteTop - midViewport, maxScroll));

Click the backref to return and the script restores your original viewport position. The reference reappears at exactly the spot on screen where it was before you clicked. The persistent highlight clears, and the source paragraph receives a fade-highlight, a warm background that holds for 40% of 3.5 seconds, then fades to transparent. Gentle orientation that says You were here.

If the reader scrolled to the footnotes manually rather than clicking, there’s no saved offset to restore, so the script falls back to the same 45% positioning. Consistent behavior regardless of how you got there.

Layer 3: Hover Preview Tooltips

On desktop, hovering over a footnote reference surfaces a tooltip with the footnote text.⁷ The tooltip is a cloned copy of the footnote content with the backref stripped; links inside it stay clickable, and a short grace period keeps the tooltip open while the cursor moves into it. Positioned 8px below the reference, horizontally centered, announced to screen readers via role="tooltip".

On mobile, tooltips cap at calc(100vw - 2rem) to avoid horizontal overflow, and the hover interaction is absent on touch devices — the click behavior from Layer 2 takes over.

The CSS

Footnote references are styled as subtle pills — accent color with a translucent wash at 12% opacity:

sup a.footnote-ref {
  font-family: var(--font-ui);
  font-size: 0.7em;
  font-weight: 600;
  color: var(--color-accent);
  background-color: var(--color-accent-wash);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

The return animation uses a CSS keyframe that holds before fading — the hold period is what makes it feel like orientation rather than decoration:

@keyframes footnote-fade {
  0%, 40% { background-color: var(--color-footnote-bg); }
  100%    { background-color: transparent; }
}

Progressive Enhancement

Every JavaScript enhancement on this site follows the same principle: additive, never required. The site without JavaScript is the site.

Heading anchor links — # symbols fade in on hover, providing shareable deep links. Without JS, headings are still headings.

Theme toggle — respects prefers-color-scheme by default, allows manual override persisted in localStorage. Without JS, the site follows your system preference. You lose the toggle, not the theming.

Reading progress bar — a 2px indigo line at the top of article pages, marked aria-hidden. Without JS, it’s simply not there.

External link arrows — pure CSS ::after pseudo-elements append a ↗ to any link leaving the site. Hidden on mobile. No JavaScript involved.

All transitions and animations respect prefers-reduced-motion: reduce.

Accessibility as Design

The site treats accessibility as a fundamental rather than a compliance layer. It applies before anything else — the same way ma and kanso do.⁸

The first focusable element on every page is a skip-to-content link — visually hidden until it receives focus, then prominent in the accent color. Semantic HTML throughout: <header>, <nav>, <main>, <article>, <footer>. Heading hierarchy never skips levels. Focus indicators are a 2px indigo outline with a 3px offset — visible, intentional, not the browser default.

The site achieves Lighthouse 100 across desktop audits and on accessibility, best-practices, and SEO on mobile. Mobile performance sits at 98 — a 2.4s Largest Contentful Paint just past the 2.5s threshold under Lighthouse’s simulated throttling.