Skip to content
Updated layout

Still tinkering with the layout CSS

Still tinkering with the layout CSS published on 4 Comments on Still tinkering with the layout CSS

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:

Updated layout

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:

Mobile layout

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.

Of the "change mobile zoom" options in the header, which is your favorite?
  • Doesn't matter to me, but I like voting in polls 36%, 12 votes
    12 votes 36%
    12 votes - 36% of all votes
  • 70% 18%, 6 votes
    6 votes 18%
    6 votes - 18% of all votes
  • 60% 9%, 3 votes
    3 votes 9%
    3 votes - 9% of all votes
  • Between 70 and 80 9%, 3 votes
    3 votes 9%
    3 votes - 9% of all votes
  • 80% 9%, 3 votes
    3 votes 9%
    3 votes - 9% of all votes
  • I want something larger than 80% 9%, 3 votes
    3 votes 9%
    3 votes - 9% of all votes
  • I want something smaller than 50% 6%, 2 votes
    2 votes 6%
    2 votes - 6% of all votes
  • Between 60 and 70 3%, 1 vote
    1 vote 3%
    1 vote - 3% of all votes
  • 50% 0%, 0 votes
    0 votes
    0 votes - 0% of all votes
Total Votes: 33
10 March, 2021 - 8 April, 2021
Voting is closed

Comment Header


Not a complaint, because I don’t actually mind, but I noticed that clicking on the central “main” section causes the whole thing to be surrounded by a border (white or black, depending on the theme). Clicking the empty sidebars removes it. I don’t think it did that before.

Huh, it’s not doing that for me — what browser are you in?

It might be a thing I caused by accident and then un-caused, and your machine still has a cached version of the stylesheet from before I uploaded the fix. Or it might just be an effect that Firefox doesn’t show.

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar