Added general anchor offset solution using scroll-margin-top

material/assets/manifest.json

@@ -5,8 +5,8 @@
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.8caa27b7.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.37585f48.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.37585f48.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.f6cf1dc9.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.f6cf1dc9.min.css.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.90238df2.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.90238df2.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.85bb4ebe.min.css",
   "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.85bb4ebe.min.css.map"
 }

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.f6cf1dc9.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.90238df2.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.85bb4ebe.min.css' | url }}">
       {% endif %}

src/assets/stylesheets/extensions/_permalinks.scss

@@ -76,6 +76,13 @@
     color: var(--md-accent-fg-color);
   }
 
+  // General scroll margin offset for anything that can be targeted. Browser
+  // support is pretty decent by now, and if we wait until Edge 79+ has more
+  // adoption, we can get rid of all anchor-correction hacks.
+  :target {
+    scroll-margin-top: px2rem(48px + 24px);
+  }
+
   // Correct anchor offset for link blurring
   @each $level, $delta in (
     h1 h2 h3: 8px,
@@ -84,6 +91,11 @@
   ) {
     %#{nth($level, 1)} {
 
+      // Reset, as we use the anchor-correction hack here.
+      &:target {
+        scroll-margin-top: initial;
+      }
+
       // Un-targeted anchor
       &::before {
         display: block;