Website: Responsive

Author: Beelink

docs/index.css

@@ -92,25 +92,27 @@ header .navbar .link:hover {
 .hero h1 {
     font: bold 48px "Inter"; 
     color: #fff;
-    margin: 16px 0;
+    margin: 16px;
 }
 
 .hero h3 {
     font: 20px "Inter"; 
     color: #fff;
+    margin: 20px 16px;
 }
 
 .hero .buttons {
     display: flex;
     justify-content: center;
-    padding: 24px 0;
+    padding: 16px 0;
+    flex-wrap: wrap;
 }
 
 .hero .button {
     padding: 12px 24px;
     border: 2px solid rgba(255, 255, 255, 0.5);
     border-radius: 8px;
-    margin: 0 8px;
+    margin: 8px;
     transition: 0.25s transform, 0.25s filter;;
 }
 
@@ -152,6 +154,7 @@ header .navbar .link:hover {
 
 main {
     text-align: center;
+    padding: 0 16px;
 }
 
 main .screenshot {
@@ -160,6 +163,7 @@ main .screenshot {
     margin-top: -20vw;
     background: #333;
     border: 2px solid rgba(0, 0, 0, 0.25);
+    max-width: 100%;
 }
 
 main h2 {
@@ -199,13 +203,17 @@ main .content {
     padding: 32px;
     filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
     background: #fff;
-    width: 480px;
+    max-width: 570px;
+    width: 100%;
     font: 16px "Inter";
     text-align: left;
+    box-sizing: border-box;
+    overflow-x: auto;
 }
 
 main .content table {
     width: 100%;
+    min-width: 400px;
 }
 
 main .content th, main .content td {
@@ -226,6 +234,11 @@ main .donate {
     display: flex;
     margin: 0 auto;
     justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+main .donate a {
+    padding: 8px;
 }
 
 main .donate img,
@@ -286,4 +299,29 @@ footer a:hover {
 
 ::-webkit-scrollbar-thumb:hover {
     background: #4B0B7E;
+}
+
+/* MEDIA */
+
+@media screen and (max-width: 480px) {
+    header {
+        justify-content: center;
+    }
+
+    header .navbar {
+        display: none;
+    }
+
+    main .screenshot {
+        border-radius: 0;
+        margin-left: -16px;
+        margin-right: -16px;
+        max-width: calc(100% + 28px);
+    }
+
+    footer {
+        flex-direction: column;
+        gap: 8px;
+        text-align: center;
+    }
 }