Ensure link anchors aren't obscured by the nav bar when used

Hugo automatically generates IDs for each title when the HTML pages are
generated. These IDs can be used as anchors in the document, so that we
can provide URLs that jump to the specific title when the link is
followed. Browsers will place the anchor at the top of the window,
however we have a floating navigation bar there which results in the
anchor being obscured, which can be a bit disorientating.

Tweak the CSS to pad the top of the heading, but in a way that doesn't
result in the heading being visibily spaced further from the previous
text. Add override to main page heading to stop it being padded down
the page.

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

themes/beautifulhugo/static/css/main.css

@@ -17,11 +17,15 @@ p a {
   /* text-decoration: underline */
   color: #008AFF;
 }
+
 h1,h2,h3,h4,h5,h6 {
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 800;
-  color: #3a5a80
+  color: #3a5a80;
+  margin-top: -60px;
+  padding-top: 80px;
 }
+
 a {
   color: #008AFF;
 }
@@ -478,6 +482,7 @@ footer .theme-by {
 }
 .intro-header .page-heading h1 {
   margin-top: 0;
+  padding-top: 0;
   font-size: 50px;
 }
 .intro-header .post-heading h1 {