interim commit

src/components/EolasListing.jsx

@@ -37,8 +37,8 @@ const EolasListing = () => {
 		<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">
+					<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! h2-home">
-            {`eolas recent`}
+						{`Recent learning`}
 					</h2>
 
 					{isLoading && <div>Loading...</div>}

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>

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>

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={

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>

src/index.css

@@ -17,31 +17,31 @@ body {
 }
 
 .condensed {
-	font-family: "Inter";
+  font-family: "IBM Plex Sans";
 }
 
 figcaption {
   font-weight: 500;
-	font-family: "Inter";
+  font-family: "IBM Plex Sans";
 }
 
 h1 {
   color: var(--color-orange-light);
-	font-family: "Inter";
+  font-family: "IBM Plex Sans";
 }
 
 h2 {
-	font-family: "Inter";
+  font-family: "IBM Plex Sans";
   color: var(--color-green-light);
 }
 
 .h2-home {
-	font-family: "Inter";
+  font-family: "IBM Plex Sans";
   font-weight: 600;
 }
 
 h3 {
-	font-family: "Inter";
+  font-family: "IBM Plex Sans";
   font-weight: 600 !important;
 }
 
@@ -73,6 +73,12 @@ code {
   font-family: var(--font-monospaced);
 }
 
+p,
+li {
+  font-size: 1.125rem !important;
+  line-height: 1.8 !important;
+}
+
 p code {
   color: var(--foreground);
   background: #504945;

src/pages/home.jsx

@@ -4,7 +4,6 @@ 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()
@@ -14,16 +13,17 @@ const HomePage = () => {
         <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">
+              <div className="">
-								<img src={gruvboxComputer} className="md:w-80 w-50" />
+                <img
+                  src={gruvboxComputer}
+                  className="md:w-80 w-50 rounded-2xl"
+                />
               </div>
               <div>
-								<h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
+                <h1 className="text-5xl font-bold py-3 text-center sm:text-left md:text-left">
-									<div className="scanlined inline-block py-1 px-2">
+                  <div className="">systems obscure</div>
-										systems obscure
-									</div>
                 </h1>
-								<p className="text-center sm:text-left md:text-left text-muted font-medium">
+                <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>
@@ -40,16 +40,16 @@ const HomePage = () => {
         posts={posts.filter((post) => post.tags.includes("highlight"))}
       />
 
-			<div className="container mx-auto md:p-4 py-4 px-1 grow">
+      <div className="container mx-auto md:p-4 py-4 px-1 grow mb-4">
-				<div className="space-my-8">
+        <div className="">
           <section className="container">
-						<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2">
+            <h2 className="text-3xl font-semibold mb-4 text-[#d3869b]! h2-home">
               {`projects`}
             </h2>
-						<ul>
+            <ul className="p-2">
               <li className="pb-2">
                 <a
-									className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
+                  className="underline underline-offset-4 text-primary hover:text-primary/80 font-medium text-xl"
                   href="https://eolas.systemsobscure.net"
                   target="_blank"
                 >

src/styles/_variables.css

@@ -1,7 +1,7 @@
 :root {
   --radius: 0.3rem;
   --background: #282828;
-	--foreground: #ebdbb2;
+  --foreground: #fbf1c7;
   --sidebar: #3c3836;
   --color-red-light: #fb4934;
   --color-orange-light: #fe8019;
@@ -37,7 +37,7 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
   --font-monospaced: "Jetbrains Mono";
-	--font-sansserif: "Inter", sans-serif;
+  --font-sansserif: "IBM Plex Sans", sans-serif;
 }
 
 @theme inline {

src/templates/BlogTemplate.jsx

@@ -17,17 +17,17 @@ const BlogTemplate = () => {
 				) : (
 					<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">
+							<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="text-sm">
+								<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 text-sm underline underline-offset-3 hover:text-[#689d6a]"
+											className="text-primary underline underline-offset-3 hover:text-[#689d6a]"
 											key={i}
 											to={`/tags/${tag}`}
 										>

src/templates/MainTemplate.jsx

@@ -5,16 +5,16 @@ 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">
+			<nav className="bg-sidebar container mx-auto justify-between flex gap-1 rounded-r-2xl">
 				<Link to="/">
-          <div className="scanlined">
+					<div className="">
-            <img src={gruvboxComputer} className="w-11" />
+						<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 underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
+							class="text-primary  hover:text-[#689d6a] condensed font-semibold text-xl"
 							to="/posts"
 						>
 							posts
@@ -22,7 +22,7 @@ const Header = () => {
 					</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"
+							class="text-primary  hover:text-[#689d6a] condensed font-semibold text-xl"
 							to="/about"
 						>
 							about
@@ -36,8 +36,8 @@ const Header = () => {
 
 const Footer = () => {
 	return (
-    <footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
+		<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8 rounded-2xl p-2">
-      <nav>
+			<nav className="">
 				<ul className="flex flex-row justify-start gap-4">
 					<li className="flex flex-col items-center justify-center">
 						<a