Qubyte Codes

When I originally built this blog, I gave it a very simple no nonsense theme. One colour (beige) for the background and black for text and the odd horizontal rule. After a couple of minor iterations I added a sticky navigation bar (in CSS, no JS).

To be frank though, it looked dated from the start. The rules I used were mostly borrowed from my days as an academic. It lacked playfulness, so I decided to revisit it. While the style is still a work in progress, I've published some changes, and this post is about those.

I took this as an opportunity to overhaul my CSS tooling along with the style. I switched from clean-css to PostCSS with import, cssnext, and cssnano plugins. These do the import inlining and minification I got from clean-css, but also allowed me to compile out some calc custom properties the style overhaul introduces. To make full use of CSS custom properties as variables, I turned off CSS compilation while in development mode.

For the palette, I opted to use HSL with CSS custom properties for the the individual parameters, and calc to apply offsets to these base value for derived colours. PostCSS compiles all this out for production, but during development they can be tweaked in the browser with no compilation. This approach was inspired by a recent post by Rob Weychert on colours for his blog, but I decided to stick with CSS rather than move to Sass.

The result doesn't appear to be a large departure from what was there before. I've brightened the background colour, added distinct colour to the navigation bar and made it span the width of the page, removed text justification, and lightened text to a blue complimentary to the background. The look as been described as Battenberg chic, which I rather like! If you'd like to compare, the previous style can be seen on the Wayback Machine.

Here are the custom properties at the time of writing:

:root {
  --base-background-hue: 45;
  --base-background-sat: 100%;
  --base-background-lum: 90%;

  --base-foreground-hue: calc(var(--base-background-hue) + 180);
  --base-foreground-sat: 100%;
  --base-foreground-lum: 30%;

  --background-color-main: hsl(
    var(--base-background-hue),
    var(--base-background-sat),
    var(--base-background-lum)
  );

  --background-color-alt: hsl(
    calc(var(--base-background-hue) - 30),
    var(--base-background-sat),
    var(--base-background-lum)
  );

  --standout-color-main: hsl(
    var(--base-foreground-hue),
    var(--base-foreground-sat),
    var(--base-foreground-lum)
  );
}

Where --background-color-main is the background colour of the body, --background-color-alt is the background colour of the navigation bar (and probably other things later), and --standout-color-main is the colour of the text.

I'm looking forward to CSS color module level 4, which will introduce color-mod to obtain one colour based on another (I found out about this via Charlotte Jackson's blog). For example, the background colours could be defined much more tersely as

:root {
  --background-color-main: hsl(45, 100%, 90%);
  --background-color-alt: color-mod(var(--background-color-main) hue(-30));
}

so there would be less need for separate values for hue, saturation, and lightness. I could use it now since a PostCSS plugin can compile it out, but then I lose the ability to adjust the theme in development without compilation. I prefer to avoid using syntax which isn't ratified yet anyway. I'm using PostCSS solely to make the CSS of my blog available as a single, minified, and backwards-compatible file.