Website Design
Original Website
Originally this site was a HTML and CSS file, a few avatar gifs, a favicon, and a PGP key.
Fox Avatar
The fox sprite is by Elthen.
On 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'"
/>
Hugo Redesign
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.
Design Future
As this site becomes lived-in and grows I will update this post and share the Hugo code.