From dffb10ff1a10d612a813fb85de5f0292c1f55732 Mon Sep 17 00:00:00 2001
From: Cameron Otsuka <cameron@otsuka.haus>
Date: Tue, 30 Dec 2025 16:39:15 -0800
Subject: [PATCH] use css vars for fonts, use h4 for content titles

---
 src/components/footer.astro         |  2 +-
 src/components/navigation.astro     |  2 +-
 src/components/ui/contentlist.astro |  4 +++-
 src/pages/reviews/index.astro       |  7 ++++++-
 src/pages/search.astro              |  2 +-
 src/styles/style.css                | 13 +++++++++----
 6 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/footer.astro b/src/components/footer.astro
index d03463c..71658ae 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -41,7 +41,7 @@ const currentYear = new Date().getFullYear();
     padding-top: 1rem;
   }
   address {
-    font-family: 'Public Sans Variable', sans-serif;
+    font-family: var(--font-sans);
   }
   [data-icon='mdi:rss'] {
     display: inline-block;
diff --git a/src/components/navigation.astro b/src/components/navigation.astro
index 65a614d..df9829e 100644
--- a/src/components/navigation.astro
+++ b/src/components/navigation.astro
@@ -16,7 +16,7 @@ import { menuItems } from '@utils/globals';
 
 <style>
   nav {
-    font-family: 'Public Sans Variable', sans-serif;
+    font-family: var(--font-sans);
     margin-bottom: 1rem;
   }
 </style>
diff --git a/src/components/ui/contentlist.astro b/src/components/ui/contentlist.astro
index 78bda07..a252a10 100644
--- a/src/components/ui/contentlist.astro
+++ b/src/components/ui/contentlist.astro
@@ -17,7 +17,9 @@ const sorted = sortByDate(entries);
     sorted.map((entry) => (
       <>
         <dt>
-          <a href={generateContentUrl(entry)}>{entry.data.title}</a>
+          <a href={generateContentUrl(entry)}>
+            <h4>{entry.data.title}</h4>
+          </a>
         </dt>
         {entry.data.description && <dd>{entry.data.description}</dd>}
       </>
diff --git a/src/pages/reviews/index.astro b/src/pages/reviews/index.astro
index a9e7d41..ca19c52 100644
--- a/src/pages/reviews/index.astro
+++ b/src/pages/reviews/index.astro
@@ -34,7 +34,9 @@ const sortedReviews = sortByDate(reviews);
             <tr>
               <td>{review.data.category}</td>
               <td>
-                <a href={generateContentUrl(review)}>{review.data.title}</a>
+                <h4>
+                  <a href={generateContentUrl(review)}>{review.data.title}</a>
+                </h4>
               </td>
               <td>
                 <Rating rating={review.data.rating} />
@@ -51,6 +53,9 @@ const sortedReviews = sortByDate(reviews);
   table {
     width: 100%;
   }
+  thead {
+    font-family: var(--font-sans);
+  }
   td:nth-child(2) {
     text-align: left;
   }
diff --git a/src/pages/search.astro b/src/pages/search.astro
index 79d9732..ede6de6 100644
--- a/src/pages/search.astro
+++ b/src/pages/search.astro
@@ -52,7 +52,7 @@ import Base from '@layouts/base.astro';
     <dl id="searchResults" aria-live="polite"></dl>
     <template id="searchResultTemplate">
       <dt class="searchResult">
-        <a href=""></a>
+        <h4><a href=""></a></h4>
       </dt>
       <dd class="excerpt"></dd>
     </template>
diff --git a/src/styles/style.css b/src/styles/style.css
index 2f5bff4..514f87b 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,6 +1,11 @@
 :root {
   color-scheme: light dark;
 
+  /* Fonts */
+  --font-serif: 'Source Serif 4 Variable', serif;
+  --font-sans: 'Public Sans Variable', sans-serif;
+  --font-mono: 'Source Code Pro Variable', monospace;
+
   /* Primary colors */
   --color-bg: light-dark(#e6e2d6, #000000);
   --color-text: light-dark(#000000, #e6e2d6);
@@ -25,7 +30,7 @@
 html {
   background-color: var(--color-bg);
   color: var(--color-text);
-  font-family: 'Source Serif 4 Variable', serif;
+  font-family: var(--font-serif);
   font-kerning: normal;
   font-weight: 400;
   font-size: 100%;
@@ -45,7 +50,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Public Sans Variable', sans-serif;
+  font-family: var(--font-sans);
   font-weight: 700;
 }
 strong {
@@ -119,12 +124,12 @@ td {
   padding: 0.5rem;
 }
 code {
-  font-family: 'Source Code Pro Variable', monospace;
+  font-family: var(--font-mono);
   font-size: 0.9rem;
 }
 .astro-code,
 .astro-code span {
-  font-family: 'Source Code Pro Variable', monospace;
+  font-family: var(--font-mono);
   margin-bottom: 1rem;
   padding: 0.1rem;
 }
-- 
2.52.0