partial font swap

src/components/Footer.astro

@@ -10,7 +10,7 @@ const t = useTranslations(lang);
 const year = new Date().getFullYear();
 ---
 
-<footer class="border-t border-border/80">
+<footer class="border-t border-border/80 font-mono">
   <div class="mx-auto flex max-w-3xl flex-col gap-2 px-4 py-8 text-sm text-text-muted sm:flex-row sm:items-center sm:justify-between sm:px-6">
     <p>
       &copy; {year} <span class="font-mono text-text">gabeefranco</span> &middot; {t('footer.rights')}

src/components/Header.astro

@@ -29,20 +29,20 @@ function isActive(href: string): boolean {
 ---
 
 <header class="sticky top-0 z-40 border-b border-border/80 bg-bg/85 backdrop-blur">
-  <div class="mx-auto flex max-w-3xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
+  <div class="mx-auto flex max-w-4/5 items-center justify-between gap-4 px-4 py-3 sm:px-6">
     <a href={homeHref} class="flex shrink-0 items-center gap-2.5" aria-label={t('site.name')}>
       <img src="/favicon.svg" alt="" width="32" height="32" class="size-8" />
       <span class="font-mono text-[15px] font-semibold tracking-tight text-text">{t('site.name')}</span>
     </a>
 
     <div class="flex items-center gap-2">
-      <nav class="hidden items-center gap-1 sm:flex" aria-label={t('nav.menu')}>
+      <nav class="hidden items-center gap-1 sm:flex justify-right" aria-label={t('nav.menu')}>
         {navLinks.map((link) => (
           <a
             href={link.href}
             aria-current={isActive(link.href) ? 'page' : undefined}
             class:list={[
-              'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',
+              'px-2 py-1 text-sm font-medium font-mono hover:underline',
               isActive(link.href)
                 ? 'bg-primary/10 text-primary'
                 : 'text-text-muted hover:bg-surface-alt hover:text-text',
@@ -58,9 +58,9 @@ function isActive(href: string): boolean {
         hreflang={otherLang}
         title={t('lang.switch')}
         aria-label={`${t('lang.switch')}: ${LANG_LABELS[otherLang]}`}
-        class="grid size-9 shrink-0 place-items-center rounded-full border border-border text-xs font-bold uppercase text-text-muted transition-colors hover:border-primary hover:text-primary"
+        class="text-accent bg-accent/10 px-2 py-1 font-mono text-xs hover:underline hover:cursor-pointer"
       >
-        {otherLang}
+        {`${t('lang.switch')}: ${LANG_LABELS[otherLang]}`}
       </a>
 
       <ThemeToggle lang={lang} />
@@ -83,7 +83,7 @@ function isActive(href: string): boolean {
               href={link.href}
               aria-current={isActive(link.href) ? 'page' : undefined}
               class:list={[
-                'rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                'rounded-lg px-3 py-2 text-xs font-medium transition-colors',
                 isActive(link.href)
                   ? 'bg-primary/10 text-primary'
                   : 'text-text-muted hover:bg-surface-alt hover:text-text',

src/components/HomeContent.astro

@@ -15,7 +15,7 @@ const postsHref = getLocalizedPath('/posts', lang);
 const aboutHref = getLocalizedPath('/about', lang);
 ---
 
-<section class="mx-auto max-w-3xl px-4 pb-4 pt-14 sm:px-6 sm:pt-20">
+<section class="mx-auto max-w-3xl px-4 pb-4 pt-14 sm:px-6 sm:pt-20 font-mono">
   <div class="flex flex-col items-start gap-8 sm:flex-row sm:items-center">
     <img
       src="/logo.png"
@@ -28,16 +28,16 @@ const aboutHref = getLocalizedPath('/about', lang);
       <p class="text-sm font-semibold uppercase tracking-wide text-primary">{t('hero.kicker')}</p>
       <h1 class="mt-2 text-3xl font-bold tracking-tight text-text sm:text-4xl">{t('hero.title')}</h1>
       <p class="mt-4 max-w-xl text-lg leading-relaxed text-text-muted">{t('hero.subtitle')}</p>
-      <div class="mt-6 flex flex-wrap gap-3">
+      <div class="mt-6 flex flex-wrap gap-5">
         <a
           href={postsHref}
-          class="rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-primary-hover"
+          class="text-primary hover:underline font-bold px-2 py-1 bg-primary/10"
         >
           {t('hero.cta.posts')}
         </a>
         <a
           href={aboutHref}
-          class="rounded-full border border-border px-5 py-2.5 text-sm font-semibold text-text transition-colors hover:border-primary hover:text-primary"
+          class="text-text hover:underline font-bold px-2 py-1 bg-text/5"
         >
           {t('hero.cta.about')}
         </a>
@@ -46,7 +46,7 @@ const aboutHref = getLocalizedPath('/about', lang);
   </div>
 </section>
 
-<section class="mx-auto max-w-3xl px-4 py-12 sm:px-6">
+<section class="mx-auto max-w-3xl px-4 py-12 sm:px-6 font-mono">
   <div class="flex items-baseline justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-text">{t('home.recent')}</h2>

src/components/PostCard.astro

@@ -13,12 +13,12 @@ const href = getLocalizedPath(`/posts/${slugOf(post)}`, lang);
 const tagsHref = (tag: string) => getLocalizedPath(`/tags/${tag}`, lang);
 ---
 
-<article class="group border-b border-border py-6 first:pt-0 last:border-b-0">
+<article class="group border-b border-border py-6 first:pt-0 last:border-b-0 font-mono">
   <a href={href} class="block">
     <time datetime={post.data.pubDate.toISOString()} class="text-xs font-medium uppercase tracking-wide text-text-muted">
       {formatDate(post.data.pubDate, lang)}
     </time>
-    <h3 class="mt-1.5 text-xl font-semibold text-text transition-colors group-hover:text-primary">
+    <h3 class="mt-1.5 text-xl font-semibold text-text transition-colors group-hover:text-primary group-hover:underline">
       {post.data.title}
     </h3>
     <p class="mt-1.5 text-[15px] leading-relaxed text-text-muted">{post.data.description}</p>
@@ -28,7 +28,7 @@ const tagsHref = (tag: string) => getLocalizedPath(`/tags/${tag}`, lang);
       {post.data.tags.map((tag) => (
         <a
           href={tagsHref(tag)}
-          class="rounded-full bg-surface-alt px-2.5 py-1 text-xs font-medium text-text-muted transition-colors hover:bg-accent/15 hover:text-accent"
+      class="text-text-muted bg-text-muted/10 px-1 py-0.5 text-sm hover:text-accent hover:bg-accent/10"
         >
           #{tag}
         </a>

src/components/ThemeToggle.astro

@@ -15,44 +15,14 @@ const t = useTranslations(lang);
   type="button"
   aria-label={t('theme.switch')}
   title={t('theme.switch')}
-  class="grid size-9 shrink-0 place-items-center rounded-full border border-border text-text-muted transition-colors hover:border-primary hover:text-primary"
+  class="text-accent bg-accent/10 px-2 py-1 font-mono text-xs hover:underline hover:cursor-pointer"
 >
-  <svg
+  {t('theme.switch')}
-    id="theme-toggle-sun"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="hidden size-[18px]"
-  >
-    <circle cx="12" cy="12" r="4"></circle>
-    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"
-    ></path>
-  </svg>
-  <svg
-    id="theme-toggle-moon"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="hidden size-[18px]"
-  >
-    <path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z"></path>
-  </svg>
 </button>
 
 <script is:inline>
   (function () {
     const btn = document.getElementById('theme-toggle');
-    const sun = document.getElementById('theme-toggle-sun');
-    const moon = document.getElementById('theme-toggle-moon');
-    if (!btn || !sun || !moon) return;
 
     function sync() {
       const isDark = document.documentElement.classList.contains('dark');