Colophon
A colophon can often be found in a book, usually at the very beginning or the very end, and contains information about the publisher, place of printing, and sometimes some technical detail such as font typeface and sizing. Although they were first used in a publishing context, you can now find similar pieces of printed metadata in lots of different places, including wine labels.
These days, they are also found on websites, where they often contain information about how the site was built, or what's important to the owner, or general musings on website design and development. Think of them as an "about the site" page, as opposed to an "about the person" page. I always find them interesting; here is mine.
Tools and technology
Depending on who you ask, I am either an old-school wizard, a retro hipster, or a stubborn idiot, and so pretty much all the code for this site was hand-written in EditPlus, which is a text editor I've been using for 25+ years. These days I'm starting new projects in VS Code with Claude working alongside.
Behind the scenes is a lightweight framework I wrote in PHP, which takes care of session management, authentication, and pulling together the right template and content for any given page. Static pages are held in flat files for speed of access; my wine collection and the metadata about blog posts is stored in a Maria database. Everything sits on an Ubuntu server running Apache.
Markup, stylesheets and scripts
I like writing valid HTML and CSS, and I check my pages and stylesheets using the W3C validators.
I want to keep things as light as possible and so there is minimal Javascript on this site. I use it for the burger menu which displays on smaller-width windows, and for my wine cellar pages to hold filter states in local storage. The only external library I use is Prism, which I include on pages where I have syntax highlighting on code examples.
Typography
The principal font used on this site is Inter, with Roboto Mono for monospaced text. I set font sizes and line spacing in rem and so the site should honour your system preferences and browser zoom level. I use font weights of 400 for normal text, 600 for sub-headings, and 700 for the page heading.
Colours
As you'll see I use a very minimalist colour palette. The background is white #FFFFFF, most text is dark grey #444444, with mid grey #888888 for the footer and light grey #AAAAAA for inactive or placeholder text. Links have a very subtle hover effect where they turn black #000000. Form buttons are #F0F0F0 (non-clickable or de-selected) or #F6F6FF (clickable or selected). I try and make up for this lack of variety with photos and images here and there.