*chromium only currently

Progressive enhancement is fine here.

Note: currently with `position: absolute` the Projects dropdown (and potentially others if content text gets too long) overflow the viewport

- Only top level pops out
- Only one popout is open at once
- Name is in a span for styling

TODO:
- make sub entries popouts
- apply redesign

- Colours are set by component user
- last child margins selector is adjusted to ignore scripts/styles (as they can be added from the astro component (WHY NOT JUST HOIST IT OUTSIDE TEMPLATES PLEASE)

- prevents UA colour scheme flashing
- retains if user looses JS (internet etc)

- focus/hover/active properly indicated
- add "copied" text
- copied text fades in and out, remaining for 2s
- role=alert ensures screen readers announce changes

Note that there is currently layout shift when JS loads, although I dont think it will be a major issue except on extremely low speeds. Tested on "Regular 3G" and it took <5 seconds to load; Its not a major concern.

TODO: support lightmode for codeblocks

TODO:
- overhaul sidebar nav to make more usable and less unsightly
- resolve firefox accessibility warnings:
- hamburger menu not labeled
- sun/moon not labeled
- remove tab focus on .astro-code
- modify parser to make labels for checkbox lists actual labels
- add copy code button to outline code elements