col•o•phon
This site should hopefully validate as XHTML5. There is also a chance that it won’t. The temptation to try something new is always present, and what better site to screw up than your own … .
My site isn’t large, edited by hundreds of people, or populated by thousands of chunks of data. Was there a content management system that was open source, customizable, fast, and well-supported? Most important, could the content be easily extracted from the delivery system? The next time a move beckoned, I wanted to pick up my data and move on without having to weed through hundreds of database entries.
Astro
The first port of call was Grav, an open source flat-file content management system originally developed by Trilby Media. Grav uses Markdown as the primary text formatting method. This added simplicity since most of the writing I do is in Markdown already. Billed as a flat-file CMS, each page on the site would be held in a folder or set of folders of standalone plain text files, written in Markdown, and images, if they are part of the content. You can remove and add blocks of content by dragging them in or out of the folder structure. I built a way and had a website. But Grav also relied heavily on Twig a PHP templating engine, which never lodged in my brain. Come back in a few months with some ideas for development, and the remembering curve is too steep. What to do?
Enter Astro, a web framework that would let me build a static site with most of the content still held in Markdown files. Astro can be many things, but a core principle is a server-first approach. The processing is done at build time, and the website is made up of static (prebuilt) web pages. Do some development, add some content, build the site, and push the altered files to the server. There was a learning curve, but porting the content over was trivial.
What, no JavaScript?
No JavaScript. Okay maybe a little. As an intellectual exercise, I kept things as simple as I could. Ten years ago, if you wanted animation or transitions, you needed to reach into your JavaScript tool bag. Today, it is possible to just use CSS on your HTML.
No hamburger
At least for now, there is no collapsing hamburger-style (☰) navigational widget at the top of each page, with a list of all the galleries or posts appearing at the click or hover of a hamburger icon. You can create these effects in CSS, but I want readers to slow down and discover the content in a staged fashion.
Responding to the screen
I tried to keep the media queries lean, and I have played with flexbox, grid and clamp() to enable things to appear reasonably well on large and small screens using the same style definitions. This is a work in progress; more fiddling around will be done, I am sure.
Typefaces
The serif typeface used for headings and some subheadings are in Cyan, a typeface derived from the Roman square capitals on the inscription at the base of Trajan’s Column. Robbie de Villiers, who started Wilton Foundry, designed letters with both upper and lower case variations. Lower case letters are not common in the other variations of Trajan that exist.
The san-serif headlines and details are set in Atkinson Hyperlegible, developed by the Braille Institute. Designed with low vision readers is mind, Atkinson Hyperlegible differentiates common misinterpreted letters and numbers using various design techniques.This leads to a grotesque sans-serif which is full of character.
Body copy is set in Palatino or failing that Times New Roman or whatever typeface with serifs you have set as default on your viewing device.