use css vars for fonts, use h4 for content titles

diff --git a/src/components/footer.astro b/src/components/footer.astro
index d03463c0094939d866746add4ca585fb0ea091c4..71658aea43b50d25fada55bedcb9982b216cffeb 100644 (file)
--- 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 65a614d2bd6767cacb77d9903befb1fabe8155e7..df9829e01b5241ff9f289382ea79a8e752c24f8a 100644 (file)
--- 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 78bda07ecd0c4f6bec47ece52fd8ad134d6a42b4..a252a10839fbd0e8f680dd7a1ab6c084a82ed858 100644 (file)
--- 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 a9e7d4198c23498d3b94643aec6571a854f14347..ca19c526e23101747924c3a954e4984016cdcde4 100644 (file)
--- 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 79d9732a4d9298474513f20e9e6eab10ffc85ba1..ede6de6429d36630b47bf926d2890e07e4edf21a 100644 (file)
--- 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 2f5bff4bfb884e7fcb99e05ff113d162e19e9f39..514f87b07bb3691999c91134725a45ae32f178fe 100644 (file)
--- 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;
 }