Use scroll-margin with floating navigation (#7528)

* Use scroll-margin to offset links when the navigation is sticky

* Educate this rule

website/pages/style.css

@@ -98,23 +98,21 @@
   color: white;
 }
 
-/* Permalink adjustment for sticky nav */
-.g-content {
-  & h1,
-  & h2,
-  & h3,
-  & h4,
-  & h5,
-  & h6,
-  & li {
-    position: relative;
-
-    & .__target-h,
-    & .__target-lic {
-      position: absolute;
-      top: -75px;
-    }
-  }
+/*
+ * About this selector:
+ * `.g-subnav ~ *` finds all elements after the navigation.
+ * `:target` finds the active permalink on the page.
+ *
+ * About this style:
+ * `scroll-margin-top` adjusts the vertical scroll of a permalink.
+ * `64px` adjusts the scroll to account for the navigation.
+ * `0.5em` further adjusts the scroll to give the permalink breathing room.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
+ * See: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
+ */
+.g-subnav ~ * :target {
+  scroll-margin-top: calc(64px + 0.5em);
 }
 
 /* Web Fonts */