Colophon

Since I first started d00k.net in 2021, it has existed as a place of information on the web for both myself and others, as well as an on-going experiment exploring the limits of web design.

Philosophy

The site is built around a core idea that websites can both have good design, and be fast. This is seen in the three fundamentals of d00k.net: design, compatibility and speed. Together, they work to make the site accessible to those using all kinds of devices, connections and tools.

My own personal beliefs are reflected here too, with no javascript or tracking, and all fonts being free, open-source typefaces.

Visual Language

A set, greyscale colourscheme is used across all features. Chosen using the HSL colourspace, with each colour being a step of 5 from the last in lightness.

Abstract iconography is used for the site’s central identity. Using various ambiguous shapes in place of a logo. Iconographic representations of certain topics can be found throughout the site.

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

Generation

Static Site Generation is handled by Hugo. A basic template is used for all pages, and layouts are done using markdown files. A variety of shortcodes were made to handle the content widgets designed for the site, for things like quotes, lists of links, indexes and more. These can be called on in any markdown file.

The CSS file for the site was designed by hand with wide-compatibility in mind. Making sure to use as basic CSS as possible, with backups in place whenever more modern features have been used. A large amount of tedious work was put into optimising the file to be as small as possible, currently sitting at 3.3kBs.

Typography

A duo of fonts are used across the site, Barlow Extra Bold for all headers and League Spartan Regular for all text. Some items on the site use default system fonts, like the navigation menu, back button, footer and codeblocks.

Fonts are subsetted and optimised automatically using glyphhanger, and are present in Woff2, Woff and TTF formats in the CSS file. In case of your browser not supporting custom fonts, the default sans-serif fault is used site-wide.

Further Reading