Originally this site was a HTML and CSS file, a few avatar gifs, a favicon, and a PGP key.
The fox sprite is by Elthen.
mouseover you can pet the fox who jumps for more
onmouseout. The fox does not like to be
clicked! Only the
mouseover gif loops.
<img id="fox" alt="avatar" src="/fox.gif" onmouseover="this.src='/fox-wag.gif'" onmouseout="this.src='/fox-jump.gif'" onclick="this.src='/fox-click.gif'" />
The redesign is built with Hugo to generate a static website.
avocadoom’s talk make it static! is a great primer for new and advanced static website developers. (switch the video to English dubs if you cannot speak Deutsh!)
Dark and Light Mode
The Hugo website added, and was designed around, dark mode.
Xe’s website, christine.website, was a big inspiration for dark colors and displaying links.
Legibility and Readability
There are a lot of typography tweaks in the CSS. Smashing Magazine’s Modern CSS Techniques to Improve Legibility and Piccalilli’s Improve readability of the content of your website has a lot of tips.
Seridy’s An opinionated list of best practices for textual websites was extremely influential and a lot of CSS was borrowed from them.
As this site becomes lived-in and grows I will update this post and share the Hugo code.