High contrast design
A simpler website design.
A new site design! Or better, a newish, tweaked design in which I removed some cruft: 205 deleted lines to be exact, or to quote Mies van der Rohe:
“less is more”
Design changes
- The new color will be the most obvious. The primary text color changed from ■ #5e81ac to ■ #00004d, a darker shade of blue. The lighter blue lacked contrast and might have been hard to read for some.
- The font changed to CSS’s system-ui, which takes glyphs from the default user interface font on each platform. I suppose OS designers know best what fonts are the most readable. This change is what triggered this redesign. No more custom fonts. Less stuff to download = faster loading and improved integration with the OS.
- The RSS feed now uses the same CSS stylesheet as the rest of the site. I lazily copied a stylesheet from github earlier with a different feel. Using the same styles makes the feed more in line with the rest of the site. The feed got its own RSS icon in the header and a link in the footer (for people like myself who use the browser’s built-in search).
- I brought back the ‘:visited’ link color from the 90ies! It doesn’t look as nice, but it sure is handy to know what pages you visited before. I should never have removed it.
- Code blocks now have a background and border, visually separating them from the rest of the content.
- The dark theme got a little love. I was never satisfied with the dark version, and even now it doesn’t sit as well as the light one, it’s not easy to design a good dark theme. The code blocks have a dark theme as well, the lack of one stood out like a sore thumb. Images are toned down and darkened in CSS for the dark version.
- The RSS and github icon are now inline SVG’s, meaning I can change their color to match the theme in CSS.
Content changes
- I moved the title of the website to the top, not sure why I thought it was clever to hide the title in the footer. The subheadings are left instead of center aligned.
- Articles on the index page are grouped per year. This makes it easier to find my more recent posts, given my low publishing frequency.
- The current page is no longer linked in the top navigation bar, as it should be.
- Renamed the ‘/policies’ page to ‘/legal’. I hope this does make sense?
Technical changes
- I dropped Sass in favor of plain old CSS. CSS supports variables, so the only difference between the light and the dark theme are a few variables.
- I did not configure Apache to serve my website over HTTP/2, oops! A single line config change later, and it’s fixed.
The homepage of the old design clocked in at 199 KB in total, the new one at 64 KB, an improvement of 103%. In short: back to basics. A lighter, simpler, more readable design. What do you think?