FIX: Use rem for font sizes in post headings (#13720)

FIX: Use rem for font sizes in post headings (#13720)

Size of headings increased proportionally with their nesting because their size was relative to the parent element (used em). This commit makes headings from posts use rem instead which are relative to the root HTML element.

test

looks the same as

test

now.
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index d96570a..3238f3e 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -124,27 +124,27 @@ $quote-share-maxwidth: 150px;
   }
 
   h1 {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3-rem);
   }
 
   h2 {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2-rem);
   }
 
   h3 {
-    font-size: $font-up-1;
+    font-size: var(--font-up-1-rem);
   }
 
   h4 {
-    font-size: $font-0;
+    font-size: var(--font-0-rem);
   }
 
   h5 {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1-rem);
   }
 
   h6 {
-    font-size: $font-down-2;
+    font-size: var(--font-down-2-rem);
   }
 
   a {
diff --git a/app/assets/stylesheets/common/font-variables.scss b/app/assets/stylesheets/common/font-variables.scss
index c64ccfd..4d6972e 100644
--- a/app/assets/stylesheets/common/font-variables.scss
+++ b/app/assets/stylesheets/common/font-variables.scss
@@ -20,6 +20,14 @@
   --font-down-5: 0.5em;
   --font-down-6: 0.4355em;
 
+  // Font-size definitions in rem used in cooked headings
+  --font-up-3-rem: 1.5157rem;
+  --font-up-2-rem: 1.3195rem;
+  --font-up-1-rem: 1.1487rem;
+  --font-0-rem: 1rem;
+  --font-down-1-rem: 0.8706rem;
+  --font-down-2-rem: 0.7579rem;
+
   // inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
   // with base at 15px, the below gives 16.05px
   --font-size-ios-input: 1.07em;

GitHub sha: d11fe6fde50e25bab9abf6f588d44734511dee2a

This commit appears in #13720 which was approved by CvX, pmusaraj, and awesomerobot. It was merged by SamSaffron.