fix(mobile): Layout

src/components/Header.astro

@@ -8,15 +8,17 @@ import { SITE_TITLE } from '../config'
 
 <header class="mt-8">
 
-  <nav class="gap-2 flex items-center">
+  <nav class="gap-4 lg:gap-2 flex lg:flex-row flex-col items-center">
     <h2 class="text-3xl text-white font-semibold mr-4">
       {SITE_TITLE}
     </h2>
 
+    <div>
       <HeaderLink href="/">Home</HeaderLink>
       <HeaderLink href="/posts">Posts</HeaderLink>
+    </div>
 
-    <div class="ml-auto space-x-2">
+    <div class="lg:ml-auto space-x-4 mt-2 lg:mt-0">
       <a
         class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
         href="https://flausch.social/@saibotk"

src/pages/posts.astro

@@ -14,10 +14,10 @@ const posts = rawPosts
     <ul class="space-y-6">
       {
         posts.map((post) => (
-          <li class="flex items-baseline gap-8">
+          <li class="flex items-baseline gap-2 lg:gap-8">
             <time
               datetime={post.frontmatter.pubDate}
-              class="w-32 italic text-zinc-200 underline underline-offset-3"
+              class="w-32 flex-none italic text-zinc-200 underline underline-offset-3"
             >
               {new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
                 year: 'numeric',
@@ -25,7 +25,7 @@ const posts = rawPosts
                 day: 'numeric',
               })}
             </time>
-            <a class="hover:scale-[1.02] transition duration-150 active:scale-[0.98] active:text-pink-300 text-2xl" href={post.url}>
+            <a class="hover:scale-[1.02] transition duration-150 active:scale-[0.98] active:text-pink-300 text-xl lg:text-2xl" href={post.url}>
               {post.frontmatter.title}
             </a>
           </li>