Properly fix scroll offset and resolve element overlap

In 334c0498 a hack was added to force anchors to be visible (and not hidden
behind the navigation bar) when following a link with a fragment. This was
achieved by setting a large top padding and negative top margin.

This hack had the unintended consequence that when there is a title too close
to the top of the page, the transparent padding of the title (which forms part
of the title) covered the "Also available in PDF format" link, making it
inaccessible.

Modern CSS has a `scroll-margin-top` attribute that can be used to correctly
set a scroll margin (which is what is needed to properly fix the original
issue). This seems to have broad adoption in modern browsers and this attribute
failing to work isn't the end of the world anyway.

Tweak the CSS to use this attribute to replace the previous hack.

Signed-off-by: Martyn Welch <martyn.welch@collabora.com>

themes/beautifulhugo/static/css/main.css

@@ -22,8 +22,7 @@ h1,h2,h3,h4,h5,h6 {
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 800;
   color: #3a5a80;
-  margin-top: -60px;
-  padding-top: 80px;
+  scroll-margin-top: 80px;
 }
 
 a {
@@ -489,7 +488,6 @@ footer .theme-by {
 }
 .intro-header .page-heading h1 {
   margin-top: 0;
-  padding-top: 0;
   font-size: 50px;
 }
 .intro-header .post-heading h1 {