Correct overlapping annotations and improve usability

Fixes #1872

After talking with @cath9 we settled on a Google Docs-like presentation for annotations in the margin. Previously these could easily overlap because they were absolutely positioned and would land in the same spot if multiple notes appeared in the same source line.

After a number of fancy attempts to reflow the positions in code, I had the obvious-in-retrospect thought to see what the regular site does, and they're simple floats that lay out themselves. Bright idea, past LIL!

Added highlights that appear on hover or keyboard nav that visually link the note to the text. They're bidirectional, so hovering over either the note or the annotated text works. (This is entirely CSS and relies on the has: operator for one direction; in Firefox only hovering over the note will produce the effect until that support is added this year.)

https://user-images.githubusercontent.com/19571/214433977-1b020395-b3ab-4ade-8601-fa953a5c67d1.mov

Couple other changes:

Some CSS was moved around to be grouped more predictably.
To make the floats work, I dropped laying this out in a grid. The grid columns weren't being used much anyway.
Added IDs to all the annotation types to make debugging in the browser console easier.
The footer used to appear before the content in DOM order, which affected keyboard nav. Now it's laid out logically.

Note: the annotations here are keyboard accessible but not accessible to screenreaders. I haven't researched this yet but I'd like the annotation to be made available to the reader when the annotated text is selected.

harvard-lil / h2o

Correct overlapping annotations and improve usability #1885

Codecov Report