wobblegong

My little Neocities webbed site is beginning to look nice enough to pass as functional. Hooray! As is tradition I opened it because I wanted to make a new page with actual stuff on it, and then instead I started a new landing/link list page and then fucked off to work on the CSS for five hours.

The good news is most things I wanted to sit on a backdrop now sit on a backdrop. I also shuffled the linkstickles into order, got them a fancy background, and massaged the Light Mode background tile to be more visible on screens/devices which flatten white-ish colors into all white. (Well, I think/hope. I've only got so many devices to test on.)

The CSS crime ended up being the thing I did not expect: page footers are made of sin and misery!! Conceptually they've been a staple for decades now and if you want a horrendous screen-wasting "always on top" mobile-style one that's easy. But if you want one that glues itself to the bottom of a page after all the other page content even if the page content is less than a full page, 1. go fuck yourself 2. get out a CSS calc().

Or in more detail... you need to force the page to be at least one screen tall. The good news is there's a unit for that: vh! Viewport Height is a handy little auto-calculating, auto-rescaling unit that says 100vh = the height of the browser page (ie viewport) as it is right now. So 1vh is 1% of the current browser height, 50vh is 50%, and so on. The bad news for perfectionists is that you can't just body{min-height: 100vh;} because your footer, curse its name, is going to be in addition to the rest of that, which means it would provoke a little bit of pagescroll even on the shortest page ever. Damn it.

Also even if that worked, if you're running any kind of {max-width} on your body{} that will apply to the footer too, and that gives you a weakest-of-ass footer which can't reach either side of the page, like a loser who doesn't even understand its job here. Double damn it.

So! Move the max-width out of body{} and into .torso{} (yes I think I'm funny), set up whatever height you want the footer to be, then ask calc() to save us: .torso{min-height: calc(100vh - footer height)}. Mercifully calc() will take different units so my committment to em/rem goes unchallenge, but yeah you'll probably just keep typing heights in for a bit and adjusting it until it lines up without forcing any scrollbar.

I think I got it to work though. Eventually. At least it works when I resize my own screens! And all it took was moving some body{} properties into a new mandatory div I'll have to put on every page, yaaaaay.

Behold thusly here: https://wobblegong.neocities.org/burrow