Break Points

I really needed a day off from work, so I took one. And then I spent all day doing Code Things anyway.

I read a post somewhere or other gently chastising people for not making their Indie Web™ sites mobile-friendly.It was probably on Bubbles.

Lots of people only look at websites on phones these days, so I was doing all zero of my readers a huge disservice by having a mobile version of my site use a design aesthetic known in “the biz” (my room) as Desktop But Smaller. My heavy use of sidenotes meant that some 40% of any potential phone reader’s 3-inch-wide screen would be reserved for the possibility of my going off on some dumbshit digression in the middle of one of my biannual posts.

Well, no more. Now my web site’s delicious Content will span the full expanse of a phone screen, and sidenotes will be shown only when you tap the little number telling you I have some additional irrelevant nonsense to blather about. It’s precisely as Tufte intended.

If you peek under the hood, you’ll see that I do actually use Tufte CSS, which supports everything I described in the last paragraph and has done so for a long time. So like, what the hell?

Well, I’m not using stock Tufte CSS: among other things, I wanted it to be more purple. So when I added it to my website, I did one complicated and forward-looking thing and one simple and grug-brained thing that completely negated any value I might have gotten out of the complicated thing.

The complicated thing was forking tufte-css and adding my fork as a Git submodule. This enabled me to pull updates from upstream if I wanted to get the latest and greatest.

The grug-brained thing was making my modifications by just fucking editing tufte.css directly, thereby ensuring that any attempt to actually pull upstream changes would be met with an increasingly convoluted nightmare of merge conflicts. Obviously, I didn’t really think this through. But it’s just a personal web page, and I like to think I’ve learned a thing or two about software since then.

So anyway, I guessed that mobile looked bad either because my changes broke the media queries that were so obviously actually present in tufte.css or because those media queries were added after I made my fork, uh, nine years ago. Fine, then. Merge conflicts ahoy I guess.

About a half hour through squinting at diffs and trying to recall what the hell I was thinking nine years ago, I managed to notice that what I was doing was not smart. If I want to be able to continue to pull upstream changes, carrying on with an adulterated tufte.css is not the way to go. How about, instead, leaving that damn file alone and making my own CSS that overrides whatever I want to change?

I think CSS overrides happen in, like, sequential order if two conflicting rules exist. But I didn’t want to rely on that. Instead I just slapped a .small-clever-rooms class on some node real high up in the DOM and then put all my overrides inside a .small-clever-rooms {} in my custom CSS (itself named small-clever-rooms.css, natch). That was enough to ensure that my rules would win over the tufte.css ones due to being more specific.

Mobile still looked the same, though. What the fuck?

One thing I realized after consulting some more docs was that my more-specific rules would supersede the media-query-wrapped ones in the base tufte.css. So since I had something like this (across two files):

.small-clever-rooms p {
    width: 55%;
}

@media (max-width: 760px) {
    p {
        width: 100%;
    }
}

the narrow width would win due to higher specificity even if the screen was small. I couldn’t think of a way to fix it that wouldn’t require me to override every max-width-wrapped rule with another one with higher specificity.

At this point it was like 10:30am and I’d been stuck in website mode since 8:30 and I hadn’t even taken a shower yet, though at least I’d had breakfast. So I took a break to take my stupid shower, and then I figured out how to solve the stupid issue in the stupid shower. I hate that this kind of thing works so often.

The solution, which is probably obvious to anyone who’s spent more than 10 minutes thinking about CSS in the last 5 years, was to just freakin’ put my large-screen-specific overrides in large-screen media queries. What a concept!

@media (min-width: 761px) {
    .small-clever-rooms p {
        width: 55%;
    }
}

@media (max-width: 760px) {
    p {
        width: 100%;
    }
}

Once I did that… mobile still looked the same. What the fuck?

The answer to this one, fortunately, was something so fundamental and important (though completely absent from my personal awareness) that the first answer turned up by a simple web search was actually correct. Shocking in a 2026 where web search has been completely hollowed out by LLM slop. Anyway, it was this bit of boilerplate in <head>:

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
/>

That “fixed” mobile, in the sense of making Tufte’s and my CSS actually apply. Having resolved that, it was time to settle in for a long and relaxing afternoon of knob twiddling and yak shaving. But hey:

Mobile does in fact work now. Even the studio looks better.
I migrated I’ll Do The Hot Voice! to Codeberg and un-broke the link and the domain forwarding. Cool.
I wrote this post about it. As you may have noticed I’m not in the habit of actually writing posts.
I did some recreational code jorgling, which honestly I have to say the shine has kind of come off it in the age of push-button mediocre code generators that I’m required to use for work. On the other hand the gap between coding for work and coding for leisure has never felt wider since I’ll never intentionally type words at an LLM in my free time.