perf: calculate heading font size dynamically (#983)

_includes/related-posts.html

@@ -86,7 +86,7 @@
           <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 {
+@for $i from 1 through 5 {
-  @extend %heading;
+  h#{$i} {
+    @extend %heading;
 
-  font-size: 1.9rem;
+    @if $i > 1 {
-}
+      @extend %section;
+      @extend %anchor;
+    }
 
-h2 {
+    @if $i < 5 {
-  @extend %heading;
+      $factor: 0.18rem;
-  @extend %section;
-  @extend %anchor;
 
-  font-size: 1.5rem;
+      @if $i == 1 {
-}
+        $factor: 0.23rem;
+      }
 
-h3 {
+      font-size: 1rem + (5 - $i) * $factor;
-  @extend %heading;
+    } @else {
-  @extend %section;
+      font-size: 1rem;
-  @extend %anchor;
+    }
-
+  }
-  font-size: 1.2rem;
-}
-
-h4 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-
-  font-size: 1.15rem;
-}
-
-h5 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
-
-  font-size: 1.1rem;
 }
 
 a {

_sass/layout/post.scss

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