website

commit e531bfe2c43393cd0b5d7922a858f43260ee4e5f
parent 496a4e1d1e8185288c04c52da015634a83673f5c
Author: Michael Neuper <michael@michaelneuper.com>
Date:   Sun,  5 Nov 2023 10:20:14 +0200

Scale heading sized based on golden ratio

Diffstat:
M
assets/sass/layouts/content.scss
 | 
17
+++++++++--------
M
assets/sass/vars.scss
 | 
7
+++++++

2 files changed, 16 insertions(+), 8 deletions(-)
diff --git a/assets/sass/layouts/content.scss b/assets/sass/layouts/content.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../vars";
 
 .content {
@@ -150,32 +152,31 @@ button.copy-button {
 .content h4,
 .content h5,
 .content h6 {
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
-// TODO change to golden ratio
 .content h1 {
-  font-size: 2.4rem;
+  font-size: $f * math.pow($phi, 2);
 }
 
 .content h2 {
-  font-size: 1.8rem;
+  font-size: $f * math.pow($phi, math.div(3, 2));
 }
 
 .content h3 {
-  font-size: 1.4rem;
+  font-size: $f * $phi;
 }
 
 .content h4 {
-  font-size: 1.2rem;
+  font-size: $f * math.sqrt($phi);
 }
 
 .content h5 {
-  font-size: 1.1rem;
+  font-size: $f;
 }
 
 .content h6 {
-  font-size: 1rem;
+  font-size: math.div($f, math.sqrt($phi));
 }
 
 .content img {
diff --git a/assets/sass/vars.scss b/assets/sass/vars.scss
@@ -1,8 +1,15 @@
 @use "sass:math";
 
+// https://grtcalculator.com/math/
+
+$phi: math.div(1 + math.sqrt(5), 2);
+// $f: 1.1rem * math.sqrt($phi);
+$f: math.div(2.4rem, math.pow($phi, 2));
+
 $radius: 0.25rem;
 $margin: 1rem;
 $max-width: 70vw;
+// $max-width: math.pow(16 * $phi, 2) * (1 + 2 * $phi * (26 / 16 - $phi));
 $padding: math.div(100vw - $max-width, 2);
 $border: 2px;
 $mobile-breakpoint: 768px;