Site Design 2021-08-04
Oh wow, this is all kinds of a blast from the past. I used to tell you what was in the post before you read it. What decadence.
Anyway, I'm breaking out this old category because I need to touch my CSS definitions again for a few reasons.
One reason is that I want to support prefers-color-scheme so my wife can look at this site without her night mode extension turning the background a weird brown color.
The follow-on reason is, one of the projects I'm working on is going to need a bunch of diagrams to illustrate its concepts, and if prefers-color-scheme is in place, those diagrams need to handle that. And I think the easiest (for some value of "easiest") way for me to handle that is to use svg files for the diagrams, and add classes to them so I can style them with the site CSS.
(Get ready for a fun time, Neocities! My site generator forces cache invalidation of stylesheets by changing the link in the generated pages, so I'm going to need to re-upload my entire blog when I update the style. As such, I want to make sure I have this right before I push it.)
Here are my notes on this so far:
- I've got two placeholders to handle different-colored areas of the screen, %light and %dark. In practice, they aren't accomplishing much, because each one is used just once, and in one case there's a nested modifier style that specifically expects to be under %dark. I think a more correct way to handle this would be to have "main"/"inverse", ""/"emphasized", "text"/"background" variables that are populated by media selectors.
- I want to add a new figure block, with shape elements, and modifiers like background, fill-red, stroke-blue, emphasized. I may rework this scheme a bit, we'll see.
To be honest, I'll probably table this for now and focus on the content for the posts that will need this, because if I finish the post but not the CSS by the deadline, it'll look a little bad but be readable, but if it's the other way around, then the post won't exist. I think the one thing I want to work out is the division of elements, because I need to mark up the svg file by hand to have the class data.
I'll think about that for a bit after I publish this. Which I want to do now, so I don't have an excuse to be up super late.
(PS: Just decided it should be line and fill elements, and emphasized can only apply to line elements. That doesn't quite nail down everything, but it's a start.)
Good night.