perf: calculate heading font size dynamically (#983)

Author: cotes2020

_includes/related-posts.html

@@ -86,7 +86,7 @@ <h3 class="pt-2 mb-4 ms-1" data-toc-skip>
           <a href="{{ post.url | relative_url }}" class="card post-preview h-100">
             <div class="card-body">
               {% include datetime.html date=post.date class="small" lang=include.lang %}
-              <h3 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h3>
+              <h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
               <div class="text-muted small">
                 <p>
                   {% include no-linenos.html content=post.content %}

_sass/addon/commons.scss

@@ -39,42 +39,27 @@ body {
 
 /* --- Typography --- */
 
-h1 {
-  @extend %heading;
-
-  font-size: 1.9rem;
-}
-
-h2 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-
-  font-size: 1.5rem;
-}
-
-h3 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-
-  font-size: 1.2rem;
-}
+@for $i from 1 through 5 {
+  h#{$i} {
+    @extend %heading;
 
-h4 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
+    @if $i > 1 {
+      @extend %section;
+      @extend %anchor;
+    }
 
-  font-size: 1.15rem;
-}
+    @if $i < 5 {
+      $factor: 0.18rem;
 
-h5 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
+      @if $i == 1 {
+        $factor: 0.23rem;
+      }
 
-  font-size: 1.1rem;
+      font-size: 1rem + (5 - $i) * $factor;
+    } @else {
+      font-size: 1rem;
+    }
+  }
 }
 
 a {

_sass/layout/post.scss

@@ -348,7 +348,7 @@ h1 + .post-meta {
   }
 
   .card {
-    h3 {
+    h4 {
       @extend %text-color;
       @extend %text-clip;
     }