Responsive burger menu, videoWrapper, startButton

leaky-ships/pages/dev/index.tsx

@@ -28,7 +28,7 @@ export default function Home() {
                     <button id='back' onClick={() => setHeWantsToPlay(false)}>
                         <FontAwesomeIcon icon={faLeftLong} />
                     </button>
-                    <div>
+                    <div id='sameWidth'>
                         <button className='optionButton'>
                             Raum erstellen
                             <FontAwesomeIcon icon={faPlus} />
@@ -43,7 +43,6 @@ export default function Home() {
                         </button>
                     </div>
                 </div>}
-            {/* </div> */}
         </div >
     )
 }

leaky-ships/styles/App.scss

@@ -2,6 +2,12 @@
 @use './mixins/effects' as *;
 @import './mixins/variables';
 
+html,
+body,
+#__next {
+  height: 100%;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

leaky-ships/styles/homepage.scss

@@ -7,7 +7,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&display=swap');
 
 #box {
-    min-height: 100vh;
+    min-height: 100%;
     background-color: #282c34;
     @include flex-col;
     align-items: center;
@@ -27,8 +27,9 @@
         box-shadow: 0 0 2px 2px #0008 inset;
 
         img {
-            height: 80%;
+            @include pixelart;
-            width: 80%;
+            height: 84px;
+            width: 84px;
         }
     }
 
@@ -62,69 +63,6 @@
                 }
             }
         }
-
-        @media (max-width: 2000px) {
-            height: 200px;
-            width: 560px;
-
-            #width {
-
-                h1 {
-                    font-size: 4.5em;
-                    letter-spacing: 4px;
-
-                    &:first-child {
-                        border-top: 4px solid black;
-                    }
-
-                    &:last-child {
-                        border-bottom: 4px solid black;
-                    }
-                }
-            }
-        }
-
-        @media (max-width: 800px) {
-            height: 160px;
-            width: 450px;
-
-            #width {
-
-                h1 {
-                    font-size: 3.6em;
-                    letter-spacing: 3px;
-
-                    &:first-child {
-                        border-top: 3px solid black;
-                    }
-
-                    &:last-child {
-                        border-bottom: 3px solid black;
-                    }
-                }
-            }
-        }
-
-        @media (max-width: 600px) {
-            height: 100px;
-            width: 280px;
-
-            #width {
-
-                h1 {
-                    font-size: 2.4em;
-                    letter-spacing: 2px;
-
-                    &:first-child {
-                        border-top: 2px solid black;
-                    }
-
-                    &:last-child {
-                        border-bottom: 2px solid black;
-                    }
-                }
-            }
-        }
     }
 
     #videoWrapper {
@@ -187,7 +125,7 @@
             border: 2px solid #000C;
         }
 
-        div {
+        #sameWidth {
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -222,4 +160,136 @@
         }
 
     }
+}
+
+@media (max-width: 2000px) {
+    #box {
+        #shield {
+            height: 200px;
+            width: 560px;
+
+            #width {
+
+                h1 {
+                    font-size: 4.5em;
+                    letter-spacing: 4px;
+
+                    &:first-child {
+                        border-top: 4px solid black;
+                    }
+
+                    &:last-child {
+                        border-bottom: 4px solid black;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 1000px) {
+    #box {
+        #navExpand {
+            top: 32px;
+            left: 32px;
+            width: 80px;
+            height: 80px;
+
+            img {
+                @include pixelart;
+                height: 64px;
+                width: 64px;
+            }
+        }
+
+        #shield {
+            height: 160px;
+            width: 450px;
+
+            #width {
+
+                h1 {
+                    font-size: 3.6em;
+                    letter-spacing: 3px;
+
+                    &:first-child {
+                        border-top: 3px solid black;
+                    }
+
+                    &:last-child {
+                        border-bottom: 3px solid black;
+                    }
+                }
+            }
+        }
+
+        #videoWrapper {
+            height: 300px;
+            width: 600px;
+        }
+    }
+}
+
+@media (max-width: 700px) {
+    #box {
+        justify-content: space-evenly;
+
+        #navExpand {
+            top: 16px;
+            left: 16px;
+            width: 64px;
+            height: 64px;
+
+            img {
+                @include pixelart;
+                height: 44px;
+                width: 44px;
+            }
+        }
+
+        #shield {
+            height: 100px;
+            width: 280px;
+
+            #width {
+
+                h1 {
+                    font-size: 2.2em;
+                    letter-spacing: 2px;
+
+                    &:first-child {
+                        border-top: 2px solid black;
+                    }
+
+                    &:last-child {
+                        border-bottom: 2px solid black;
+                    }
+                }
+            }
+        }
+
+        #videoWrapper {
+            height: 250px;
+            width: 450px;
+
+            svg {
+                font-size: 4em;
+            }
+        }
+
+        #startButton {
+            font-size: 2em;
+            padding: calc(1rem + 8px) 3rem 1rem 3rem;
+        }
+    }
+}
+
+
+@media (max-width: 500px) {
+    #box {
+        #videoWrapper {
+            height: 150px;
+            width: 300px;
+        }
+    }
 }