Re: Yeah, I Made It Lilac
The Yeah, I Made It Lilac post inspired me to try to do something similar here.
I was wondering how complicated a post-specific style-sheet would be.
Turns out it can be quite simple.
First I changed my current style-sheet to use custom properties to define the colors in the :root pseudo-class.
This allows to make simple modifications without having to re-define a style-sheet from scratch.
Basically it is enough to re-define some of the custom properties with new colors, and everything else inherits them.
I already had some templating logic in place allowing to inject custom stylesheet fragments (eg. for the About and Statistics pages).
And a positive surprise, the logic behaves as desired when used for blog posts as well.
The custom stylesheet is injected when the page of the post is loaded, but is not injected when the post is shown as part of a collection (home page, archives, categories etc.).
Thus limiting the change to exactly the page of the post, and not messing with the style-sheet of other pages.
So in the end the lilac.css file which is injected for this post is quite simple:
:root { --border-color-3: #6952a7; --border-color-2: #a076c6; --border-color: #ddabe2; --pre-bg-color: #f7f7f9; }