From 529888ad7ee277cef728e896c1a4852629017c10 Mon Sep 17 00:00:00 2001
From: thomasabishop <thomasabishop@tuta.com>
Date: Sat, 27 Dec 2025 17:22:26 +0000
Subject: [PATCH] style: use inter font

---
 src/index.css                  |  16 ++---
 src/styles/_variables.css      |   2 +-
 src/templates/BlogTemplate.jsx |  86 +++++++++++++-------------
 src/templates/MainTemplate.jsx | 110 ++++++++++++++++-----------------
 4 files changed, 108 insertions(+), 106 deletions(-)

diff --git a/src/index.css b/src/index.css
index 5f347ae..ed4eeb7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 @import "./styles/_variables.css";
 @import "tailwindcss";
 @import "tw-animate-css";
@@ -17,30 +17,32 @@ body {
 }
 
 .condensed {
-  font-family: "IBM Plex Sans Condensed";
+  font-family: "Inter";
 }
 
 figcaption {
   font-weight: 500;
-  font-family: "IBM Plex Sans Condensed";
+  font-family: "Inter";
 }
 
 h1 {
   color: var(--color-orange-light);
-  font-family: "IBM Plex Sans Condensed";
+  font-family: "Inter";
 }
 
 h2 {
-  font-family: "IBM Plex Sans";
+  font-family: "Inter";
   color: var(--color-green-light);
 }
 
 .h2-home {
-  font-family: "IBM Plex Sans Condensed";
+  font-family: "Inter";
+  font-weight: 600;
 }
 
 h3 {
-  font-family: "IBM Plex Sans";
+  font-family: "Inter";
+  font-weight: 600 !important;
 }
 
 .monospaced-font {
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index 4f349d2..4b25c4a 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -37,7 +37,7 @@
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
 	--font-monospaced: "IBM Plex Mono";
-	--font-sansserif: "IBM Plex Sans", sans-serif;
+	--font-sansserif: "Inter", sans-serif;
 }
 
 @theme inline {
diff --git a/src/templates/BlogTemplate.jsx b/src/templates/BlogTemplate.jsx
index 33b48e6..ce6fcd9 100644
--- a/src/templates/BlogTemplate.jsx
+++ b/src/templates/BlogTemplate.jsx
@@ -5,44 +5,44 @@ import { convertDate } from "@/utils/convertDate"
 import { usePosts } from "@/hooks/usePosts"
 
 const BlogTemplate = () => {
-  const { slug } = useParams()
-  const { posts } = usePosts()
-  const post = posts?.find((x) => x.slug === slug)
+	const { slug } = useParams()
+	const { posts } = usePosts()
+	const post = posts?.find((x) => x.slug === slug)
 
-  return (
-    <MainTemplate>
-      <div className="container mx-auto p-4 grow">
-        {!post ? (
-          <div>Loading...</div>
-        ) : (
-          <article className="prose prose-lg max-w-none">
-            <header className="mb-6 pb-4">
-              <h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-3">
-                {post?.title}
-              </h1>
-              <div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
-                <time datetime={convertDate(post?.date)} className="text-sm">
-                  {convertDate(post?.date)}
-                </time>
-                <div className="flex flex-wrap gap-3 align-center">
-                  {post?.tags?.map((tag, i) => (
-                    <Link
-                      className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
-                      key={i}
-                      to={`/tags/${tag}`}
-                    >
-                      {tag}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            </header>
+	return (
+		<MainTemplate>
+			<div className="container mx-auto p-4 grow">
+				{!post ? (
+					<div>Loading...</div>
+				) : (
+					<article className="prose prose-lg max-w-none">
+						<header className="mb-6 pb-4">
+							<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-2">
+								{post?.title}
+							</h1>
+							<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
+								<time datetime={convertDate(post?.date)} className="text-sm">
+									{convertDate(post?.date)}
+								</time>
+								<div className="flex flex-wrap gap-3 align-center">
+									{post?.tags?.map((tag, i) => (
+										<Link
+											className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
+											key={i}
+											to={`/tags/${tag}`}
+										>
+											{tag}
+										</Link>
+									))}
+								</div>
+							</div>
+						</header>
 
-            <div
-              className="
-							[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#ebdbb2]!
-							[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#ebdbb2]!
-							[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#ebdbb2]!
+						<div
+							className="
+							[&>h2]:text-2xl [&>h2]:font-bold [&>h2]:my-4 [&>h2]:text-[#ebdbb2]!
+							[&>h3]:text-xl [&>h3]:font-bold [&>h3]:my-4 [&>h3]:text-[#ebdbb2]!
+							[&>h4]:text-lg [&>h4]:font-bold [&>h4]:my-4 [&>h4]:text-[#ebdbb2]!
 							[&>p]:leading-7 [&>p:not(:first-child)]:mt-4
 							[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
 							[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground 
@@ -65,13 +65,13 @@ const BlogTemplate = () => {
 							[&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted
 							[&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right
 								"
-              dangerouslySetInnerHTML={{ __html: post?.html }}
-            />
-          </article>
-        )}
-      </div>
-    </MainTemplate>
-  )
+							dangerouslySetInnerHTML={{ __html: post?.html }}
+						/>
+					</article>
+				)}
+			</div>
+		</MainTemplate>
+	)
 }
 
 export default BlogTemplate
diff --git a/src/templates/MainTemplate.jsx b/src/templates/MainTemplate.jsx
index 213c0d4..cdb8e3d 100644
--- a/src/templates/MainTemplate.jsx
+++ b/src/templates/MainTemplate.jsx
@@ -3,66 +3,66 @@
 import gruvboxComputer from "../images/gruvbox-computer.svg"
 import { Link } from "react-router"
 const Header = () => {
-  return (
-    <header className="py-6">
-      <nav className="bg-sidebar container mx-auto justify-between flex gap-1">
-        <Link to="/">
-          <div className="scanlined">
-            <img src={gruvboxComputer} className="w-11" />
-          </div>
-        </Link>
-        <ul class="flex space-x-4 px-4 py-2">
-          <li class="flex flex-col items-center justify-center">
-            <Link
-              class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
-              to="/posts"
-            >
-              posts
-            </Link>
-          </li>
-          <li class="flex flex-col items-center justify-center">
-            <Link
-              class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
-              to="/about"
-            >
-              about
-            </Link>
-          </li>
-        </ul>
-      </nav>
-    </header>
-  )
+	return (
+		<header className="py-6">
+			<nav className="bg-sidebar container mx-auto justify-between flex gap-1">
+				<Link to="/">
+					<div className="scanlined">
+						<img src={gruvboxComputer} className="w-11" />
+					</div>
+				</Link>
+				<ul class="flex space-x-4 px-4 py-2 text-sm">
+					<li class="flex flex-col items-center justify-center">
+						<Link
+							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
+							to="/posts"
+						>
+							posts
+						</Link>
+					</li>
+					<li class="flex flex-col items-center justify-center">
+						<Link
+							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
+							to="/about"
+						>
+							about
+						</Link>
+					</li>
+				</ul>
+			</nav>
+		</header>
+	)
 }
 
 const Footer = () => {
-  return (
-    <footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
-      <nav>
-        <ul className="flex flex-row justify-start gap-4">
-          <li className="flex flex-col items-center justify-center">
-            <a
-              className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
-              href="https://forgejo.systemsobscure.net/thomasabishop"
-              target="blank"
-            >
-              forgejo
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </footer>
-  )
+	return (
+		<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
+			<nav>
+				<ul className="flex flex-row justify-start gap-4">
+					<li className="flex flex-col items-center justify-center">
+						<a
+							className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
+							href="https://forgejo.systemsobscure.net/thomasabishop"
+							target="blank"
+						>
+							forgejo
+						</a>
+					</li>
+				</ul>
+			</nav>
+		</footer>
+	)
 }
 
 const MainTemplate = ({ children }) => {
-  return (
-    <div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper">
-      <main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
-        <Header />
-        <div>{children}</div>
-        <Footer />
-      </main>
-    </div>
-  )
+	return (
+		<div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper">
+			<main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
+				<Header />
+				<div>{children}</div>
+				<Footer />
+			</main>
+		</div>
+	)
 }
 export default MainTemplate