add scroll-margin-top property to content sub-headings (fixes #717)

next.config.js

@@ -10,16 +10,12 @@ module.exports = withBundleAnalyzer({
   i18n: {
     locales: ["en-us"],
     defaultLocale: "en-us",
+    localeDetection: false,
   },
   swcMinify: true,
   reactStrictMode: true,
   trailingSlash: true,
   productionBrowserSourceMaps: true,
-  resolve: {
-    fallback: {
-      fs: false,
-    },
-  },
   images: {
     formats: ["image/webp"],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920],

pages/_app.tsx

@@ -150,8 +150,7 @@ export default function App({ Component, pageProps }: AppProps) {
       />
 
       {/* Inline script to restore light/dark theme preference ASAP */}
-      <Script id="restore_theme" strategy="afterInteractive">{`
-try {
+      <Script id="restore_theme" strategy="afterInteractive">{`try {
   var root = document.documentElement,
       pref = localStorage.getItem("dark_mode"),
       theme = pref === "true" || (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";

styles/index.scss

@@ -114,29 +114,33 @@ code {
   margin-right: auto;
 }
 
-// AnchorJS styles
+// sub-heading anchor styles
 .h-anchor {
   margin: 0 0.25em;
   padding: 0 0.25em;
-  color: var(--medium-light) !important;
-  background: none !important;
+  color: var(--medium-light);
+  background: none;
   font-weight: 300;
   line-height: 1;
-  opacity: 0; // overridden by JS on mobile devices
+  opacity: 0; // overridden on hover
   user-select: none;
 
   &::before {
-    content: "\0023"; // pound sign
+    content: "\0023"; // pound sign `#`, done here to keep content DOM cleaner
   }
 
   &:hover {
-    color: var(--link) !important;
+    color: var(--link);
   }
 }
 
+// make anchor `#` link show up on hover over the corresponding heading
 h2,
 h3,
 h4 {
+  // offset (approximately) with sticky header so jumped-to content isn't hiding behind it
+  scroll-margin-top: 90px;
+
   &:hover {
     .h-anchor {
       opacity: 1;