
Simeville, purely HTML+CSS single page site with CSS3 content buttons, animation - simonsarris
http://simonsarris.com/
======
simonsarris
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.

