Like Kev, Sal, and Colin's sites, my new blog theme also differentiates between regular and :visited
links. The only difference is that I'm using CSS hue-rotation to generate my :visited colour; basically like this:
a:visited { color: hsl(from var(--q-pri) calc(h + 30) calc(s - 15) l); }
That's a 30ยฐ clockwise hue rotation coupled with a 15% reduction in saturation. Why those numbers? Because that transformation is approximately equivalent to the
difference between the "traditional" HTML link colors #0000ee and #551a8b for unvisited and visited links, respectively. It's an homage!
Alt
Colour wheel diagram showing the transformation from a light blue into a medium purple.
Transforming this way, rather than to a specific color, also means that if my variable
var(--q-pri) changes in future, the complementary feel of the transformation will come along for the ride. If I were more-organised and had a var(--links) that
I specified per-parent or per-page, I could transform based on the link colours at the current location. Neat.
(At time of writing, that yields #155a93 => #222686. But if I change the variable in future, the visited-links will follow along.)
It would have been better still if my CSS has been able to use hsl(from currentColor h s l), which would have been even more site-wide-universal, but we
can't use currentColor for links, presumably because it's among the (many) techniques that can be
used to exfiltrate browser history using :visited links, sigh.
0 comments