feat(style): custom font for titles

1 files changed, 29 insertions, 10 deletions

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 0d112e5..c4b3165 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -8,32 +8,48 @@ $bp-mid: 1000px; // video disabled
 $bp-small: 630px;
 $bp-tiny: 500px;
 
-body {
+@font-face {
+  font-family: "Benedict";
+  src: url("/benedict.woff2") format("woff2"), url("/benedict.ttf") format("ttf");
+}
+
+@font-face {
+  font-family: "League Gothic";
+  src: url("/league_gothic.woff2") format("woff2"), url("/league_gothic.ttf") format("ttf");
+}
+
+:root {
   font-size: 22px;
+}
+
+body {
   background: $background;
   color: $text;
   font-family: "Raveo", Inter, Roboto, Arial, "Liberation Sans", sans-serif;
 }
 
 h1 {
-  font-size: 3em;
+  font-size: 4rem;
   font-weight: bold;
-  margin-bottom: 1rem;
-  font-family: serif;
+  //margin-bottom: 1rem;
+  font-family: Benedict, serif;
 }
 
 h2 {
-  font-size: 2em;
+  font-size: 3rem;
   font-weight: bold;
   margin-bottom: 2rem;
+  font-family: "League Gothic", serif;
 }
 
 h3 {
-  font-size: 1.5em;
+  font-size: 2rem;
+  font-weight: bold;
+  font-family: Benedict, serif;
 }
 
 h4 {
-  font-size: 1.25em;
+  font-size: 1.25rem;
 }
 
 p {
@@ -47,7 +63,7 @@ p {
 
 ul {
   list-style: disc outside;
-  margin-top: -0.5rem;
+  margin-top: -0.75rem;
   margin-left: 1em;
 }
 
@@ -102,7 +118,8 @@ header {
 .tags {
   display: flex;
   gap: 0.5rem 1rem;
-  font-size: 1.75rem;
+  font-size: 2rem;
+  font-family: "League Gothic", sans-serif;
   @media only screen and (max-width: $bp-mid) {
     flex-wrap: wrap;
     & *:nth-child(2) {
@@ -160,7 +177,6 @@ section[data-scroll] .content {
 
   &__header {
     text-align: center;
-    margin-bottom: 1rem;
 
     & h2 {
       margin-bottom: 1rem;
@@ -193,6 +209,9 @@ section[data-scroll] .content {
 
   & h3 {
     margin-bottom: 2rem;
+    font-family: "Raveo", Inter, Roboto, Arial, "Liberation Sans", sans-serif;
+    font-size: 1.75rem;
+    font-weight: normal;
   }
 }