From ae906317c27e75987a76333e71db91b583adeab8 Mon Sep 17 00:00:00 2001
From: guamss <guams@duck.com>
Date: Wed, 2 Sep 2026 15:21:12 +0200
Subject: [PATCH] responsiveness update

---
 src/styles/global.css   | 16 +++++++++++++
 src/styles/navbar.css   | 53 +++++++++++++++++++++++++++++++++++++++++
 src/styles/postcard.css |  6 +++++
 3 files changed, 75 insertions(+)

diff --git a/src/styles/global.css b/src/styles/global.css
index bcf33cf..020ca4d 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -81,3 +81,19 @@ body {
     flex-direction: column;
   }
 }
+
+@media screen and (max-width: 1200px) {
+  body {
+    > main {
+      width: 80vw;
+    }
+  }
+}
+
+@media screen and (max-width: 610px) {
+  body {
+    > main {
+      width: 90vw;
+    }
+  }
+}
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
index c5f4a94..0f8d037 100644
--- a/src/styles/navbar.css
+++ b/src/styles/navbar.css
@@ -144,3 +144,56 @@ header {
     transform: translateX(-100%);
   }
 }
+
+@media screen and (max-width: 1600px) {
+  header {
+    > nav {
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: stretch;
+      gap: 2rem;
+    }
+  }
+}
+
+@media screen and (max-width: 770px) {
+  header {
+    > nav {
+      > ul {
+        gap: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 470px) {
+  header {
+    > nav {
+      > ul {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: stretch;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 610px) {
+  header {
+    > nav {
+      > ul {
+        border-radius: 16px;
+        > section {
+          > input[type="text"] {
+            border-radius: 8px;
+          }
+          display: flex;
+          flex-direction: column;
+          align-items: stretch;
+          padding: 0.5rem;
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/postcard.css b/src/styles/postcard.css
index 544ccb4..7774427 100644
--- a/src/styles/postcard.css
+++ b/src/styles/postcard.css
@@ -26,3 +26,9 @@ article {
     font-style: italic;
   }
 }
+
+@media screen and (max-width: 600px) {
+  article {
+    width: 80%;
+  }
+}