Blog refresh, 4.x

— 374 words

This article is part of a series:

Website 2021

Article regarding the 2021 edition of my personal website and blog.

  1. Color me swatches
  2. Blog refresh, 4.x
  3. New website online (2021 edition)
  4. Blog update: search function online
  5. Kitchen sink
  6. Blog update: simplified settings and more
  7. Blog improvements: headings and settings

*slaps stylesheet* This front-end has many years on it, but a lick of paint and it's good to go.

I've wanted to reorganize the stylesheet's CSS layers for a while, and to no one's surprise, that turned into a major refactor.

I've released the changes; see the highlights below.

Functional changes

  • Layout rebuild: More flexibility with fewer HTML hacks.
  • Regular font size: The previous text size did not respect browser settings, but now it does. Zoom in to restore the old, larger text size.
  • No duplicate home link: The home link that appeared on sticky headers has been removed; the header logo is now part of the sticky area.
  • Settings overhaul: Some breaking changes; more on that in the next section.
  • New setting: override content width; mostly useful on large screens.
  • New setting: override code indent tab size (NB. not all code examples currently use tab indents.)
  • Form help text: Form help texts now correctly link to their respective form control.
  • Blog search: The blog search option no longer throws a 404 page when there are no results.
  • Copy changes: Textual tweaks on all pages.

Breaking changes

Settings got a complete overhaul, breaking existing preferences.

All setting keys now use the settings. prefix in local storage, meaning that all existing data is now invalid.

Please open settings and save your preferences again.

Optionally, you can remove or replace the old key-value pairs in local storage:

  1. code-wrap; replaced by settings.codeWrap.
  2. sticky-navigation; replaced by settings.stickyHeader.
  3. theme; replaced by settings.theme.

Wrap-up

Those old CSS layers were rough, badly sorted, and not up to the same quality as some of my other sites. The new version is way more structured and also more flexible.

I also love that the styles are still mostly pure CSS. Surely, I use Rollup and PostCSS to compile all rules to a single stylesheet, but that hardly alters the rules themselves.

CSS without the front-end frameworks (looking at you, Tailwind) is so incredibly powerful, and it keeps growing with one mindblowing feature after another.

I've already spotted several ways CSS container style queries could make things even better, but sadly, we're far from baseline on that feature. One day. 🤞🏻

(One always needs to leave something to refactor, eh?)

Enjoy the site refresh!