Use `scroll-margin-top` instead of pseudo hack

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 0cf4199c96590ab55771f8460267991914163b0d..d5a68c7e123673e93411f3154e369cf37e062865 100644 (file)
--- 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 f264b523570b2d56699ad4ef8df07091cf8c1da3..b01547758dfbacc5e5117e2fff84d24b88b1f24b 100644 (file)
--- 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);
 }