From 741a1b6429041dd48c0cf336def13223cec38185 Mon Sep 17 00:00:00 2001
From: thomasabishop <thomasabishop@tuta.com>
Date: Sun, 1 Mar 2026 15:24:59 +0000
Subject: [PATCH] interim commit

---
 src/components/EolasListing.jsx   |  90 +++++++++---------
 src/components/LanguagesChart.jsx |   2 +-
 src/components/Scorecard.jsx      |   2 +-
 src/containers/CodeStats.jsx      |   4 +-
 src/containers/PostListing.jsx    |   4 +-
 src/index.css                     |  96 ++++++++++---------
 src/pages/home.jsx                | 122 ++++++++++++------------
 src/styles/_variables.css         | 148 +++++++++++++++---------------
 src/templates/BlogTemplate.jsx    |  80 ++++++++--------
 src/templates/MainTemplate.jsx    | 110 +++++++++++-----------
 10 files changed, 332 insertions(+), 326 deletions(-)

diff --git a/src/components/EolasListing.jsx b/src/components/EolasListing.jsx
index db59768..06ca566 100644
--- a/src/components/EolasListing.jsx
+++ b/src/components/EolasListing.jsx
@@ -3,57 +3,57 @@ import eolasApi from "@/api/eolas-api"
 import { convertDate } from "@/utils/convertDate"
 
 const EolasEntries = ({ entries }) => {
-  return (
-    entries &&
-    entries.map((entry, i) => (
-      <ul>
-        <li className="mb-4">
-          <div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
-            <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
-              {convertDate(entry.last_modified)}
-            </span>
-            <a
-              href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
-              key={i}
-              className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 "
-            >
-              {entry.title.replace(/_/g, " ")}
-            </a>
-          </div>
-        </li>
-      </ul>
-    ))
-  )
+	return (
+		entries &&
+		entries.map((entry, i) => (
+			<ul>
+				<li className="mb-4">
+					<div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
+						<span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
+							{convertDate(entry.last_modified)}
+						</span>
+						<a
+							href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
+							key={i}
+							className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 "
+						>
+							{entry.title.replace(/_/g, " ")}
+						</a>
+					</div>
+				</li>
+			</ul>
+		))
+	)
 }
 
 const EolasListing = () => {
-  const { data, isLoading, error } = useQuery({
-    queryKey: [`eolas_listing`],
-    queryFn: () =>
-      eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data),
-  })
+	const { data, isLoading, error } = useQuery({
+		queryKey: [`eolas_listing`],
+		queryFn: () =>
+			eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data),
+	})
 
-  return (
-    <div className="container mx-auto py-4 px-1 md:p-4 grow">
-      <div className="space-my-8">
-        <section className="container">
-          <h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! h2-home scanlined px-2">
-            {`eolas recent`}
-          </h2>
+	return (
+		<div className="container mx-auto py-4 px-1 md:p-4 grow">
+			<div className="space-my-8">
+				<section className="container">
+					<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! h2-home">
+						{`Recent learning`}
+					</h2>
 
-          {isLoading && <div>Loading...</div>}
+					{isLoading && <div>Loading...</div>}
 
-          {error ? (
-            <div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">
-              Error fetching recent learning
-            </div>
-          ) : (
-            <EolasEntries entries={data?.data} />
-          )}
-        </section>
-      </div>
-    </div>
-  )
+					{error ? (
+						<div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">
+							Error fetching recent learning
+						</div>
+					) : (
+						<EolasEntries entries={data?.data} />
+					)}
+				</section>
+			</div>
+		</div>
+	)
 }
 
 export default EolasListing
diff --git a/src/components/LanguagesChart.jsx b/src/components/LanguagesChart.jsx
index b54d5f2..7f6a246 100644
--- a/src/components/LanguagesChart.jsx
+++ b/src/components/LanguagesChart.jsx
@@ -2,7 +2,7 @@ import MetricBar from "./MetricBar"
 
 const LanguagesChart = ({ chartData, error }) => {
 	return (
-		<div className="bg-sidebar p-3 my-4">
+		<div className="bg-sidebar p-3 my-4 mx-2 rounded-2xl">
 			<div className="text-muted-foreground text-sm pb-2">
 				programming languages
 			</div>
diff --git a/src/components/Scorecard.jsx b/src/components/Scorecard.jsx
index fa2e1dd..00758bd 100644
--- a/src/components/Scorecard.jsx
+++ b/src/components/Scorecard.jsx
@@ -1,6 +1,6 @@
 const Scorecard = ({ title, metric }) => {
 	return (
-		<div className="bg-sidebar p-3">
+		<div className="bg-sidebar p-3 rounded-2xl">
 			<div className="text-muted-foreground text-sm">{title}</div>
 			<div className="text-lg">{metric}</div>
 		</div>
diff --git a/src/containers/CodeStats.jsx b/src/containers/CodeStats.jsx
index 9cdc912..a68969d 100644
--- a/src/containers/CodeStats.jsx
+++ b/src/containers/CodeStats.jsx
@@ -71,7 +71,7 @@ const CodeStats = () => {
       <div className="space-my-8">
         <section className="container">
           <div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
-            <h2 className="text-2xl font-semibold mb-4 text-[#458588]!  h2-home scanlined px-2">
+            <h2 className="text-3xl font-semibold mb-4 text-[#458588]!  h2-home">
               {`code stats`}
             </h2>
             <div className="mb-4 text-sm text-muted">
@@ -79,7 +79,7 @@ const CodeStats = () => {
               {convertDateFriendly(data?.to)}
             </div>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mx-2">
             <Scorecard
               title="time coding"
               metric={
diff --git a/src/containers/PostListing.jsx b/src/containers/PostListing.jsx
index 4ac4f8b..28e19cd 100644
--- a/src/containers/PostListing.jsx
+++ b/src/containers/PostListing.jsx
@@ -8,13 +8,13 @@ const PostListing = ({ posts, title, showAllButton }) => {
     <div className="container mx-auto py-4 px-1 md:p-4 grow">
       <div className="space-my-8">
         <section className="container">
-          <h2 className="text-2xl font-semibold mb-4  block h2-home scanlined px-2">
+          <h2 className="text-3xl font-semibold mb-4  block h2-home">
             {`${title}`}
           </h2>
           {posts.map((post) => (
             <ul>
               <li className="mb-4">
-                <div className="flex justify-between flex-col relative hover:bg-[#504945]">
+                <div className="flex justify-between flex-col relative hover:bg-[#504945] hover:rounded-2xl p-2">
                   <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
                     {convertDate(post.date)}
                   </span>
diff --git a/src/index.css b/src/index.css
index bf3b986..12ecdc4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,91 +4,97 @@
 @import "tw-animate-css";
 
 * {
-	outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
+  outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
 }
 
 html {
-	font-family: var(--font-sansserif);
+  font-family: var(--font-sansserif);
 }
 
 body {
-	background-color: var(--background);
-	color: var(--foreground);
+  background-color: var(--background);
+  color: var(--foreground);
 }
 
 .condensed {
-	font-family: "Inter";
+  font-family: "IBM Plex Sans";
 }
 
 figcaption {
-	font-weight: 500;
-	font-family: "Inter";
+  font-weight: 500;
+  font-family: "IBM Plex Sans";
 }
 
 h1 {
-	color: var(--color-orange-light);
-	font-family: "Inter";
+  color: var(--color-orange-light);
+  font-family: "IBM Plex Sans";
 }
 
 h2 {
-	font-family: "Inter";
-	color: var(--color-green-light);
+  font-family: "IBM Plex Sans";
+  color: var(--color-green-light);
 }
 
 .h2-home {
-	font-family: "Inter";
-	font-weight: 600;
+  font-family: "IBM Plex Sans";
+  font-weight: 600;
 }
 
 h3 {
-	font-family: "Inter";
-	font-weight: 600 !important;
+  font-family: "IBM Plex Sans";
+  font-weight: 600 !important;
 }
 
 .monospaced-font {
-	font-family: "iA Writer Mono";
+  font-family: "iA Writer Mono";
 }
 
 .scanlined {
-	position: relative;
-	/* Add this */
+  position: relative;
+  /* Add this */
 }
 
 .scanlined::after {
-	content: "";
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px);
-	background-size: 2px 2px;
-	background-repeat: repeat;
-	pointer-events: none;
-	z-index: 9999;
-	/* Might want to lower this too */
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px);
+  background-size: 2px 2px;
+  background-repeat: repeat;
+  pointer-events: none;
+  z-index: 9999;
+  /* Might want to lower this too */
 }
 
 code {
-	font-family: var(--font-monospaced);
+  font-family: var(--font-monospaced);
+}
+
+p,
+li {
+  font-size: 1.125rem !important;
+  line-height: 1.8 !important;
 }
 
 p code {
-	color: var(--foreground);
-	background: #504945;
-	font-size: 14px;
-	padding: 0.2rem 0.3rem;
-	border-radius: var(--radius);
-	font-weight: 500;
+  color: var(--foreground);
+  background: #504945;
+  font-size: 14px;
+  padding: 0.2rem 0.3rem;
+  border-radius: var(--radius);
+  font-weight: 500;
 }
 
 .shiki {
-	padding: 1rem 1.2rem;
-	border-radius: 0;
-	overflow-x: auto;
-	margin: 1.5rem 0;
-	line-height: 1.3;
-	/* counter-reset: line; */
-	font-family: var(--font-monospaced) !important;
-	font-size: 14px !important;
+  padding: 1rem 1.2rem;
+  border-radius: 0;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+  line-height: 1.3;
+  /* counter-reset: line; */
+  font-family: var(--font-monospaced) !important;
+  font-size: 14px !important;
 }
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index 64a8c43..e527e8c 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -4,72 +4,72 @@ import { usePosts } from "@/hooks/usePosts"
 import gruvboxComputer from "../images/gruvbox-computer.svg"
 import EolasListing from "@/components/EolasListing"
 import CodeStats from "../containers/CodeStats"
-// import TodayILearned from "@/containers/TodayILearned"
 
 const HomePage = () => {
-	const { posts } = usePosts()
-	return (
-		<MainTemplate>
-			<div className="container mx-auto md:p-4 py-4 px-1 grow">
-				<div className="space-my-8">
-					<section className="space-y-4">
-						<div className="gap-6 flex flex-col items-center sm:flex-row">
-							<div className="scanlined">
-								<img src={gruvboxComputer} className="md:w-80 w-50" />
-							</div>
-							<div>
-								<h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
-									<div className="scanlined inline-block py-1 px-2">
-										systems obscure
-									</div>
-								</h1>
-								<p className="text-center sm:text-left md:text-left text-muted font-medium">
-									A wizard who goes to bed early. This is my technical scrapbook
-									and digital garden.
-								</p>
-							</div>
-						</div>
-					</section>
-				</div>
-			</div>
+  const { posts } = usePosts()
+  return (
+    <MainTemplate>
+      <div className="container mx-auto md:p-4 py-4 px-1 grow">
+        <div className="space-my-8">
+          <section className="space-y-4">
+            <div className="gap-6 flex flex-col items-center sm:flex-row">
+              <div className="">
+                <img
+                  src={gruvboxComputer}
+                  className="md:w-80 w-50 rounded-2xl"
+                />
+              </div>
+              <div>
+                <h1 className="text-5xl font-bold py-3 text-center sm:text-left md:text-left">
+                  <div className="">systems obscure</div>
+                </h1>
+                <p className="text-center sm:text-left md:text-left text-muted font-medium text-lg mt-1">
+                  A wizard who goes to bed early. This is my technical scrapbook
+                  and digital garden.
+                </p>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
 
-			<PostListing title="recent posts" posts={posts.slice(0, 5)} />
+      <PostListing title="recent posts" posts={posts.slice(0, 5)} />
 
-			<PostListing
-				title="highlights"
-				posts={posts.filter((post) => post.tags.includes("highlight"))}
-			/>
+      <PostListing
+        title="highlights"
+        posts={posts.filter((post) => post.tags.includes("highlight"))}
+      />
 
-			<div className="container mx-auto md:p-4 py-4 px-1 grow">
-				<div className="space-my-8">
-					<section className="container">
-						<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2">
-							{`projects`}
-						</h2>
-						<ul>
-							<li className="pb-2">
-								<a
-									className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
-									href="https://eolas.systemsobscure.net"
-									target="_blank"
-								>
-									eolas
-								</a>
-							</li>
-							<li>
-								<p className="">
-									A public frontend for my local Zettelkasten created with
-									NodeJS, Python and React.
-								</p>
-							</li>
-						</ul>
-					</section>
-				</div>
-			</div>
-			<CodeStats />
-			<EolasListing />
-		</MainTemplate>
-	)
+      <div className="container mx-auto md:p-4 py-4 px-1 grow mb-4">
+        <div className="">
+          <section className="container">
+            <h2 className="text-3xl font-semibold mb-4 text-[#d3869b]! h2-home">
+              {`projects`}
+            </h2>
+            <ul className="p-2">
+              <li className="pb-2">
+                <a
+                  className="underline underline-offset-4 text-primary hover:text-primary/80 font-medium text-xl"
+                  href="https://eolas.systemsobscure.net"
+                  target="_blank"
+                >
+                  eolas
+                </a>
+              </li>
+              <li>
+                <p className="">
+                  A public frontend for my local Zettelkasten created with
+                  NodeJS, Python and React.
+                </p>
+              </li>
+            </ul>
+          </section>
+        </div>
+      </div>
+      <CodeStats />
+      <EolasListing />
+    </MainTemplate>
+  )
 }
 
 export { HomePage }
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index c619c2d..710bcb0 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -1,79 +1,79 @@
 :root {
-	--radius: 0.3rem;
-	--background: #282828;
-	--foreground: #ebdbb2;
-	--sidebar: #3c3836;
-	--color-red-light: #fb4934;
-	--color-orange-light: #fe8019;
-	--color-green-light: #b8bb26;
-	--color-aqua-muted: #689d6a;
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: #8ec07c;
-	--primary-muted: #689d6a;
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: #bdae93;
-	--muted-foreground: #928374;
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-	--font-monospaced: "Jetbrains Mono";
-	--font-sansserif: "Inter", sans-serif;
+  --radius: 0.3rem;
+  --background: #282828;
+  --foreground: #fbf1c7;
+  --sidebar: #3c3836;
+  --color-red-light: #fb4934;
+  --color-orange-light: #fe8019;
+  --color-green-light: #b8bb26;
+  --color-aqua-muted: #689d6a;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #8ec07c;
+  --primary-muted: #689d6a;
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: #bdae93;
+  --muted-foreground: #928374;
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --font-monospaced: "Jetbrains Mono";
+  --font-sansserif: "IBM Plex Sans", sans-serif;
 }
 
 @theme inline {
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius));
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--color-chart-1: var(--chart-1);
-	--color-chart-2: var(--chart-2);
-	--color-chart-3: var(--chart-3);
-	--color-chart-4: var(--chart-4);
-	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius));
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
diff --git a/src/templates/BlogTemplate.jsx b/src/templates/BlogTemplate.jsx
index 552aa8e..49ed0d8 100644
--- a/src/templates/BlogTemplate.jsx
+++ b/src/templates/BlogTemplate.jsx
@@ -5,41 +5,41 @@ 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 py-4 px-1 md: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>
+	return (
+		<MainTemplate>
+			<div className="container mx-auto py-4 px-1 md:p-4 grow">
+				{!post ? (
+					<div>Loading...</div>
+				) : (
+					<article className="prose prose-lg max-w-none">
+						<header className="mb-6 pb-4">
+							<h1 className="text-5xl font-bold mb-4 inline-block">
+								{post?.title}
+							</h1>
+							<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
+								<time datetime={convertDate(post?.date)} className="">
+									{convertDate(post?.date)}
+								</time>
+								<div className="flex flex-wrap gap-3 align-center">
+									{post?.tags?.map((tag, i) => (
+										<Link
+											className="text-primary underline underline-offset-3 hover:text-[#689d6a]"
+											key={i}
+											to={`/tags/${tag}`}
+										>
+											{tag}
+										</Link>
+									))}
+								</div>
+							</div>
+						</header>
 
-            <div
-              className="
+						<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]!
@@ -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 c8eb3af..96f1ec9 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="md:py-6 pb-4">
-      <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>
-  )
+	return (
+		<header className="md:py-6 pb-4">
+			<nav className="bg-sidebar container mx-auto justify-between flex gap-1 rounded-r-2xl">
+				<Link to="/">
+					<div className="">
+						<img src={gruvboxComputer} className="w-12" />
+					</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  hover:text-[#689d6a] condensed font-semibold text-xl"
+							to="/posts"
+						>
+							posts
+						</Link>
+					</li>
+					<li class="flex flex-col items-center justify-center">
+						<Link
+							class="text-primary  hover:text-[#689d6a] condensed font-semibold text-xl"
+							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 rounded-2xl p-2">
+			<nav className="">
+				<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