From a2a4d9ddde19e4fa913dcd3545135e91b441dd98 Mon Sep 17 00:00:00 2001
From: SkyfallWasTaken <mahadkalam1@proton.me>
Date: Sun, 7 Jul 2024 21:48:53 +0100
Subject: [PATCH] Make blog grid more responsive

---
 src/pages/blog/index.astro | 4 +++-
 src/pages/index.astro      | 4 +---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index a489df1..c18543b 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -21,7 +21,9 @@ const posts = (await getCollection("blog")).sort(
     <Header />
     <main>
       <section>
-        <ul class="container grid grid-cols-3 gap-6 m-4 mb-6 text-text">
+        <ul
+          class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 m-4 my-6 text-text"
+        >
           {
             posts.map((post) => (
               <li>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b2b51d2..6d17393 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -23,9 +23,7 @@ import Button from "../components/ui/Button.astro";
           tuned!
         </p>
         <div class="flex flex-row gap-2">
-          <Button>
-            <a href="/blog">Read my blog</a>
-          </Button>
+          <a href="/blog"><Button>Read my blog</Button></a>
         </div>
       </div>
     </main>