Set font sizes for all heading levels

src/App.vue

@@ -28,14 +28,11 @@ loadInstanceInfo()
 @import "styles/theme";
 
 html {
-  min-height: 100%;
-}
-
-body {
   background: $background-color;
   color: $text-color;
   font-family: $text-font;
   font-size: $text-font-size;
+  min-height: 100%;
 }
 
 a {
@@ -48,9 +45,52 @@ a {
   }
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+  margin: 0 0 $block-outer-padding;
+}
+
+h1 {
+  font-size: 2.2rem;
+}
+
+h2 {
+  font-size: 1.6rem;
+}
+
+h3 {
+  font-size: 1.4rem;
+}
+
+h4 {
+  font-size: 1.2rem;
+}
+
+h5 {
+  font-size: 1.1rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
 .static-text {
   line-height: 2;
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+
   p a {
     text-decoration: underline;
     text-decoration-skip-ink: none;

src/components/PostContent.vue

@@ -90,6 +90,12 @@ function getContent(): string {
     white-space: pre-wrap;
   }
 
+  :deep(h1),
+  :deep(h2),
+  :deep(h3),
+  :deep(h4),
+  :deep(h5),
+  :deep(h6),
   :deep(p),
   :deep(blockquote),
   :deep(ul),
@@ -97,10 +103,28 @@ function getContent(): string {
   :deep(hr),
   :deep(pre) {
     &:not(:last-child) {
-      margin-bottom: 1em;
+      margin-bottom: 1rem;
     }
   }
 
+  :deep(h1) {
+    font-size: 1.6rem;
+  }
+
+  :deep(h2) {
+    font-size: 1.4rem;
+  }
+
+  :deep(h3) {
+    font-size: 1.2em;
+  }
+
+  :deep(h4),
+  :deep(h5),
+  :deep(h6) {
+    font-size: 1rem;
+  }
+
   :deep(a) {
     @include block-link;
   }

src/components/SidebarLayout.vue

@@ -172,18 +172,6 @@ header {
   max-width: $content-width;
   min-width: $content-min-width;
   width: $content-width;
-
-  :deep(h1) {
-    font-size: 32px;
-    font-weight: bold;
-    margin: 0 0 $block-outer-padding;
-  }
-
-  :deep(h2) {
-    font-size: 24px;
-    font-weight: bold;
-    margin: 0 0 $block-outer-padding;
-  }
 }
 
 #main.wide {

src/components/StaticPage.vue

@@ -4,7 +4,7 @@
       <router-link class="back" to="/" title="Back">
         <img :src="require('@/assets/feather/arrow-left.svg')">
       </router-link>
-      <h1><slot name="heading"></slot></h1>
+      <h1 class="page-heading"><slot name="heading"></slot></h1>
       <div class="static-text"><slot name="text"></slot></div>
     </div>
   </div>
@@ -39,7 +39,7 @@
   }
 }
 
-h1 {
+h1.page-heading {
   font-size: 90px;
   font-weight: bold;
   margin: 0 0 20px;