FIX: Use rem for font sizes in post headings (PR #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.

GitHub

And so it begins! :rocket: I hope we eventually replace most of ems :smiley:

And so it begins! I hope we eventually replace most of ems

I read articles about em vs rem and there are a lot of discussions between the two. There are many who recommend rem for “components” and then em for text. Others who recommend em for text and rem for everything else. And then, there’s me who uses rem for text against many’s opinion. In this case however, I think it is the best solution.

Do we need to add SCSS variables at all? Can we directly use var(--font-up-3-rem) etc. instead?

(I think the existing $font-up/down variables are there for legacy reasons, we should eventually phase them out as well.)

I did not know why we still use SCSS variables and I did not want to break consistency. I will push a follow up commit.