Colophon

Typography

Headings and display text use Overpass, an open source font family inspired by Highway Gothic. Body text is Atkinson Hyperlegible, another open source family which was designed by the Braille Institute to maximise legibility for people with low vision.

Colour

There are two colour themes, the default light mode and a dark mode that is activated by the user's system preferences (using the prefers-color-scheme media query). I am planning to add a manual in-page toggle at some point.

Accessibility

I intend every page of this site to conform to WCAG 2.2 at Level AA. If you notice any defects or experience any difficulty in using it, please let me know and I'll do my best to fix it.

Netlify's a11y plugin runs some automated checks using Pa11y and axe-core whenever the site is built. It fails the build and blocks deployment if any issues are found. I am however conscious that automated testing on its own is not sufficient.

Content management

This site is fully static, meaning there are no database calls when a page loads. Instead, every page is pre-built and served as a simple HTML file using Eleventy, a brilliantly simple static site generator that supports multiple template languages. I'm using Nunjucks.

Content is managed through Sanity's Content Lake and edited in Sanity Studio. Eleventy’s built-in support for data files makes it easy to pull in data from various sources, including APIs. In this setup, I use the Sanity API to pull the content for my notes.

Hosting and deployment

The site is hosted on Netlify, which is configured to rebuild and deploy automatically whenever a commit is pushed to the main branch in GitHub. Changes to content in Sanity will also trigger a rebuild, by Sanity calling a Netlify build hook.

Analytics

I use Fathom, which is a privacy-first analytics tool. It gives me just enough information to understand how many visitors I'm getting and where they come from, without tracking individual users or relying on cookies.