FIX: new CSS approach to navbar-covers-target-anchor problem

[drammock]

closes #315

This attempts to use JavaScript instead of CSS to handle the problem of page anchors being hidden under the navbar. It's not perfect, but I'm hoping someone here with better webdev / javascript skills than mine can spot ways to improve it, and in any event at least it gets rid of the horrible handling of inline targets described in #315.

Known shortcomings:

• clicking an href that targets an anchor, scrolling away from it, than clicking another href that targets the same anchor seems to always fail (target anchor ends up under the navbar). This is easy to test on demo.html#targets because there are several hrefs that all target that anchor. Probably due to the JS getting triggered by hashchange --- in this situation the hash isn't changing --- maybe there's a better way to trigger it that I'm not aware of?
• clicking back and forth between various footnotes and their backreference links, sometimes they end up aligned just perfectly and other times not (they're always close, at least); I can't figure out if this is non-deterministic or if I just can't spot the pattern.

PS: I'm also no yarn / node expert so I may have messed up the precommit hook / hashed assets thing... LMK if it looks wrong and any tips on how to fix it.

[jorisvandenbossche]

@drammock Thanks for the PR! WIll try to give this a look in the weekend

[choldgraf]

This tweet seemed like a promising option. @drammock wanna see if this fixed the problem?

https://mobile.twitter.com/JoshWComeau/status/1332015868725891076

[drammock]

@choldgraf Thanks! I wasn't able to get scroll-margin-top on the targeted anchors to work properly, but it eventually led me to scroll-padding-top which can be set once on the root and it magically fixes everything!

[choldgraf]

amazing! this LGTM. @jorisvandenbossche ?

[jorisvandenbossche]

CSS magic .. ;-)
Wonderful, from testing this indeed seems to work!

[jorisvandenbossche]

Thanks both!