Updates on my ongoing effort to go through the basic Leif & Thorn layout CSS, make light updates, and generally clean it up.

AKA, the long-awaited (?) sequel to February/March’s “making the Leif & Thorn layout more responsive” post.

For readers, the most visible New Thing lately is the fonts. Decided I wanted the “auto-generated/informative/metadata” text to have its own look, instead of being “the fancy title font (Merienda) but smaller” or “the main-text font (Montaga) but more italic.”

So now you’ll see a bunch of Fira Sans. Sans-serif, lightweight, gentle slant. I’m into it.

(Sidenote: there are a bunch of accent images that use Ale and Wenches (the font for Sønska dialogue text). Including the buttons from the over-the-comic “volume navigation” bar, and the subtitle in the main page banner. Might edit those at some point! Might not. We’ll see.)

Other than that…to be honest, the front-end should look pretty much the same:

Unless you have a sharp eye for margins? In which case you’ll notice some re-aligned text, some unfortunate squishing replaced with nice aesthetic spacing.

I’ve been doing matching cleanup on the But I’m A Cat Person CSS, and those visuals are almost entirely about the margins. Plus a couple of borders. The occasional font size. One weird unexpected error in the underlying PHP.

In both cases, the biggest progress is only visible on the back-end. (To see under the hood: follow this link to the Leif & Thorn stylesheet, shift+reload to get it un-cached.)

Mostly: comments! So many code comments. I want to get to the point where I can edit this without ever having to stop and think “wait, what does this line do? How important is it? What seemingly-unrelated feature would break if I deleted it?”

(A longer-term goal of all this — which I’ve vaguely had in mind for a while — is “making the layout a shareable template.” So other creators can copy it, design their own themes, and do their own customizations, without needing to mind-read or reverse-engineer too much. It’s still not there yet, but this is the first time it’s been remotely close.)

Making yourself go through and explain all the CSS also lets you notice when you have duplicate lines doing the same thing. Or deprecated lines that don’t do anything at all. Or a line that was put in to override a “problem” that, it turns out, was caused by a different line in the same stylesheet. Or…the list goes on.

At one point I Thanos-snapped 3 separate height/padding/margin settings from 3 different elements, which were, in perfect balance, furiously canceling each other out.

At this point, the CSS is about 250 lines shorter than the backup I made last October. And that’s with a bunch of new comments added.

…roughly the same length in characters, though. Detailed plain-English explanations = longer lines.

The mobile layout, too, is still mobile-ing along:

I dropped the “set mobile zoom” array of buttons for now. The perfect solution would be to have two distinct layout cookies, so “page theme” and “zoom size” can be set independently…but I haven’t managed to make that work without breaking the whole setup.

Anyone have code suggestions for fixing it? Let me know.

Was really hoping the “what zoom level do mobile users like?” poll (now closed) would come up with a decisive favorite…but nope, the results were all over the map. So I made an executive decision and stuck it at 70%. For now, that’ll have to be good enough.