2 hours ago · Tech · hide · 0 comments

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! 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.…

No comments yet. Log in to reply on the Fediverse. Comments will appear here.