Colophon

d00k.net has existed since 2021 as both a css and html playground for myself and a place to share information I’ve learned with others. Always growing and evolving as I learn.

The core idea this site is built around is that good UI and UX design can be acheived on the web using basic css and html components. No javascript is used as a rule, and the css is written in a minimalist way to avoid waste. This isn’t done specifically with speed in mind (though is a helpful consequence), but rather with keeping the file sizes of the site small. This is important for carbon emissions.

My main goal when designing this site is to have fun. It’s current design reflects this, seeking to create an enjoyable experience both in the frontend and the backend.

I designed the content of this website around a widget system that allows for rich information display and a more engaged user experience. All widgets can be seen together on the site’s test page.

The colourscheme is a simple greyscale range, picked mostly without rules based on what I felt suited each widget. The site’s colourscheme was orignally designed as it’s light mode, with a dark mode being added later as a simple inversion.

Buttons on the site make use of my compacticons icon set, a compact icon set hand crafted to be easily readable even on low-density displays.

Abstract iconography is used for the site’s central identity. Using various ambiguous shapes in place of a logo.

For low-importance images, a reduced colourset based on the site’s colourscheme is used.

For images that hold important information for the topic at hand, the images are converted to jpg with 80% quality using the following script:

mogrify -format jpg \
        -scale 720x \
        -sampling-factor 4:2:0 \
        -strip -quality 80 \
        -interlace line input.jpg

Static Site Generation is handled by Hugo. A basic template is used for all pages, and layouts are done using markdown files. The site’s various content widgets are handled using Hugo’s shortcodes feature.

Admittedly as the site has evolved, how I use Hugo has changed too and now the only feature I really use is the shortcodes. The simplicity it once provided has proven to be inflexible in ways that would make the site easier to write. To this end, I am planning a simple SSG of my own around how I write this site.

A duo of fonts are used across the site, Barlow Extra Bold for all headers and League Spartan Regular for all text. Codeblocks use the default monospace font of your browser.

Fonts are subsetted and optimised automatically using glyphhanger, and are present in Woff and Woff2 formats.