Add `scroll-margin-top` to anchors to accommodate for sticky header

[jakub-g]

When you arrive at a link with anchor, like:
https://yarnpkg.com/advanced/lexicon#transitive-dependency
the browser scrolls the page to the anchor automatically, but it's overlapped by the sticky header, so the user needs to manually scroll.

A solution to this is a CSS like below (checked with devtools, works well)

[id] { scroll-margin-top: 100px; }

(the sticky header has 40+60px computed height).

I don't know where to put this rule though in the codebase. And maybe instead of 100px hardcoded it should use sass calc.

Maybe somewhere here?
https://github.com/yarnpkg/website/blob/master/_sass/_navbar.scss#L2-L3

[Haroenv]

not sure if I have it right, as this file doesn't have the code for the header, but it maybe could be added here?

https://github.com/yarnpkg/berry/blob/master/packages/gatsby/src/components/layout-content-nav.js#L28

[merceyz]

Fixed in #3932

[Haroenv]

What a coincidence!