Merge pull request #5 from aryanprince/main

Make website responsive on larger displays/viewports
MythicApp · Oct 25, 2024 · 2e11594 · 2e11594
2 parents 7480e68 + f778ed3
commit 2e11594
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/bun.lockb b/bun.lockb
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
@@ -90,7 +90,10 @@ import Navbar from "../components/navigation/Navbar.astro";
     margin: 0;
     padding-top: 52px;
     -webkit-font-smoothing: antialiased;
-    max-width: 96vw !important;
+  }
+
+  body {
+    max-width: 96vw;
     margin: 50px auto 0;
     display: flex;
     text-align: center;
@@ -179,6 +182,10 @@ import Navbar from "../components/navigation/Navbar.astro";
     border: 1px solid var(--stroke);
   }
 
+  .text-balance {
+    text-wrap: balance;
+  }
+
   @media only screen and (max-width: 903px) {
     button,
     .button {
@@ -236,4 +243,10 @@ import Navbar from "../components/navigation/Navbar.astro";
       width: 480px;
     }
   }
+
+  @media (min-width: 1536px) {
+    body {
+      max-width: 70vw;
+    }
+  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -98,7 +98,7 @@ const socials = [
   <h1 class="mythic-gradient-text">
     The best way to play Windows games on Mac.
   </h1>
-  <p>An <a href="https://github.com/MythicApp">open-source</a> macOS game launcher with the ability to play Windows® games through a custom implementation of Apple's Game Porting Toolkit — supporting multiple platforms.</p>
+  <p class="text-balance">An <a href="https://github.com/MythicApp">open-source</a> macOS game launcher with the ability to play Windows® games through a custom implementation of Apple's Game Porting Toolkit — supporting multiple platforms.</p>
   <br />
   <a class="button-md" href="/download">
     Download Alpha