From 61b86c1e8620032278f6b8ea8edda35e4e886157 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Sun, 23 Feb 2020 16:23:55 +0100
Subject: [PATCH] Use `scroll-margin-top` instead of pseudo hack

---
 site/assets/js/application.js  |  6 ------
 site/assets/scss/_content.scss | 22 ++++------------------
 2 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 0cf4199c96..d5a68c7e12 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -167,11 +167,5 @@
   }
   anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
 
-  // Wrap inner
-  makeArray(document.querySelectorAll('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'))
-    .forEach(function (hEl) {
-      hEl.innerHTML = '<span class="bd-content-title">' + hEl.innerHTML + '</span>'
-    })
-
   bsCustomFileInput.init()
 })()
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index f264b52357..b01547758d 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -5,20 +5,11 @@
 .bd-content {
   order: 1;
 
-  // Hack the sticky header
-  // stylelint-disable selector-no-qualifying-type
-  > h2[id],
-  > h3[id],
-  > h4[id] {
-    pointer-events: none;
-
-    &::before {
-      display: block;
-      height: 6rem;
-      margin-top: -6rem;
-      content: "";
+  // Offset for the sticky header
+  > * {
+    @include media-breakpoint-up(md) {
+      scroll-margin-top: 4rem;
     }
-    // stylelint-enable selector-no-qualifying-type
   }
 
   > h2:not(:first-child) {
@@ -66,11 +57,6 @@
   }
 }
 
-.bd-content-title {
-  display: block;
-  pointer-events: auto;
-}
-
 .bd-title {
   @include font-size(3rem);
 }