From bde9210195b6d1ec1790a45625c7acc9b62fdc33 Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Mon, 1 Jan 2024 17:24:20 -0700
Subject: [PATCH] Meow: make mobile responsive

---
 src/pages/meow.astro | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/pages/meow.astro b/src/pages/meow.astro
index b4731cc..c6e5018 100644
--- a/src/pages/meow.astro
+++ b/src/pages/meow.astro
@@ -25,7 +25,7 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
         </p>
         <hr class="m-4" style="border: 1px solid black;" />
     </div>
-    <div class="masonary">
+    <div class="masonry">
         {
             imageFiles.reverse().map((img) => (
                 <div class="meow-grid">
@@ -57,11 +57,30 @@ const imageFiles = (await Astro.glob('../assets/cat-pics/*'));
         text-align: center;
         margin: 10px;
     }
-    .masonary {
-      column-count: 4;
+    .masonry {
       column-gap: 10px;
       margin: 10px;
     }
+    @media (min-width: 1100px) {
+        .masonry {
+            column-count: 4;
+        }
+    }
+    @media (max-width: 1099px) and (min-width: 900px) {
+        .masonry {
+            column-count: 3;
+        }
+    }
+    @media (max-width: 899px) and (min-width: 400px) {
+        .masonry {
+            column-count: 2;
+        }
+    }
+    @media (max-width: 399px) {
+        .masonry {
+            column-count: 1;
+        }
+    }
     .meow-grid {
         display: grid;
         grid-template-rows: 1fr auto;