chore(deps): remove jQuery

assets/css/_page/_single.scss

@@ -68,22 +68,25 @@
     h5,
     h6 {
       font-weight: bold;
+      margin: 1.2rem 0;
 
       .dark-theme & {
         font-weight: bolder;
       }
     }
 
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      padding-top: .8rem;
-      padding-bottom: .3rem;
+    h2::before,
+    h3::before,
+    h4::before,
+    h5::before,
+    h6::before {
+      display: block;
+      content: "";
+      height: 1.2 * $header-height;
+      margin: -1.2 * $header-height 0 0;
     }
 
-    h2::before {
+    h2 > a:first-child::before {
       content: "#";
       margin-right: .3125rem;
       color: $single-link-color;
@@ -93,16 +96,18 @@
       }
     }
 
-    h3::before,
-    h4::before,
-    h5::before,
-    h6::before {
-      content: "|";
-      margin-right: .3125rem;
-      color: $single-link-color;
+    h3,
+    h4,
+    h5,
+    h6 {
+      & > a:first-child::before {
+        content: "|";
+        margin-right: .3125rem;
+        color: $single-link-color;
 
-      .dark-theme & {
-        color: $single-link-color-dark;
+        .dark-theme & {
+          color: $single-link-color-dark;
+        }
       }
     }
 

assets/css/_partial/_header.scss

@@ -1,15 +1,18 @@
-header.desktop {
-  display: block;
+header {
   position: fixed;
   width: 100%;
-  z-index: 100;
-  height: 4rem;
-  line-height: 4rem;
+  height: $header-height;
+  line-height: $header-height;
   background-color: $header-background-color;
 
   .dark-theme & {
     background-color: $header-background-color-dark;
   }
+}
+
+header.desktop {
+  display: block;
+  z-index: 100;
 
   .header-wrapper {
     width: auto;
@@ -44,17 +47,12 @@ header.desktop {
 
 header.mobile {
   display: none;
-  position: fixed;
-  width: 100%;
   z-index: 100;
   transition: all 0.3s ease 0s;
 
   .header-wrapper {
     padding: 0;
     margin: 0;
-    height: 4rem;
-    line-height: 4rem;
-    background: $global-background-color;
 
     .header-container {
       display: flex;
@@ -82,9 +80,9 @@ header.mobile {
           -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
           border-radius: 3px;
-          -webkit-transition: .2s margin .2s, .2s transform;
-          -moz-transition: .2s margin .2s, .2s transform;
-          transition: .2s margin .2s, .2s transform;
+          -webkit-transition: .1s margin .1s, .1s transform;
+          -moz-transition: .1s margin .1s, .1s transform;
+          transition: .1s margin .1s, .1s transform;
 
           .dark-theme & {
             background: $global-font-color-dark;
@@ -101,9 +99,9 @@ header.mobile {
 
         &.active {
           span {
-            -webkit-transition: .2s margin, .2s transform .2s;
-            -moz-transition: .2s margin, .2s transform .2s;
-            transition: .2s margin, .2s transform .2s;
+            -webkit-transition: .1s margin, .1s transform .1s;
+            -moz-transition: .1s margin, .1s transform .1s;
+            transition: .1s margin, .1s transform .1s;
           }
 
           span:nth-child(1) {
@@ -148,9 +146,5 @@ header.mobile {
         border-top: 2px solid $global-font-color-dark;
       }
     }
-
-    .dark-theme & {
-      background: $global-background-color-dark;
-    }
   }
 }

assets/css/_variables.scss

@@ -46,6 +46,9 @@ $selection-color-dark: rgba(38, 139, 211, 0.3) !default;
 // ========== Selection ========== //
 
 // ========== Header ========== //
+// Height of the header
+$header-height: 4rem !default;
+
 // Color of the header background
 $header-background-color: #fafafa !default;
 $header-background-color-dark: #252627 !default;