static/js/pager: Fix and simplify :target offset

3 files changed, 24 insertions, 33 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 89ad378..8f598b9 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -136,21 +136,9 @@
   vertical-align: inherit;
 }
 
-:not(sup):not([role="doc-endnotes"] li):target::before {
-  content: "";
-  display: block;
-  height: 6rem;
-  margin-top: -6rem;
-  visibility: hidden;
-}
-
-:not(#main):target micro-card,
-:not(#main):target micro-card:hover {
-  background-color: transparent;
-  border-radius: 0.5rem;
-  outline-offset: -6px;
-  outline: 2px dashed #ccc;
-  outline: 2px dashed var(--border-darker);
+html,
+:target:not(nav span) {
+  scroll-margin-top: 6rem;
 }
 
 sup:target [role="doc-noteref"][href^="#fn\:"],
@@ -319,7 +307,6 @@ mark:target a {
 mark[id] {
   background: none;
   color: inherit;
-  scroll-margin-top: 6rem;
 }
 
 mark,
@@ -1050,8 +1037,11 @@ micro-card > a {
   display: none;
 }
 
-micro-author micro-card {
-  flex-direction: row;
+micro-card:target {
+  border-radius: 0.5rem;
+  outline-offset: -6px;
+  outline: 2px dashed #ccc;
+  outline: 2px dashed var(--border-darker);
 }
 
 micro-card:hover {
@@ -1065,6 +1055,7 @@ micro-card:focus-within {
 }
 
 micro-author micro-card {
+  flex-direction: row;
   justify-content: start;
   align-items: center;
   border: none;
@@ -1074,6 +1065,13 @@ micro-author micro-card > * {
   margin: 0 0.5rem;
 }
 
+micro-author micro-card p:not(:last-child) {
+  flex: 1.75;
+  color: #444;
+  color: var(--fade);
+  max-width: 20rem;
+}
+
 micro-author micro-header {
   flex: 1;
   min-width: 3rem;
@@ -1087,13 +1085,6 @@ micro-author micro-header h3 {
   font-weight: 400;
 }
 
-micro-author micro-card p:not(:last-child) {
-  flex: 1.75;
-  color: #444;
-  color: var(--fade);
-  max-width: 20rem;
-}
-
 micro-author micro-thumbnail figure {
   margin: 0;
 }
@@ -2291,10 +2282,6 @@ math-ml:not(:last-child) {
   margin-bottom: 0.75rem;
 }
 
-math-ml figure[id] {
-  scroll-margin-top: 6rem;
-}
-
 math-ml figure[id] figure {
   overflow-x: auto;
   overflow-y: hidden;
diff --git a/assets/js/index.js b/assets/js/index.js
index a6c5f47..69001ad 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -13,7 +13,7 @@
     const link = function() {
         url = self.location.href.split("#")[0].split("?")[0];
     };
-    const scrollHash = function(url, load = false) {
+    const scrollHash = function(url) {
         const hash = self.location.hash;
         const fragment = hash.slice(1) && document.getElementById(hash.slice(1));
         const fragmented = hash.length > 0;
@@ -21,7 +21,9 @@
         if (hashed) {
             self.location.hash = hash;
             self.location.href = hash;
-            if (load) fragment.scrollIntoView();
+            if ("scroll-margin-top" in document.body.style === false && fragment.textContent !== "") {
+                self.scrollBy(0, -6 * parseFloat(getComputedStyle(document.documentElement).fontSize));
+            }
         }
         return hashed;
     };
diff --git a/static/js/pager.ts b/static/js/pager.ts
index e818d17..3f7279c 100644
--- a/static/js/pager.ts
+++ b/static/js/pager.ts
@@ -17,7 +17,7 @@
 
   const link = function () { url = self.location.href.split("#")[0].split("?")[0]; };
 
-  const scrollHash = function (url, load = false) {
+  const scrollHash = function (url) {
     const hash = self.location.hash;
     const fragment = hash.slice(1) && document.getElementById(hash.slice(1));
     const fragmented = hash.length > 0;
@@ -25,7 +25,9 @@
     if (hashed) {
       self.location.hash = hash;
       self.location.href = hash;
-      if (load) fragment.scrollIntoView();
+      if ("scroll-margin-top" in document.body.style === false && fragment.textContent !== "") {
+        self.scrollBy(0, -6 * parseFloat(getComputedStyle(document.documentElement).fontSize));
+      }
     }
     return hashed;
   };