Skip to content
jon@jonwebb-dev : ~ $


col⋅o⋅phon n. An inscription, usually at the end of a book, giving facts about its publication.[1]


This site has been carefully designed with performance and simplicity in mind.

It's an exercise in a conscientious style of web development, aiming to minimize the burden on the user while expressing creativity in the hypertext format.

The resulting site consists entirely of HTML, a CSS stylesheet, and some optimized image assets.


I've tried to write this site so that as many people as possible can use it.

If you encounter any accessibility issues on this site, email me at and I'll do my best to address them.

Static Site Generator

The site is generated with Eleventy, a static site generator for Node.js.

Content is written in Markdown and committed alongside the source code to a git repository.


If you find any Javascript on this site, it's been injected by someone else, because I haven't included any.


The site uses a small, custom stylesheet that I wrote. I borrowed some colors from TailwindCSS because I'm not a designer.

The stylesheet is processed by PurgeCSS, which removes unused selectors on a per-page basis. The resulting minified stylesheet is then inserted inline for each page.

A light and dark color scheme are provided based on system preference.[2]

Animations are disabled if your system preference is for reduced motion.[3]


The site does not use web fonts. Instead, it uses a system font stack based on the fonts your system already has installed.


The site offers images in webp and jpeg format, at several resolutions. Your browser will lazily[4] load the appropriate format and resolution for your browser and screen size[5].

Image pre-processing is performed by the Eleventy Image plugin at build time.

I also wrote a post about the site's image handling.


Site SVG favicon (change your system light/dark preference to see it update).

The site uses a minimal set of 5 favicon assets intended to provide broad browser support while minimizing payload size.[6]

  • SVG icon for modern browsers (with an adaptive light/dark color scheme)
  • 180×180 PNG for iOS home screen shortcuts
  • Web app manifest with 192×192 and 512×512 PNG for Android
  • 32×32 favicon.ico fallback


The site is currently served by Netlify's CDN.

  1. Houghton Mifflin Company. (2000). Colophon. In The American Heritage College Dictionary (3rd ed., p. 276). Houghton Mifflin Company. ↩︎

  2. If your browser supports the prefers-color-scheme CSS media feature. It's supported for ~93% of users as of January, 2022. ↩︎

  3. If your browser supports the prefers-reduced-motion CSS media feature. It's supported for ~94% of users as of January, 2022. ↩︎

  4. If your browser supports the loading=lazy attribute for the <image> HTML element. It's supported for ~75% of users as of January, 2022. ↩︎

  5. If your browser supports the <picture> HTML element. It's supported for ~97% of users as of January, 2022. ↩︎

  6. This favicon strategy is outlined in detail in an excellent article by Andrey Sitnik. ↩︎