feat: typography

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "The source for my personal site, blog and portfolio. Build using 11ty and hosted on Netlify.",
   "main": "index.html",
   "scripts": {

src/_includes/base.liquid

@@ -29,13 +29,15 @@
       rel="icon"
       type="image/svg+xml">
     <link href="/assets/icons/apple-touch-icon.png?v={% version %}" rel="apple-touch-icon">
-    <link href="/assets/styles/tailwind.css?v={% version %}" rel="stylesheet" />
     {% capture css %}
       {% render "../assets/styles/prism.css" %}
+      {% render "../assets/styles/ml.css" %}
+      {% render "../assets/styles/silka.css" %}
     {% endcapture %}
     <style>
       {{ css | cssmin }}
     </style>
+    <link href="/assets/styles/tailwind.css?v={% version %}" rel="stylesheet" />
     <link rel="webmention" href="https://webmention.io/coryd.dev/webmention" />
     <link rel="pingback" href="https://webmention.io/coryd.dev/xmlrpc" />
     <link

src/assets/styles/prism.css

@@ -1,12 +1,13 @@
 /**
  * Catppuccin Prism theme
  */
-code[class*="language-"],
-pre[class*="language-"] {
+code[class*='language-'],
+pre[class*='language-'] {
   color: #d9e0ee;
   background: none;
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: ml, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -23,22 +24,22 @@ pre[class*="language-"] {
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+pre[class*='language-'] {
   padding: 1em;
-  margin: .5em 0;
+  margin: 0.5em 0;
   overflow: auto;
   border-radius: 0.3em;
 }
 
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
   background: #1e1d2f;
 }
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
   white-space: normal;
 }
 
@@ -50,11 +51,11 @@ pre[class*="language-"] {
 }
 
 .token.punctuation {
-  color: #dce0e8
+  color: #dce0e8;
 }
 
 .namespace {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -115,4 +116,4 @@ pre[class*="language-"] {
 
 .token.entity {
   cursor: help;
-}
+}

tailwind.config.js

@@ -13,8 +13,8 @@ module.exports = {
         14: '3.5rem',
       },
       fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
-        mono: ['ui-monospace', 'SFMono-Regular', ...defaultTheme.fontFamily.mono],
+        sans: ['silka', 'Inter', ...defaultTheme.fontFamily.sans],
+        mono: ['ml', ...defaultTheme.fontFamily.mono],
       },
       backgroundImage: {
         'cover-gradient':

tailwind.css

@@ -89,6 +89,7 @@ li > a {
 }
 
 code {
+  @apply font-mono;
   @apply text-gray-50;
   padding: 0.25rem;
 }
@@ -129,12 +130,6 @@ pre {
   background: theme(colors.blue.800);
 }
 
-code[class*='language-'],
-pre[class*='language-'] {
-  @apply font-mono;
-  font-weight: 400 !important;
-}
-
 [data-tablericon-name] {
   stroke-width: 1.4;
 }