From 1dc482b00d1c3f5fa37c5874c19077dd92d5f44d Mon Sep 17 00:00:00 2001
From: Matthew Woodcraft <matthew@woodcraft.me.uk>
Date: Sat, 26 Oct 2019 12:54:41 +0100
Subject: [PATCH 1/2] Add scroll-margin-top to headings which contain link
 targets.

This means when the link is followed, the page scrolls in such a way as to
leave space for the fixed menu bar.

Fixes #1040
---
 src/theme/css/general.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index 44c117d622..e1e671e93a 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -45,6 +45,13 @@ h4 a.header:target::before {
     width: 30px;
 }
 
+h1 a.header:target,
+h2 a.header:target,
+h3 a.header:target,
+h4 a.header:target {
+    scroll-margin-top: 62px;
+}
+
 .page {
     outline: 0;
     padding: 0 var(--page-padding);

From 86a368b7266d85bdfc52673c021b64b3ccd4fb8d Mon Sep 17 00:00:00 2001
From: Matthew Woodcraft <matthew@woodcraft.me.uk>
Date: Sat, 26 Oct 2019 13:21:26 +0100
Subject: [PATCH 2/2] Introduce a --menu-bar-height CSS variable

---
 src/theme/css/chrome.css    | 8 ++++----
 src/theme/css/general.css   | 2 +-
 src/theme/css/variables.css | 1 +
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index 4b3870e51b..02d0dcedf9 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -45,7 +45,7 @@ a > .hljs {
     position: relative;
     padding: 0 8px;
     z-index: 10;
-    line-height: 50px;
+    line-height: var(--menu-bar-height);
     cursor: pointer;
     transition: color 0.5s;
 }
@@ -73,7 +73,7 @@ a > .hljs {
 }
 
 html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
-    transform: translateY(-60px);
+    transform: translateY(calc(-10px - var(--menu-bar-height)));
 }
 
 .left-buttons {
@@ -88,7 +88,7 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
     display: inline-block;
     font-weight: 200;
     font-size: 20px;
-    line-height: 50px;
+    line-height: var(--menu-bar-height);
     text-align: center;
     margin: 0;
     flex: 1;
@@ -446,7 +446,7 @@ ul#searchresults span.teaser em {
 .theme-popup {
     position: absolute;
     left: 10px;
-    top: 50px;
+    top: var(--menu-bar-height);
     z-index: 1000;
     border-radius: 4px;
     font-size: 0.7em;
diff --git a/src/theme/css/general.css b/src/theme/css/general.css
index e1e671e93a..336b5a5d6b 100644
--- a/src/theme/css/general.css
+++ b/src/theme/css/general.css
@@ -49,7 +49,7 @@ h1 a.header:target,
 h2 a.header:target,
 h3 a.header:target,
 h4 a.header:target {
-    scroll-margin-top: 62px;
+    scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
 }
 
 .page {
diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
index 6838c644ac..9534ec8d15 100644
--- a/src/theme/css/variables.css
+++ b/src/theme/css/variables.css
@@ -5,6 +5,7 @@
     --sidebar-width: 300px;
     --page-padding: 15px;
     --content-max-width: 750px;
+    --menu-bar-height: 50px;
 }
 
 /* Themes */