So here was the problem. I spent all this time putting a living background on the site, the mountain, the birds, the stars, and then I went to actually read a post and the text just sat there on top of it. No separation. The words looked glued to the scene, completely flat, like someone printed a paragraph over a photo and called it done. Honestly it looked worse than before I added the background at all.
First thing I tried was the cheap fix. Just put a border around the reading column.
.reading-panel {
border: 1px solid var(--color-border);
}Nope. A thin line around the text does nothing when the actual problem is that the text and the background are sitting on the same visual plane. It still looked stuck, just stuck with a frame around it now.
So I went the other way and gave it a solid box. Proper background colour, the whole column filled in. And that worked, the text lifted right off. Except now I couldn't see the background at all behind the reading area, which was the entire point of having a background. I had basically covered up the thing I just spent a week drawing.
Where I landed is a frosted panel. The column has a background that is mostly opaque but not fully, plus a blur behind it, so you still see the island and the birds through it but softly, and the text has something solid enough to sit on.
.reading-panel {
background: var(--panel-bg); /* about 80% of the surface colour */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}That -webkit line being first is not me being tidy. I had it the other way round at first, the plain one on top, and the blur just silently did not happen in the build. Turns out the CSS minifier this project uses drops the unprefixed backdrop-filter if it comes before the webkit one. I spent a good while staring at a translucent-but-not-blurred panel wondering why my code did nothing, before I found that. Swap the two lines and the blur comes back.
The readable-versus-see-through balance took a few passes too. Too see-through and the text swims when a dark bit of mountain drifts behind it. Too solid and you lose the background again. I ended up checking the contrast against the darkest and lightest bits of scenery that can pass behind the words, and kept it above the line where it stays readable no matter what floats by. Good enough, and now the page actually has some depth instead of looking like a flat sticker.
