Simeville, purely HTML+CSS single page site with CSS3 content buttons, animation

note: the town looks best on desktop, really big, but should still look good on mobile, you'll just see less of it.

This is my personal site that I redid for fun, it's more of an art site than a website. I hope the ideas and use of CSS are interesting enough to merit your time. The code is compact but has some nice stuff.

After looking at React for a while I wanted a single-page site that used no JS. There's no JavaScript (except Analytics sorry!) and no CSS media queries. CSS3 affords a lot of nice options by itself!

The background is a 1550's painting cut apart into several layers to independently scale into view.

The flying birds are small DIVs with ::afters that move in X and Y directions independently. This is done by animating the DIV along an X value while animating the ::after along a separate Y value. Fussing the animation length a bit gives an "organic" feel to the bird flight. (a true "boids" style bird flock isn't possible without JavaScript)

The navigation consists of three radio button labels, which use sibling (~) CSS selectors to show/hide content divs.

I'd say "the source is on github" but the source is literally just index.html and layout.css, plus the images, which are unfortunately honking huge PNGs so the payload of the site isn't as tiny as I'd like.

The biggest problem: If you open it in a new tab and then look at it later, you won't see any of the town-building animation. This is only fixable with JavaScript unfortunately.

I actually don't know anything about CSS3, this was mostly to learn some of the stuff, most of my experience is in Canvas, so maybe next time I'll make an all-JavaScript village in Canvas or SVG that's generated procedurally or something. I'd like to have a lot more interactivity available.