This splits up our `styles.css` file into multiple CSS files that sit alongside the TSX files that use their classes. All "generic" CSS that isn't used by any one particular component, such as our `thingy` class, is currently being put into `page.css`.
The CSS files are imported via `import` statements in their associated TSX files. As such, this fixes#164.
This also starts formatting our CSS using Prettier.
It also moves some of our `<head>` tags back into `index.html`, reverting a tiny bit of #205, to ensure that some of the metadata can be recognized by browsers, and start loading asynchronously, independently of the page's JavaScript (I see no reason why any of those elements need to change dynamically based on the app's state, so there don't seem to be any downsides to this).
The key phrase here is **less terrible**, as opposed to **good**.
Right now if the mandala gets too big for the page, it will just overflow and the remainder won't be visible (not even via scrolling). This is intentional, though, as per @ninapaley's suggestion:
> I'm hoping you can change the way the image keeps resizing its canvas, and keeps justifying left.
> Maybe have an oversize canvas with the ring pinned to the center, and all the adjustment sliders
> on the right? Then they won't disappear if the canvas is too big. Also! I have an idea for an
> animated cycle that would require the symbols to eventually outgrow the canvas area and disappear.
I'm not super happy with this CSS, it doesn't feel terribly maintainable. Ah well, maybe we can improve it later.
Atul Varma