Add proper separate reading font (paragraphs), clean up tag CSS

src/components/Summary.astro

@@ -28,11 +28,11 @@ const { url, date, title, tags, description } = Astro.props;
       </time>
     </a>
   </div>
-  <div class="mt-3">
-    <h2 class="font-medium inline mr-1">
-      <a href={url} class="underline decoration-white/60" data-astro-prefetch>{title}</a>
+  <div class="mt-3 leading-4 mb-2">
+    <h2 class="font-medium inline mr-1 leading-5">
+      <a href={url} class="underline decoration-white/30 decoration-1 underline-offset-3" data-astro-prefetch>{title}</a>
     </h2>
-    <i class="space-x-2">
+    <span class="tags space-x-2 font-mono">
       {
         tags.map((tag) => (
           <a data-astro-prefetch href={`/tags/${tag}`}>
@@ -40,7 +40,7 @@ const { url, date, title, tags, description } = Astro.props;
           </a>
         ))
       }
-    </i>
+    </span>
   </div>
   {description}
 </div>

src/layouts/General.astro

@@ -6,7 +6,7 @@ import type { Props as SEOProps } from "astro-seo";
 const repository_url = `https://github.com/${
   import.meta.env.PUBLIC_VERCEL_GIT_REPO_OWNER
 }/${import.meta.env.PUBLIC_VERCEL_GIT_REPO_SLUG}`;
-const build_revision = import.meta.env.PUBLIC_VERCEL_GIT_COMMIT_SHA;
+const build_revision = import.meta.env.PUBLIC_VERCEL_GIT_COMMIT_SHA ?? "unknown";
 
 interface Props {
   title?: string;

src/styles/global.scss

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
+
 @import "mixins";
 @import "helpers";
 @import "code";
@@ -50,13 +52,17 @@ html {
   }
 }
 
+:root {
+  font-family: "Source Serif 4", serif;
+  font-size: 23px;
+  line-height: 1.5;
+}
+
 body {
   padding: 0;
-  font-family: "CMU Serif", serif;
-  line-height: 1.5;
-  background: #0e0e0e;
   color: white;
-
+  background: #0e0e0e;
+  
   display: grid;
   justify-items: center;
   align-items: center;
@@ -96,6 +102,10 @@ blockquote:before {
   content: "“";
 }
 
+h1, h2, h3, h4, h5, h6, time {
+  font-family: "CMU Serif", serif;
+}
+
 h1,
 h2,
 h3,
@@ -131,8 +141,11 @@ hr {
 
 // Link colors within articles generally, or direct children of span
 article,
-span > {
-  a {
+span {
+  &.tags > a {
+    color: #a8cbff; 
+  }
+  > a {
     color: #90bcff;
   }
 }

tailwind.config.mjs

@@ -4,6 +4,8 @@ export default {
   theme: {
     extend: {
       fontFamily: {
+        source: ["Source Serif 4", "serif"],
+        serif: ["CMU Serif", "serif"],
         mono: ["CMU Typewriter Text", "monospace"],
       }
     },