mobile-ify

src/App.svelte

@@ -2,7 +2,7 @@
     import Game from './Game.svelte'
 </script>
 
-<main style='width:fit-content;margin:0 auto;text-align:center'>
+<main>
     <h1>blek! Wordle</h1>
     <p>
         FOSS wordle game that runs in your browser!<br/>

src/Keyboard.svelte

@@ -55,6 +55,16 @@
         width: 600px;
         height: 56px;
     }
+    @media (max-width: 667px) {
+        .openwordle-keyboard .openwordle-keyboard-line {
+            width: 96vw;
+            height: 40px;
+        }
+        .openwordle-keyboard .openwordle-keyboard-btn  {
+            font-size: 10pt;
+            padding: 0 4px;
+        }
+    }
     .kb-btn-unfit {
         background: #444454 !important;
     }

src/app.css

@@ -58,4 +58,18 @@ button:active {
 
 .no-anim {
   animation: none !important;
+}
+
+main {
+  margin: 0px auto;
+  text-align: center;
+  width: fit-content;
+}
+
+@media (max-width:667px) {
+  main {
+    margin: 0px !important;
+    text-align: center;
+    width: 100vw;
+  }
 }