Merge pull request #29 from moiSentineL/fonts

font revamp

Author: moiSentineL

src/_layouts/base.njk

@@ -41,7 +41,13 @@
         href="https://unpkg.com/littlefoot/dist/littlefoot.css"
         /> #}
     <link rel="stylesheet" href="/css/css.css">
-    <link rel="preload" href="/css/IBMPlexMono-Regular.ttf" as="font" crossorigin>
+    {# <link rel="preload" href="/css/IBMPlexMono-Regular.ttf" as="font" crossorigin> #}
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    {# <link href="https://fonts.googleapis.com/css2?family=Recursive:wght,[email protected],0.5&display=swap" rel="stylesheet"> #}
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
 
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">  

src/_layouts/homebase.njk

@@ -31,7 +31,10 @@
     <meta name="theme-color" content="#000000">
 
     <link rel="stylesheet" href="/css/home.css">
-    <link rel="preload" href="/css/IBMPlexMono-Regular.ttf" as="font" crossorigin>
+    {# <link rel="preload" href="/css/IBMPlexMono-Regular.ttf" as="font" crossorigin> #}
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">

src/styles/css.scss

@@ -4,10 +4,11 @@
   font-display: swap;
 }
 
-@font-face {
-  font-family: Recursive;
-  src: url("https://fonts.googleapis.com/css2?family=Recursive:wght,[email protected],0.5&display=swap");
-}
+// @import url('https://fonts.googleapis.com/css2?family=Recursive:CRSV,MONO@1,0.75&display=swap'); 
+      
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@90,200..900;100,200..900&display=swap');
+
+
 
 $transwhite: #e0e0e0;
 $pale-azure: #70d6ffff;
@@ -39,8 +40,8 @@ html {
   justify-content: center;
   margin: auto;
   line-height: 1.5;
-  font-size: 1.3em;
-  font-family: Recursive, monospace;
+  font-size: 1.2em;
+  font-family: Inconsolata, monospace;
 }
 
 .excerpt {
@@ -116,6 +117,15 @@ mjx-container {
   }
   pre,
   code {
+  }
+}
+
+@include theme(light) {
+  html {
+    color: black;
+  }
+  ::selection {
+    background: #c8fffd;
     background: #e0e0e0;
   }
   blockquote {
@@ -170,6 +180,8 @@ h3,
 h4,
 h5,
 h6 {
+  font-family: Inconsolata;
+  font-variation-settings: "wdth" 90;
   margin: 1em 0 0.5em;
 }
 .title {
@@ -196,10 +208,14 @@ ol {
   padding-right: 0.5em;
 
   @include theme(light) {
-    box-shadow: 0px 3px 0px black, 4px 0px 0px 0px black;
+    box-shadow:
+      0px 3px 0px black,
+      4px 0px 0px 0px black;
   }
   @include theme(dark) {
-    box-shadow: 0px 3px 0px #e0e0e0, 4px 0px 0px 0px #e0e0e0;
+    box-shadow:
+      0px 3px 0px #e0e0e0,
+      4px 0px 0px 0px #e0e0e0;
   }
 }
 

src/styles/home.scss

@@ -4,6 +4,7 @@
     font-display: swap;
 }
 
+
 @font-face {
     font-family: Recursive;
     src: url('https://fonts.googleapis.com/css2?family=Recursive:wght,[email protected],0.5&display=swap')
@@ -16,7 +17,7 @@ html {
     justify-content: center;
     margin: auto;
     line-height: 1.6;
-    font-size: 1.3em;
+    font-size: 1.1em;
     font-family: Recursive, monospace;
     align-items: center;
 }