This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
This fixes#67 by making the background color selection/randomization code more DRY via the addition of a new `SvgCompositionContext` and a `CompositionContextWidget`.
It also documents the `SvgSymbolContext` type, and moves the "randomize colors" button closer to the actual colors.
The random colors are currently terrible! Maneesh will help us make them better. :)
Also, there is some annoying code duplication going on here between the creature and mandala pages, but I really wanted to add the button to both and also want to eat dinner soon, so I am filing #67 and saving the refactoring for later.
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.
This adds an extremely simple Mandala page (for #24) with a single circle Mandala comprised of several eyes. The symbol style is configurable, but parameters for the actual Mandala are not (yet).
Doing this also involved factoring out a `<SvgTransforms>` component, which makes setting up SVG transforms a bit easier.
Also moved `getSymbol` of `creature-page.tsx` and into `svg-vocabulary.tsx`, with the new name `getSvgSymbol`.
Atul Varma