From 2e62832756c58010d6a1e506fb6f26727173bfd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yannik=20R=C3=B6del?= <hey@yannik.info>
Date: Fri, 6 Aug 2021 15:23:14 +0200
Subject: [PATCH] Tweak some font styles

---
 styles/_base.scss       | 52 +++++++++++++++++++++--------------------
 styles/_components.scss |  8 +++----
 styles/_typography.scss | 14 +++++++----
 3 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/styles/_base.scss b/styles/_base.scss
index 2b55d56..7c21a33 100644
--- a/styles/_base.scss
+++ b/styles/_base.scss
@@ -1,54 +1,56 @@
 @use 'colors';
 @use 'layout';
+@use 'typography';
 
 body {
   margin: 0;
   color: colors.$main-text;
 }
 
-h2 {
-  margin: layout.$normal-gap 0 layout.$large-gap 0;
-  font-size: 2.2rem;
-  line-height: 4rem;
+%title {
+  margin: layout.$huge-gap 0 layout.$large-gap 0;
+  font-size: typography.$title-size;
+  line-height: typography.$heading-line-height;
+  text-align: center;
+}
 
-  &:first-child {
-    margin-top: 0;
-  }
+h1 {
+  @extend %title;
+}
+
+%heading {
+  margin: layout.$large-gap 0 layout.$normal-gap 0;
+  font-size: typography.$heading-size;
+  line-height: typography.$heading-line-height;
 
   &:after {
     content: '';
     display: block;
     width: 8rem;
     height: 0.3rem;
+    margin-top: 0.2rem;
     border-radius: 0.5rem;
     background-color: colors.$blue-800;
   }
 }
 
-h3 {
-  margin: layout.$normal-gap 0;
-  font-size: 1.6rem;
-  line-height: 2rem;
-
-  &:first-child {
-    margin-top: 0;
-  }
+h2 {
+  @extend %heading;
 }
 
-section > h2:first-child {
-  margin-top: 0;
+%subheading {
+  margin: layout.$normal-gap 0;
+  font-size: typography.$subheading-size;
+  line-height: typography.$heading-line-height;
+  margin: layout.$normal-gap 0;
+}
+
+h3 {
+  @extend %subheading;
 }
 
 p {
   margin: layout.$normal-gap 0;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 a {
diff --git a/styles/_components.scss b/styles/_components.scss
index 0d2e5e0..5a3f528 100644
--- a/styles/_components.scss
+++ b/styles/_components.scss
@@ -1,3 +1,4 @@
+@use 'base';
 @use 'colors';
 @use 'layout';
 @use 'typography';
@@ -43,7 +44,6 @@
   a {
     display: block;
     padding: layout.$small-gap;
-    font-size: typography.$large-size;
     font-weight: typography.$emphasized-weight;
     text-align: center;
     text-decoration: none;
@@ -115,7 +115,7 @@
   > .site-logo {
     flex-grow: 1;
     margin: 0;
-    font-size: typography.$large-size;
+    font-size: typography.$subheading-size;
     text-decoration: none;
     @include header-item;
   }
@@ -193,7 +193,7 @@
     > div {
       display: inline-block;
       padding: layout.$small-gap layout.$normal-gap;
-      font-size: typography.$large-size;
+      font-size: typography.$subheading-size;
       background-color: colors.$yellow-600;
 
       > p:first-child {
@@ -208,7 +208,7 @@
     > .title {
       padding: 0 layout.$normal-gap;
       line-height: 5rem;
-      font-size: typography.$huge-size;
+      font-size: typography.$title-size;
       font-weight: typography.$emphasized-weight;
       background-color: colors.$teal-500;
     }
diff --git a/styles/_typography.scss b/styles/_typography.scss
index 735e2ac..09696a9 100644
--- a/styles/_typography.scss
+++ b/styles/_typography.scss
@@ -1,9 +1,13 @@
 $normal-weight: 400;
 $emphasized-weight: 600;
 
-$normal-size: 1rem;
-$large-size: 1.5rem;
-$huge-size: 2.2rem;
+$base-size: 1rem;
+$title-size: 2.44rem;
+$heading-size: 1.95rem;
+$subheading-size: 1.56rem;
+
+$base-line-height: 1.5;
+$heading-line-height: 1.3;
 
 $comfortaa-weights: (
   'Light': 300,
@@ -36,7 +40,6 @@ html {
   font-size: 100%;
   font-family: Comfortaa, $fallback-fonts;
   font-weight: $normal-weight;
-  line-height: 1.5;
 
   @supports (font-variation-settings: normal) {
     font-family: 'Comfortaa Variable', $fallback-fonts;
@@ -44,5 +47,6 @@ html {
 }
 
 body {
-  font-size: 1.2rem;
+  font-size: $base-size;
+  line-height: $base-line-height;
 }