style: improve mobile

src/components/EolasListing.jsx

@@ -34,11 +34,11 @@ const EolasListing = () => {
   })
 
   return (
-		<div className="container mx-auto p-4 grow">
+    <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]! inline-block  h2-home">
+          <h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! h2-home scanlined px-2">
-						{`zettelkasten recent`}
+            {`eolas recent`}
           </h2>
 
           {isLoading && <div>Loading...</div>}

src/containers/CodeStats.jsx

@@ -67,11 +67,11 @@ const CodeStats = () => {
       .slice(0, 4)
 
   return (
-    <div className="container mx-auto p-4 grow">
+    <div className="container mx-auto py-4 px-1 md:p-4 grow ">
       <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]! inline-block  h2-home">
+            <h2 className="text-2xl font-semibold mb-4 text-[#458588]!  h2-home scanlined px-2">
               {`code stats`}
             </h2>
             <div className="mb-4 text-sm text-muted">

src/containers/PostListing.jsx

@@ -5,23 +5,23 @@ import { convertDate } from "@/utils/convertDate"
 
 const PostListing = ({ posts, title, showAllButton }) => {
   return (
-    <div className="container mx-auto p-4 grow">
+    <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">
+          <h2 className="text-2xl font-semibold mb-4  block h2-home scanlined px-2">
             {`${title}`}
           </h2>
           {posts.map((post) => (
             <ul>
               <li className="mb-4">
-                <div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
+                <div className="flex justify-between flex-col relative hover:bg-[#504945]">
                   <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
                     {convertDate(post.date)}
                   </span>
                   <Link
                     to={`/posts/${post.slug}`}
                     key={post.slug}
-                    className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1"
+                    className="overflow-hidden text-ellipsis whitespace-nowrap min-w-0"
                   >
                     {post.title}
                   </Link>

src/index.css

@@ -1,4 +1,4 @@
-@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 url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
 @import "./styles/_variables.css";
 @import "tailwindcss";
 @import "tw-animate-css";

src/pages/about.jsx

@@ -4,7 +4,7 @@ import portrait from "../images/portrait-compressed.jpg"
 const AboutPage = () => {
 	return (
 		<MainTemplate>
-			<div className="container mx-auto p-4">
+			<div className="container mx-auto py-4 px-1 md:p-4">
 				<figure className="w-full flex flex-col items-center mb-6">
 					<div className="scanlined inline-block">
 						<img

src/pages/home.jsx

@@ -10,7 +10,7 @@ const HomePage = () => {
   const { posts } = usePosts()
   return (
     <MainTemplate>
-      <div className="container mx-auto p-4 grow">
+      <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">
@@ -23,7 +23,7 @@ const HomePage = () => {
                     systems obscure
                   </div>
                 </h1>
-                <p className="text-center sm:text-left md:text-left text-muted  font-medium text-lg">
+                <p className="text-center sm:text-left md:text-left text-muted font-medium">
                   Another software engineer with a blog. This is my technical
                   scrapbook and digital garden.
                 </p>
@@ -40,10 +40,10 @@ const HomePage = () => {
         posts={posts.filter((post) => post.tags.includes("highlight"))}
       />
 
-      <div className="container mx-auto p-4 grow">
+      <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]!  block  h2-home">
+            <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2">
               {`projects`}
             </h2>
             <ul>

src/styles/_variables.css

@@ -36,7 +36,7 @@
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
-	--font-monospaced: "IBM Plex Mono";
+	--font-monospaced: "Jetbrains Mono";
 	--font-sansserif: "Inter", sans-serif;
 }
 

src/templates/BlogTemplate.jsx

@@ -11,7 +11,7 @@ const BlogTemplate = () => {
 
   return (
     <MainTemplate>
-			<div className="container mx-auto p-4 grow">
+      <div className="container mx-auto py-4 px-1 md:p-4 grow">
         {!post ? (
           <div>Loading...</div>
         ) : (

src/templates/MainTemplate.jsx

@@ -4,7 +4,7 @@ import gruvboxComputer from "../images/gruvbox-computer.svg"
 import { Link } from "react-router"
 const Header = () => {
   return (
-		<header className="py-6">
+    <header className="md:py-6">
       <nav className="bg-sidebar container mx-auto justify-between flex gap-1">
         <Link to="/">
           <div className="scanlined">