Quicker Work! (2025-06-05)Link

It's amazing how smoothly things can go once you get a rough idea of a direction. Until now I'd largely been spinning my wheels wondering about how to do a single feature, and not really having any inspiration besides that. Now, all of a sudden, I've hooked up and things are a-flyin'.

Here's a sort of a sneak peak at getting a header in place and dressing up the sidebar:

And here's the same image after a couple minutes of staring and tweaking.

This was a good idea, I should do this more. Attacking a page with a paintbrush and fill tool is much easier than trying to navigate increasingly elaborate CSS classes and nested divs housing grids within grids. I don't have great answers to anything but now that I'm over the things my gut says are important, it's not so bad.

The main thing that's troubling me is the width of the setup. I might have to tuck in the logo home button more, and tighten up the sidebar because, at least according to the preset widths Chrome has in its dev tools, 1024px is about the width of a laptop screen and this is too wide to fit there. I have a feeling most screens are significantly wider than that these days, but I'm leaning more towards narrowing it back down, primarily by going back to the 800px width main body. Composing these longer devlogs has helped me figure out what's comfortable to display, now I've understood how to use blockquotes and insert code to my posts. The time away I've had hasn't hurt either.

A problem brewing in the distance is that I haven't figured out what the mobile setup is going to look like. My previous layout lent itself very well between wide screens and narrow ones because it effectively was its own narrow screen. The sidebar wasn't important. SiteV2 currently has a sticky sidebar, because I want the buttons between pages to be easy to get to at any moment. Any idea htat has just crossed my mind is to make that black section, with my logo, a sticky header that follows you down as you scroll. Put breadcrumbs up there to help again with navigation.

I really don't see a great way of doing that. There's all kinds of stupid gridlock at the top of that page, because I was going to use the white area to the right of my logo for the title of the post or a banner for posts that warrant the effort. The best I've got is under a certain screen width, the sidebar becomes the header. But how does it move from the side to the top of the screen? The way SiteV1 swaps from side to inline is by using flex between the two segments. It's possible to do the same method here, but to tuck it up tight next to the logo seems like it'll take a major redesign.

...why don't I draw what I'm thinking?

On a narrower screen, it might approach something like this. No borders, everything from edge to edge. I assume the buttons would be taller. That plain white panel I have a couple ideas I'm knocking about, thinking of using that to hold a logo to represent different parent pages across the site.

What I didn't appreciate on this SiteV2 design is just how well I set up my systems to be resizeable the first time. I don't think it was intentional, just a nice side effect from the aesthetic I chose, but comparatively this has been aesthetics first with the assumption that adapting to different devices would be obvious. Not the case so far.

Whatever. I'll figure it out.