Antoine Kalmbach

Design of this site

This page describes the design of this website. If you come here often you might notice that every now and then something changes. That is normal, because I really enjoy tweaking the smallest of things here, be it adjusting margins, adding padding, changing fonts, and so on. It’s a neverending project, I can’t tell you if the site as you see now will be how it will look like in five years. But here’s a rough idea how it looks like at the time of writing.

Most people will ask, “what design?”, as you’re greeted with the browser default font, probably a serif or sans-serif font, no colors beside the links, barely any borders or visual frills. This is by design, or the design: the design emphasizes this site’s focus on content. I want the text to be as readable and distraction-free as possible. To this end,

• the content is center-aligned and constrained to a maximum width on large screens,
• the font is black-on-white at about 16px of height,
• the navigation is at the top of the page, and also aligned to the center,
• there are no colours or background highlights unless absolutely necessary.

Part of the reason why I don’t specify any extra fonts or the like is to make sure the site works on any device possible. I also happen to enjoy browsing “unstyled” pages because it puts emphasis on content over form, although some styling is necessary to make this enjoyable. There is no need to design for responsiveness when the site mostly just text.

The stylesheet is a couple hundred lines of SCSS and mostly just deals with the formating of the navbar and images, and removing some built-in ugliness of the default browser styles, e.g., by thinning out horizontal rules to a single line.

I plan for the central index at the front page to evolve in a tree-like structure of the whole site itself, but as the content outside the blog is rather thin, it’s just a link to, well, this section.