refactor: define scroll margin only in markdown

Author: duanwilliam

website/src/mdx/markdown.module.scss

@@ -1,4 +1,7 @@
 @use "@/styles/colors";
+@use "@/components/Navbar/styles.module" as navbar;
+
+$navbar-height: navbar.$navbar-height;
 
 /* markdown styles */
 .markdown {
@@ -33,19 +36,27 @@
   /* apply these styles only in markdown "content" (i.e. articles) */ 
   &.content {
 
+    // don't let target be covered by navbar
+    * {
+      scroll-margin-top: $navbar-height;
+    }
+
     // heading margins
     h1, h2, h3, h4, h5, h6 {
-      margin: 2em 0 1em;
-    }
+      $heading-margin-top: 2em;
 
-    // don't add margin to first child (the whole markdown container has top margin already)
-    > *:first-child {
-      margin-top: 0;
+      margin: $heading-margin-top 0 1em;
+      scroll-margin-top: calc(#{$navbar-height} + #{$heading-margin-top});
     }
 
     // block margins
     > * {
-      margin-bottom: 1rem;
+      margin: 1rem;
+
+      // don't add margin to first child (the whole markdown container has top margin already)
+      &:first-child {
+        margin-top: 0;
+      }
     }
   }
 }

website/src/mdx/markdown.module.scss.d.ts

@@ -1,9 +1,14 @@
 // AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
-
 declare namespace MarkdownModuleScssNamespace {
   export interface IMarkdownModuleScss {
     content: string;
+    hidden: string;
+    left: string;
+    logo: string;
     markdown: string;
+    navItem: string;
+    navbar: string;
+    right: string;
   }
 }
 

website/src/styles/index.scss

@@ -1,5 +1,4 @@
 @use "./mixins";
-@use "@/components/Navbar/styles.module.scss" as navbar;
 
 @import "./reset";
 @import "./katex-0.15.2/katex.min.css";
@@ -9,10 +8,6 @@ html {
   scroll-behavior: smooth;
 }
 
-* {
-  scroll-margin-top: navbar.$navbar-height;
-}
-
 body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;