lil type

assets/css/abstracts/variables.css

@@ -42,11 +42,11 @@
   --button-padding: var(--spacing-02) var(--spacing-03);
 
   /* Type */
-  --body-typeface: satoshi, system-ui, sans-serif;
-  --heading-typeface: cabinet, system-ui, sans-serif;
+  --body-typeface: archivo, system-ui, sans-serif;
+  --heading-typeface: clash, system-ui, sans-serif;
   --mono-typeface: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Menlo',
     monospace;
-  --letter-spacing: 0.2px;
+  --letter-spacing-expand: 0.2px;
   --letter-spacing-contract: -0.2px;
   --h1: 2.488rem;
   --h2: 2.074rem;

assets/css/base/typography.css

@@ -1,27 +1,27 @@
 @font-face {
-  font-family: cabinet;
+  font-family: clash;
   font-style: normal;
-  font-weight: 100 900;
-  src: url('/assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2'),
-    url('/assets/fonts/CabinetGrotesk-Variable.woff') format('woff');
+  font-weight: 200 700;
+  src: url('/assets/fonts/ClashDisplay-Variable.woff2') format('woff2'),
+    url('/assets/fonts/ClashDisplay-Variable.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
-  font-family: satoshi;
+  font-family: archivo;
   font-style: normal;
-  font-weight: 300 900;
-  src: url('/assets/fonts/Satoshi-Variable.woff2') format('woff2'),
-    url('/assets/fonts/Satoshi-Variable.woff') format('woff');
+  font-weight: 100 900;
+  src: url('/assets/fonts/Archivo-Variable.woff2') format('woff2'),
+    url('/assets/fonts/Archivo-Variable.woff') format('woff');
   font-display: swap;
 }
 
 @font-face {
-  font-family: satoshi-italic;
+  font-family: archivo-italic;
   font-style: italic;
-  font-weight: 300 900;
-  src: url('/assets/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
-    url('/assets/fonts/Satoshi-VariableItalic.woff') format('woff');
+  font-weight: 100 900;
+  src: url('/assets/fonts/Archivo-VariableItalic.woff2') format('woff2'),
+    url('/assets/fonts/Archivo-VariableItalic.woff') format('woff');
   font-display: swap;
 }
 
@@ -33,8 +33,8 @@ h5,
 h6 {
   margin: 3rem 0 1.38rem;
   font-family: var(--heading-typeface);
-  font-weight: 700;
-  line-height: 1.3;
+  font-weight: 500;
+  line-height: 1.1;
 }
 
 h1 {

assets/css/components/archive.css

@@ -106,6 +106,6 @@
 
   .sm-archive-month {
     font-size: 1.15rem;
-    letter-spacing: 0.3px;
+    letter-spacing: var(--letter-spacing-expand);
   }
 }

assets/css/components/button.css

@@ -7,7 +7,7 @@
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
-  letter-spacing: var(--letter-spacing);
+  letter-spacing: var(--letter-spacing-expand);
   border-radius: var(--radius);
 }
 

assets/css/components/header.css

@@ -5,7 +5,6 @@
 
 .sm-header-title {
   margin: 0;
-  font-weight: 900;
   text-wrap: balance;
 }
 
@@ -47,7 +46,7 @@
   line-height: 1;
   color: var(--element-light);
   text-transform: uppercase;
-  letter-spacing: var(--letter-spacing);
+  letter-spacing: var(--letter-spacing-expand);
   background-color: var(--border-color);
   border-radius: var(--radius);
   translate: 0 -0.5em;

assets/css/components/hero.css

@@ -8,7 +8,7 @@
   text-decoration: underline;
   text-decoration-thickness: 3px;
 
-  :where(:hover, :focus-visible) {
+  &:where(:hover, :focus-visible) {
     text-decoration-color: var(--primary);
   }
 }

assets/css/components/toc.css

@@ -93,7 +93,7 @@
   font-size: var(--x-small);
   color: var(--element-light);
   text-transform: uppercase;
-  letter-spacing: var(--letter-spacing);
+  letter-spacing: var(--letter-spacing-expand);
   content: 'Contents';
   opacity: 0.5;
 }

assets/css/layout/navbar.css

@@ -4,7 +4,7 @@
   padding: calc(var(--box-padding) / 2) var(--box-padding);
   margin-block-start: var(--bento-gap);
   font-size: var(--small);
-  line-height: 1.3rem;
+  line-height: 1.5rem;
   background-color: var(--surface-darker);
   border-radius: var(--radius);
 }
@@ -20,15 +20,13 @@
 }
 
 .sm-site-title {
-  margin: 0;
-  margin-inline: var(--spacing-01) var(--spacing-02);
-  overflow: hidden;
+  margin: 0 var(--spacing-02) 0 var(--spacing-01);
+  font-family: var(--body-typeface);
   font-size: inherit;
-  font-size: var(--small);
-  font-weight: 600;
-  line-height: 1.3rem;
+  font-weight: 500;
+  line-height: inherit;
   text-transform: uppercase;
-  letter-spacing: -0.2px;
+  letter-spacing: 0.2px;
   white-space: nowrap;
 }
 

assets/css/pages/post.css

@@ -75,7 +75,7 @@
 .sm-post-share p {
   font-size: var(--small);
   text-transform: uppercase;
-  letter-spacing: var(--letter-spacing);
+  letter-spacing: var(--letter-spacing-expand);
   opacity: 0.5;
 }
 
@@ -124,7 +124,7 @@
   font-size: var(--x-small);
   color: var(--element-light);
   text-transform: uppercase;
-  letter-spacing: var(--letter-spacing);
+  letter-spacing: var(--letter-spacing-expand);
   opacity: 0.8;
 }