Modernized scroll offset solution

.stylelintrc

@@ -62,6 +62,12 @@
     "font-family-name-quotes": "always-where-recommended",
     "font-weight-notation": "numeric",
     "hue-degree-notation": "number",
+    "length-zero-no-unit": [
+      true,
+      {
+        "ignore": ["custom-properties"]
+      }
+    ],
     "linebreaks": "unix",
     "media-feature-name-no-unknown": null,
     "no-descending-specificity": null,
@@ -144,6 +150,7 @@
     "scss/at-extend-no-missing-placeholder": null,
     "scss/no-duplicate-mixins": true,
     "scss/no-global-function-names": null,
+    "scss/operator-no-newline-after": null,
     "scss/operator-no-unspaced": true,
     "scss/partial-no-import": true,
     "scss/percent-placeholder-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",

src/assets/stylesheets/main/_typeset.scss

@@ -346,7 +346,7 @@ kbd {
   }
 
   // Unordered and ordered list
-  :is(ul, ol) {
+  :is(ul, ol):not([hidden]) {
     display: flow-root;
     margin-left: px2em(10px);
     padding: 0;

src/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -60,7 +60,8 @@ $admonitions: (
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // Admonition and Details
+  // Admonition - note that all styles also apply to details tags, which are
+  // rendered as collapsible admonitions with summary elements as titles.
   :is(.admonition, details) {
     display: flow-root;
     margin: px2em(20px, 12.8px) 0;

src/assets/stylesheets/main/extensions/markdown/_toc.scss

@@ -64,58 +64,35 @@
     color: var(--md-accent-fg-color);
   }
 
-  // Adjust scroll offset for all elements with `id` attributes - general scroll
+  // Adjust scroll margin for all elements with `id` attributes
-  // margin offset for anything that can be targeted. Browser support is pretty
-  // decent by now, but Edge <79 and Safari (iOS and macOS) still don't support
-  // it properly, so we settle with a cross-browser anchor correction solution.
   :target {
-    scroll-margin-top: px2rem(48px + 24px);
+    --md-scroll-margin: #{px2rem(48px + 24px)};
+    --md-scroll-offset: #{px2rem(0px)};
+    // Scroll margin is finally ready for prime time - before, we used a hack
+    // for anchor correction based on pseudo elements but those times are gone.
+    scroll-margin-top:
+      calc(
+        var(--md-scroll-margin) -
+        var(--md-scroll-offset)
+      );
 
     // [screen +]: Sticky navigation tabs
     @include break-from-device(screen) {
 
-      // Adjust scroll offset for sticky navigation tabs
+      // Adjust scroll margin for sticky navigation tabs
       .md-header--lifted ~ .md-container & {
-        scroll-margin-top: px2rem(96px + 24px);
+        --md-scroll-margin: #{px2rem(96px + 24px)};
-      }
-    }
-  }
-
-  // Adjust scroll offset for headlines
-  :is(h1, h2, h3, h4, h5, h6):target {
-    scroll-margin-top: initial;
-
-    // Anchor correction hack
-    &::before {
-      display: block;
-      margin-top: calc(#{px2rem(-48px + 24px)} - var(--md-hx-offset));
-      padding-top: calc(#{px2rem(48px + 24px)} - var(--md-hx-offset));
-      content: "";
-    }
-
-    // [screen +]: Sticky navigation tabs
-    @include break-from-device(screen) {
-
-      // Adjust scroll offset for sticky navigation tabs
-      .md-header--lifted ~ .md-container & {
-        scroll-margin-top: initial;
-
-        // Anchor correction hack
-        &::before {
-          margin-top: calc(#{px2rem(-96px + 24px)} - var(--md-hx-offset));
-          padding-top: calc(#{px2rem(96px + 24px)} - var(--md-hx-offset));
-        }
       }
     }
   }
 
   // Adjust scroll offset for headlines of level 1-3
-  :is(h1, h2, h3) {
+  :is(h1, h2, h3):target {
-    --md-hx-offset: #{px2rem(4px)};
+    --md-scroll-offset: #{px2rem(4px)};
   }
 
   // Adjust scroll offset for headlines of level 4
-  h4 {
+  h4:target {
-    --md-hx-offset: #{px2rem(3px)};
+    --md-scroll-offset: #{px2rem(3px)};
   }
 }