custom fonts, code styling

.eleventy.js

@@ -25,7 +25,7 @@ const markdownClassMapping = {
   h4: ['text-xl', 'mt-2', 'text-text'],
   h5: ['text-lg', 'mt-2', 'text-text'],
   h6: ['mt-2', 'text-text'],
-  blockquote: ['border-l-2', 'border-lavender', 'px-4', 'pt-4', 'pb-px', 'my-8', 'bg-mantle'],
+  blockquote: ['font-mono', 'italic', 'border-l-2', 'border-lavender', 'px-4', 'pt-4', 'pb-px', 'my-8', 'bg-mantle'],
   a: ['link'],
   s: ['text-red'],
   p: ['mb-4', 'text-text', 'leading-7'],
@@ -60,6 +60,7 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.setLibrary('md', md);
 
+  eleventyConfig.addPassthroughCopy('assets');
   eleventyConfig.addPassthroughCopy('img');
   eleventyConfig.addPassthroughCopy('files');
 

_includes/base-footer.html

@@ -4,7 +4,7 @@
       <div class="mt-12 rounded shadow-xl shadow-mauve/40 overflow-hidden shadow divide-y divide-crust contrast-more:divide-mantle sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
         {%- for navItem in links -%}
           <div class="relative group bg-base/75 contrast-more:bg-crust p-6">
-            <h3 class="text-lg">
+            <h3 class="font-serif text-lg">
               <a href="{{navItem.url}}" class="link">
                 <!-- Extend touch target to entire panel -->
                 <span class="absolute inset-0" aria-hidden="true"></span>

_includes/blog-list.njk

@@ -3,7 +3,7 @@
 <main class="max-w-4xl mx-auto sm:px-6 lg:px-8">
   <div class="max-w-3x1 mx-auto mb-4 px-2 py-1 sm:rounded contrast-more:bg-base">
     <div>
-      <h1 class="text-6xl tracking-tight text-pink">
+      <h1 class="text-6xl tracking-tight text-pink font-serif">
         {{ page.fileSlug | capitalize }}
       </h1>
       <div class="mt-3 text-xl text-subtext1 sm:mt-4">
@@ -17,7 +17,7 @@
       {%- for post in collections.posts | reverse -%}
         <div class="flex flex-col gap-1">
           <a href="{{ post.url }}" class="link text-2xl flex flex-col gap-2">
-            <h2 class="text-2xl order-last">{{ post.data.title }}</h2>
+            <h2 class="text-2xl order-last font-serif">{{ post.data.title }}</h2>
             <div class="order-first bg-mauve rounded">
               <img
                 class="
@@ -32,7 +32,7 @@
           <p class="text-text">
             {{ post.data.description }}
           </p>
-          <p class="text-sm text-mauve">
+          <p class="text-xs text-mauve">
             <time datetime="{{ post.data.date | date('YYYY-MM-DD') }}">{{ post.data.date | date }}</time>
           </p>
         </div>

_includes/content.njk

@@ -4,15 +4,13 @@
   <div class="max-w-3x1 mx-auto mb-4 px-2 py-1 sm:rounded contrast-more:bg-base">
     <div class="flex flex-wrap items-baseline">
       <h1 class="my-2 text-6xl tracking-tight text-pink contrast-more:contrast-150">
-        {{ title }}
-        <small class="inline-block h-1 text-xl text-text">
+        <span class="font-serif">{{ title }}</span>
+        <small class="inline-block h-1 text-xl text-text font-light">
           in <a href="/{{tags[0]}}" class="link">{{ tags[0] | capitalize }}</a>
         </small>
       </h1>
     </div>
-    <p class="ml-8 text-sm text-gray-500 contrast-more:contrast-150">
-      {{description | markdown | safe}}
-    </p>
+    {{description | markdown | safe}}
   </div>
 
   <div class="mx-2 bg-base dark:bg-base/85 rounded contrast-more:bg-crust shadow border-l-2 border-yellow">

_includes/pinned.njk

@@ -3,7 +3,7 @@
 <main class="max-w-7xl mx-auto px-2">
   <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
     <div class="p-2 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
-      <h1 class="mt-2 mb-8 text-4xl tracking-tight">
+      <h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight">
         {{ title | markdown | safe }}
       </h1>
       <div class="mt-3 max-w-2xl">
@@ -22,7 +22,7 @@
           <a href="{{ content.url }}" class="motion-safe:transition-colors bg-mauve block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
             <div class="rounded-tl rounded-tr h-16 w-full bg-center bg-105% opacity-50 saturate-0 contrast-50 overflow-hidden" style="background-image: url('{{ content.data.image }}')">
             </div>
-            <h3 class="bg-mauve h-20 p-3 text-xl text-base">
+            <h3 class="font-serif bg-mauve h-20 p-3 text-xl text-base">
             <span class="line-clamp-2" title="{{ content.data.title }}">
                 {{ content.data.title }}
               </span>

styles.css

@@ -2,6 +2,38 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  @font-face {
+    font-family: 'Sora';
+    font-style: normal;
+    src: url(/assets/fonts/Sora-Medium.ttf)
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    src: url(/assets/fonts/Inter-VariableFont_opsz,wght.ttf)
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    src: url(/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf)
+  }
+
+  @font-face {
+    font-family: 'VictorMono';
+    font-style: normal;
+    src: url(/assets/fonts/VictorMono-Light.ttf)
+  }
+
+  @font-face {
+    font-family: 'VictorMono';
+    font-style: italic;
+    src: url(/assets/fonts/VictorMono-LightItalic.ttf)
+  }
+}
+
 @layer components {
   .link {
     @apply text-blue underline underline-offset-2 ;
@@ -20,16 +52,30 @@
   }
 }
 
+pre, p > code {
+  font-family: "VictorMono", monospace;
+  font-variant-ligatures: contextual;
+  color: rgb(var(--ctp-text));
+  outline: 1px solid rgb(var(--ctp-surface0));
+  border-radius: 0.25rem;
+}
+p > code {
+  padding: 0 .25rem;
+  display: inline-block;
+  background-color: rgb(var(--ctp-mantle));
+  color: rgb(var(--ctp-blue));
+  font-size: 0.875rem;
+}
 pre {
   padding: 0.5rem 0.75rem;
   margin: 0.5rem 0 ;
-  border-radius: 0.25rem;
-  color: rgb(var(--ctp-text));
-  background-color: rgb(var(--ctp-crust));
-  outline: 1px solid rgb(var(--ctp-surface0));
   overflow: auto;
   max-width: 100%;
   white-space: pre-wrap;
   page-break-inside: avoid;
-  font-family: monospace, monospace;
+  background-color: rgb(var(--ctp-crust));
+}
+
+.hljs-comment {
+  font-style: italic;
 }

tailwind.config.js

@@ -15,6 +15,11 @@ module.exports = {
       'cover': 'cover',
       'contain': 'contain',
       '105%': '105%',
+    },
+    fontFamily: {
+      'serif': ['Sora', 'serif'],
+      'sans': ['Inter', 'sans-serif'],
+      'mono': ['VictorMono', 'monospace']
     }
   },
   plugins: [