Added better font for text (Iosevka Aile)

8 files changed, 54 insertions, 20 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 8db3505..1536605 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -14,6 +14,30 @@
         url('/iosevka-term-ss09-bold.woff2') format('woff2');
 }
 
+@font-face {
+    font-family: 'Iosevka Aile';
+    font-style: normal;
+    font-weight: normal;
+    src: //local('Iosevka Aile'), 
+        url('/iosevka-aile-regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Iosevka Aile';
+    font-style: normal;
+    font-weight: bold;
+    src: //local('Iosevka Aile Bold'), 
+        url('/iosevka-aile-bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: normal;
+    src: //local('IBM Plex Sans'), 
+        url('/IBMPlexSans-Regular.woff2') format('woff2');
+}
+
 ::selection {
     background-color: var(--select--bg);
     color: var(--select--fg);
@@ -26,14 +50,13 @@ img::selection {
 html,
 pre,
 code {
-    font-family: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier,
-        monospace;
-    font-feature-settings: 'calt' 0, 'dlig' 1;
+    font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
 }
 
 html {
     background-color: var(--bg);
     color: var(--fg);
+    font-family: $font-fam--text;
     font-size: px-to-em($font-size, 16px);
     line-height: $line-height;
 }
@@ -43,6 +66,11 @@ body {
     padding: 0;
 }
 
+pre,
+code {
+    font-family: $font-fam--mono;
+}
+
 code {
     color: var(--code--fg);
 }
@@ -54,10 +82,6 @@ pre {
     code {
         color: currentColor;
     }
-
-    strong {
-        font-weight: normal;
-    }
 }
 
 strong {
@@ -82,6 +106,7 @@ li {
         width: $subcontent--indent;
         margin-left: -1 * $subcontent--indent;
         color: var(--fg-hi);
+        font-family: $font-fam--mono;
     }
 }
 
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index f40faad..ea831a6 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,13 +1,17 @@
-$font-size: 17px;
+$font-fam--text: 'Iosevka Aile', 'IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans',
+    Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif;
+$font-fam--mono: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier,
+    monospace;
+$font-size: 16px;
 $line-height: 1.7;
 
-$code-block--font-size: $font-size - 1;
+$code-block--font-size: 16px;
 $code-block--line-height: 1.4;
 
-$content--width: 80ch;
+$content--width: 42em;
 $content--h1--font-size: $font-size + 1;
 
-$subcontent--indent: 4ch;
+$subcontent--indent: 2em;
 
 $container--pad-h: 2rem;
 $container--pad-h--sm: 1rem;
@@ -15,18 +19,18 @@ $container--pad-v: $line-height * 2rem;
 $container--pad-v--sm: $line-height * 1rem;
 
 $nav--font-size: $font-size - 1;
-$nav--item--spacing: 4ch;
-$nav--item--spacing--sm: 3ch;
-$nav--item--pad-h: 1ch;
-$nav--item--pad-v: .8em;
+$nav--item--spacing: 2em;
+$nav--item--spacing--sm: 1.5em;
+$nav--item--pad-h: .5em;
+$nav--item--pad-v: .9em;
 
 $footer--pad-v: .8em;
 
-$page--item-prefix--max-chars: 3ch;
-$page--item-prefix--pad: 2ch;
+$page--item-prefix--max-chars: 1.5em;
+$page--item-prefix--pad: 1em;
 $page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
 
-$page--item-prefix--max-chars--sm: 2ch;
+$page--item-prefix--max-chars--sm: 1em;
 $page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad;
 
 $breakpoints: (
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index 7fa79e1..bfcdc16 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -3,6 +3,7 @@
     margin-left: -1 * $page--item-prefix--width;
     padding-left: $page--item-prefix--width;
     overflow: hidden;
+    font-family: $font-fam--mono;
 
     &::after {
         content: str-repeat('░', 120);
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 6bed7ae..cd3ef14 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -15,6 +15,7 @@
         margin: 0;
         padding: $nav--item--pad-v 0;
         color: var(--nav--logo--fg);
+        font-family: $font-fam--mono;
         text-decoration: none;
 
         &:link,
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index 67e5387..9d1e991 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -12,6 +12,7 @@
             margin-left: -1 * $page--item-prefix--width;
             padding-right: $page--item-prefix--pad;
             color: var(--page--item-prefix--fg);
+            font-family: $font-fam--mono;
             font-weight: normal;
             text-align: right;
         }
diff --git a/assets/fonts/iosevka-aile-bold.ttf b/assets/fonts/iosevka-aile-bold.ttf
new file mode 100644
index 0000000..6db4acf
--- /dev/null
+++ b/assets/fonts/iosevka-aile-bold.ttf
diff --git a/assets/fonts/iosevka-aile-regular.ttf b/assets/fonts/iosevka-aile-regular.ttf
new file mode 100644
index 0000000..7dba5b6
--- /dev/null
+++ b/assets/fonts/iosevka-aile-regular.ttf
diff --git a/content/index.md b/content/index.md
index 84be80b..9050478 100644
--- a/content/index.md
+++ b/content/index.md
@@ -19,5 +19,7 @@ Welcome to my website! I'm Volpeon, a red fox doing human things such as program
 
 ## OMEMO Fingerprints
 
-- CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449  
-- C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08
+```plain
+CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449
+C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08
+```