feat: Add responsive max-width for large screens

MythicApp · Oct 25, 2024 · c9b9fb3 · c9b9fb3
1 parent 411d038
commit c9b9fb3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/components/navigation/Navbar.astro b/src/components/navigation/Navbar.astro
@@ -76,4 +76,14 @@
       gap: 10px;
     }
   }
+
+  @media (min-width: 1536px) {
+    .logo {
+      padding-left: 300px;
+    }
+
+    .right-items {
+      padding-right: 300px;
+    }
+  }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -102,7 +102,7 @@ import Navbar from "../components/navigation/Navbar.astro";
   }
 
   body {
-    max-width: 96vw !important;
+    max-width: 96vw;
     margin: 50px auto 0;
     display: flex;
     text-align: center;
@@ -258,4 +258,10 @@ import Navbar from "../components/navigation/Navbar.astro";
       width: 480px;
     }
   }
+
+  @media (min-width: 1536px) {
+    body {
+      max-width: 70vw;
+    }
+  }
 </style>