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).
This adds a bit of debugging information on mouseover.
For example, a tooltip with the text `bird@tail.arm[0]` can be interpreted as "a bird symbol attached to the tail symbol's first arm attachment point."
The implementation is a bit funky: we basically annotate the SVG DOM with various `data` attributes, and on mouseover we traverse the DOM from the element the mouse is over all the way up to the SVG root element, picking out relevant `data` attributes and building a tooltip out of it. This ended up being easier than e.g. passing a bunch of props down the whole tree in React.
Atul Varma