From 52f5ee9cd3f92a6e8f25eaa203831546cda85db6 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 13 May 2023 09:03:13 +0800
Subject: [PATCH] perf: calculate heading font size dynamically (#983)

---
 _includes/related-posts.html |  2 +-
 _sass/addon/commons.scss     | 49 +++++++++++++-----------------------
 _sass/layout/post.scss       |  2 +-
 3 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/_includes/related-posts.html b/_includes/related-posts.html
index ee6f197..8476a6d 100644
--- a/_includes/related-posts.html
+++ b/_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 %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 6e78d78..36b9b82 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -39,42 +39,27 @@ body {
 
 /* --- Typography --- */
 
-h1 {
-  @extend %heading;
+@for $i from 1 through 5 {
+  h#{$i} {
+    @extend %heading;
 
-  font-size: 1.9rem;
-}
+    @if $i > 1 {
+      @extend %section;
+      @extend %anchor;
+    }
 
-h2 {
-  @extend %heading;
-  @extend %section;
-  @extend %anchor;
+    @if $i < 5 {
+      $factor: 0.18rem;
 
-  font-size: 1.5rem;
-}
+      @if $i == 1 {
+        $factor: 0.23rem;
+      }
 
-h3 {
-  @extend %heading;
-  @extend %section;
-  @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;
+      font-size: 1rem + (5 - $i) * $factor;
+    } @else {
+      font-size: 1rem;
+    }
+  }
 }
 
 a {
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 3e136e2..3d01b4d 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -348,7 +348,7 @@ h1 + .post-meta {
   }
 
   .card {
-    h3 {
+    h4 {
       @extend %text-color;
       @extend %text-clip;
     }