start making it mobile responsive

.zed/tasks.json

···
     "shell": "system"
   },
   {
+    "label": "dev server - caddy",
+    "command": "just caddy",
+    "use_new_terminal": true,
+    "allow_concurrent_runs": false,
+    "reveal": "never",
+    "reveal_target": "dock",
+    "hide": "never",
+    "shell": "system"
+  },
+  {
     "label": "render to _site",
     "command": "just build",
     "use_new_terminal": true,

Caddyfile

···
+:8080 {
+	root * ./_site/
+	file_server
+}

flake.nix

···
       buildInputs = [
         pkgs.deno
         pkgs.just
+        pkgs.caddy
         (pkgs.python3.withPackages (
           ps: with ps; [
             brotli

justfile

···
 serve:
   steam-run deno task --unstable-ffi serve
 
+caddy:
+  caddy run
+
 build:
   steam-run deno task --unstable-ffi lume
 

src/_components/footer.vto

···
     {{ comp.logo() }}
     <div class="mt-2">
         <p class="text-overlay2 text-lg">Social</p>
-        <ul class="list-none text-4xl text-subtext1 space-x-3">
+        <ul
+            class="grid grid-cols-3 grid-rows-2 md:block list-none text-3xl lg:text-4xl text-subtext1 space-x-1 md:space-x-2 lg:space-x-3"
+        >
             {{ for link of author.links }}
                 <li class="inline-block">
                     <a
···
                     </a>
                 </li>
             {{ /for }}
-            <li class="inline-block text-[2rem]">
+            <li class="inline-block lg:text-[2rem] text-[1.75rem]">
                 <a href="/blog.rss" aria-label="Blog RSS Feed">
                     <i class="si si-rss"></i>
                 </a>

src/_components/logo.vto

···
-<div class="flex flex-row justify-center gap-x-4 content-center">
-    <i class="bi bi-exclamation-triangle text-yellow self-center justify-self-end text-4xl"></i>
-    <p class="text-text text-xl self-center">a space</p>
+<div class="flex flex-row justify-center gap-x-2 lg:gap-x-4 content-center">
+    <i
+        class="bi bi-exclamation-triangle text-yellow self-center justify-self-end text-2xl lg:text-4xl"
+    ></i>
+    <p class="text-text text-lg lg:text-xl self-center">a space</p>
 </div>

src/_components/navbar.vto

···
     </a>
     <nav
         aria-label="Main"
-        class="flex flex-row text-3xl text-mauve underline gap-x-16 justify-center"
+        class="flex flex-row text-xl lg:text-3xl text-mauve underline gap-x-4 lg:gap-x-16 justify-center"
     >
         {{ for link of nav.links }}
             <a class="underline self-center" href="{{ link.link }}">{{ link.name }}</a>
         {{ /for }}
     </nav>
     <div></div>
-    <p class="text-overlay1 self-center">search coming soon</p>
+    <p class="hidden lg:block text-overlay1 self-center">search coming soon</p>
 </header>

src/_components/post_card.vto

···
         </a>
     </li>
 {{ else }}
-    <li class="bg-surface0 rounded-md">
+    <li class="bg-surface0 rounded-md w-3/4 lg:w-full">
         <a href="{{ post.url }}">
             <div class="m-6 py-2">
                 <h2 class="text-subtext1 font-serif text-2xl mb-2">{{ post.title }}</h2>

src/_components/project_card.vto

···
-<li class="bg-surface0 p-4 w-1/2 text-lg rounded-md">
-    <p class="text-2xl font-serif mb-2">{{ project.name }}</p>
-    <p class="italic">{{ project.description }}</p>
+<li class="bg-surface0 p-4 text-lg rounded-md">
+    <h2 class="text-2xl font-serif mb-2">{{ project.name }}</h2>
+    <h3 class="italic">{{ project.description }}</h3>
     <p>Techs Used: {{ project.techs }}</p>
     <p>
         Developed Since:
···
                 {{ project.start |> date('POST_DATE') }}
             </time></strong>
     </p>
+    <p>Status: {{ project.status }}</p>
     <a class="underline text-blue" href="{{ project.link }}">{{ project.link }}</a>
 </li>

src/_data/author.toml

···
 service = "lastdotfm"
 link = "https://www.last.fm/user/thehedgeh0g"
 description = "last.fm profile"
-extra_classes = "pt-2.5 text-[2.5rem]"
+extra_classes = "pt-2.5 lg:text-[2.5rem]"
 [[links]]
 service = "kofi"
 link = "https://ko-fi.com/pyroxdev"
 description = "Ko-fi donation page"
-extra_classes = "pt-1 text-[2.5rem]"
+extra_classes = "pt-1 lg:text-[2.5rem]"
 [[links]]
 service = "forgejo"
 link = "https://git.pyrox.dev/pyrox"

src/_data/projects.toml

···
 techs = [ "Django", "Python", "Nix", "CSS", "HTML", "Sqlite"]
 link = "https://github.com/pyrox0/vgarchive"
 start = "2024-08-17"
+status = "Pre-Alpha"
 
 [[projects]]
 name = "Nix Configuration"
···
 techs = [ "Nix", "Caddy" ]
 link = "https://git.pyrox.dev/pyrox/nix"
 start = "2022-01-28"
+status = "Stable"
 
 [[projects]]
 name = "This Blog"
···
 techs = [ "Nix", "HTML", "CSS", "Vento", "JS", "Python", "Markdown"]
 link = "https://git.pyrox.dev/pyrox/new-blog"
 start ="2025-02-09"
+status = "Beta"

src/_includes/layouts/base.vto

···
 <!DOCTYPE html>
 <html lang="en-US">
     <head>
-        {{ comp.head() }}
+        {{ comp.head({"url": url, "title": title}) }}
     </head>
     <body id="body" class="mocha bg-crust grid">
         {{ comp.navbar() }}

src/_includes/layouts/blog-list.vto

···
 {{ layout "layouts/base.vto" }}
-    <main class="min-h-screen text-text justify-self-center w-full lg:w-1/2">
+    <main class="min-h-screen text-text justify-self-center px-4 lg:px-0 w-full lg:w-1/2">
         <h1 class="text-5xl my-8">Blog</h1>
-        <a class="lg:inline float-right -mt-20 mr-1.5" href="/blog.rss" aria-label="Blog RSS Feed">
+        <a
+            class="lg:inline float-right -mt-20 lg:mr-1.5"
+            href="/blog.rss"
+            aria-label="Blog RSS Feed"
+        >
             <i class="text-5xl si si-rss"></i>
         </a>
         <ul class="mt-8">