A brighter shade of beige
Published
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.