From 473870821d64ae55bfd7e6f25e5f47554684d73a Mon Sep 17 00:00:00 2001
From: Saibotk <git@saibotk.de>
Date: Fri, 6 Oct 2023 00:52:37 +0200
Subject: [PATCH] fix(mobile): Layout

---
 src/components/Header.astro | 10 ++++++----
 src/pages/posts.astro       |  6 +++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 462e94d..498847d 100644
--- a/src/components/Header.astro
+++ b/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>
 
-    <HeaderLink href="/">Home</HeaderLink>
-    <HeaderLink href="/posts">Posts</HeaderLink>
+    <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"
diff --git a/src/pages/posts.astro b/src/pages/posts.astro
index d5dcff3..148e8c2 100644
--- a/src/pages/posts.astro
+++ b/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>