Merge pull request #7 from Nitrrine/main

moehreag · web-flow · commit 5f4d2dc54c8d · 2025-05-07T20:06:28.000Z
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en" data-theme="dark">
   <head>
     <script defer src="script.js"></script>
@@ -34,12 +34,14 @@
         <img src="images/icon.png" alt="AxolotlClient logo" />
         <h1>AxolotlClient</h1>
         <h3>A Free & Open-source Minecraft Client</h3>
-        <a href="https://modrinth.com/mod/axolotlclient/versions#all-versions"
-          ><button class="tooltip">Download</button></a
-        >
-        <a href="https://modrinth.com/mod/axolotlclient/gallery"
-          ><button>Screenshots</button></a
-        >
+        <div class="row">
+          <a href="https://modrinth.com/mod/axolotlclient/versions#all-versions"
+            ><button class="tooltip">Download</button></a
+          >
+          <a href="https://modrinth.com/mod/axolotlclient/gallery"
+            ><button>Screenshots</button></a
+          >
+        </div>
       </div>
     </div>
 
diff --git a/style.css b/style.css
@@ -108,30 +108,19 @@ body {
   color: var(--main-text);
   cursor: pointer;
   flex-shrink: 0;
-  font-family:
-    "Inter UI",
-    "SF Pro Display",
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Open Sans",
-    "Helvetica Neue",
+  font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
     sans-serif;
   font-size: 16px;
   font-weight: 500;
   height: 4rem;
-  padding: 0 1.6rem;
+  padding: 0 2.5rem;
   text-align: center;
   text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
   transition: all 1s;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
-  width: 50%;
   min-height: 7vh;
   height: 9vh;
   text-decoration: none;
@@ -142,12 +131,25 @@ body {
   transition-duration: 0.5s;
 }
 
+.main .buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
 @media (min-width: 768px) {
   .button-36 {
     padding: 0 2.6rem;
   }
 }
 
+@media (max-width: 500px) {
+  .main .buttons .row {
+    flex-direction: column;
+  }
+}
+
 .main img {
   width: 10vh;
 }
@@ -316,3 +318,8 @@ body {
 .policy a:visited {
   color: var(--highlight2-color);
 }
+
+.row {
+  display: flex;
+  flex-direction: row;
+}
