1 files changed, 28 insertions, 36 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 1536605..1cd5547 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,41 +1,23 @@
 @font-face {
-    font-family: 'Iosevka Term SS09';
-    font-style: normal;
-    font-weight: normal;
-    src: //local('Iosevka SS09'), 
-        url('/iosevka-term-ss09-regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Iosevka Term SS09';
-    font-style: normal;
-    font-weight: bold;
-    src: //local('Iosevka SS09 Bold'), 
-        url('/iosevka-term-ss09-bold.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Iosevka Aile';
+    font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: normal;
-    src: //local('Iosevka Aile'), 
-        url('/iosevka-aile-regular.woff2') format('woff2');
+    src: //local('IBM Plex Sans'), 
+        url('/IBMPlexSans-Regular.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'Iosevka Aile';
+    font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: bold;
-    src: //local('Iosevka Aile Bold'), 
-        url('/iosevka-aile-bold.woff2') format('woff2');
+    src: url('/IBMPlexSans-Bold.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'IBM Plex Sans';
+    font-family: 'Garet Variable';
     font-style: normal;
-    font-weight: normal;
-    src: //local('IBM Plex Sans'), 
-        url('/IBMPlexSans-Regular.woff2') format('woff2');
+    font-weight: 50 950;
+    src: url('/GaretVariable.woff2') format('woff2-variations');
 }
 
 ::selection {
@@ -54,8 +36,8 @@ code {
 }
 
 html {
-    background-color: var(--bg);
-    color: var(--fg);
+    background-color: prop(--colors --bg);
+    color: prop(--colors --fg);
     font-family: $font-fam--text;
     font-size: px-to-em($font-size, 16px);
     line-height: $line-height;
@@ -85,7 +67,7 @@ pre {
 }
 
 strong {
-    color: var(--fg-lo);
+    color: prop(--colors --fg-lo);
     font-weight: bold;
 }
 
@@ -105,7 +87,7 @@ li {
         position: absolute;
         width: $subcontent--indent;
         margin-left: -1 * $subcontent--indent;
-        color: var(--fg-hi);
+        color: prop(--colors --fg-hi);
         font-family: $font-fam--mono;
     }
 }
@@ -141,12 +123,12 @@ dd {
 }
 
 dt {
-    color: var(--fg-lo);
+    color: prop(--colors --fg-lo);
     font-weight: bold;
 
     &::after {
         content: ':';
-        color: var(--fg);
+        color: prop(--colors --fg);
         font-weight: normal;
     }
 }
@@ -157,13 +139,23 @@ dd {
 
 h1,
 h2,
-h3 {
+h3,
+h4,
+h5,
+h6 {
     margin: ($line-height * 2em) 0 0;
+    font-family: $font-fam--large;
     font-size: 1em;
+    font-weight: 600;
+    line-height: 1.2;
+    font-feature-settings: 'ss02' 1;
 
     + h1,
     + h2,
-    + h3 {
+    + h3,
+    + h4,
+    + h5,
+    + h6 {
         margin-top: $line-height * 1em;
     }
 }
@@ -205,12 +197,12 @@ hr {
     height: 1px;
     margin: ($line-height * 1em) 0;
     border: 0;
-    background-color: var(--obj);
+    background-color: prop(--colors --obj);
 }
 
 blockquote,
 pre {
     margin: ($line-height * 1em) 0 0 1px;
     padding-left: calc(#{$subcontent--indent} - 3px);
-    border-left: 2px solid var(--obj);
+    border-left: 2px solid prop(--colors --obj);
 }