change font

src/components/Datetime.tsx

@@ -71,7 +71,7 @@ const FormattedDatetime = ({ pubDatetime, modDatetime }: DatetimesProps) => {
       <time dateTime={myDatetime.toISOString()}>{date}</time>
       <span aria-hidden="true"> | </span>
       <span className="sr-only">&nbsp;at&nbsp;</span>
-      <span className="text-nowrap">{time}</span>
+      {/* <span className="text-nowrap">{time}</span> */}
     </>
   );
 };

src/pages/index.astro

@@ -24,12 +24,11 @@ const socialCount = SOCIALS.filter(social => social.active).length;
   <main id="main-content">
     <section id="hero">
       <p>
-        Grassroots is a personal blog where I share my thoughts.
-        While the idea for this space was initially sparked by a
-        desire to share the notes I've accumulated over the
-        years, it will now be a home for a blend of musings,
-        reviews, and reflections on the things I love.
-        Please stay tuned!
+        Grassroots is a personal blog where I share my thoughts. While the idea
+        for this space was initially sparked by a desire to share the notes I've
+        accumulated over the years, it will now be a home for a blend of
+        musings, reviews, and reflections on the things I love. Please stay
+        tuned!
       </p>
       {
         // only display if at least one social link is enabled
@@ -47,7 +46,6 @@ const socialCount = SOCIALS.filter(social => social.active).length;
     {
       featuredPosts.length > 0 && (
         <>
-        {console.log(featuredPosts)}
           <section id="featured">
             <h2>Featured</h2>
             <ul>
@@ -106,7 +104,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
     @apply pb-6 pt-8;
   }
   #hero h1 {
-    @apply my-4 inline-block text-3xl font-bold sm:my-8 sm:text-5xl font-serif;
+    @apply my-4 inline-block font-serif text-3xl font-bold sm:my-8 sm:text-5xl;
   }
   #hero .rss-link {
     @apply mb-6;
@@ -131,7 +129,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
   }
   #featured h2,
   #recent-posts h2 {
-    @apply text-2xl font-bold tracking-wide font-serif;
+    @apply font-serif text-2xl font-bold tracking-wide;
   }
   .all-posts-btn-wrapper {
     @apply my-8 text-center;

src/styles/base.css

@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&display=swap');
-
+/* @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&display=swap"); */
+@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -36,35 +36,35 @@
     #dark-small-logo {
       display: none;
     }
-  
+
     #light-logo,
     html[data-theme="dark"] #dark-logo {
       display: block;
     }
-  
+
     #dark-logo,
     html[data-theme="dark"] #light-logo {
       display: none;
     }
   }
 
-/* Media query for screens smaller than 648px */
-@media (max-width: 648px) {
-  #light-logo,
-  #dark-logo {
-    display: none;
-  }
+  /* Media query for screens smaller than 648px */
+  @media (max-width: 648px) {
+    #light-logo,
+    #dark-logo {
+      display: none;
+    }
 
-  #light-small-logo,
-  html[data-theme="dark"] #dark-small-logo {
-    display: block;
-  }
+    #light-small-logo,
+    html[data-theme="dark"] #dark-small-logo {
+      display: block;
+    }
 
-  #dark-small-logo,
-  html[data-theme="dark"] #light-small-logo {
-    display: none;
+    #dark-small-logo,
+    html[data-theme="dark"] #light-small-logo {
+      display: none;
+    }
   }
-}
   body {
     @apply flex min-h-[100svh] flex-col bg-skin-fill font-sans text-skin-base selection:bg-skin-accent/70 selection:text-skin-inverted;
   }

tailwind.config.cjs

@@ -56,8 +56,8 @@ module.exports = {
       },
       fontFamily: {
         mono: ["IBM Plex Mono", "monospace"],
-        sans: ["Figtree"],
-        serif: ["Space Grotesk"]
+        sans: ["Jost"],
+        serif: ["Jost"]
       },
 
       typography: {