Website Design

Original Website

Originally this site was a HTML and CSS file, a few avatar gifs, a favicon, and a PGP key.

original website

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.


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.

dark mode

light mode

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.