mobile fix

src/main.py

@@ -106,5 +106,5 @@ if __name__ == '__main__':
     app.run(
         host=env('HOST', default='0.0.0.0'), 
         port=env('PORT', default=5000),
-        debug=env('DEBUG', default=False).lower() == 'true'
+        debug=env('DEBUG', default="false").lower() == 'true'
     )

static/css/404.css

@@ -1,8 +1,12 @@
+#snakeContainer {
+    padding: 15px;
+}
+
 canvas#snakeCanvas {
-    margin: 15px;
     box-sizing: border-box;
     border: 2px solid var(--secondary-background-color);
     border-radius: 10px;
+    width: 100%;
 }
 
 form {
@@ -110,4 +114,42 @@ dialog h2 {
 dialog p {
     margin: 0;
     font-size: 1rem;
+}
+
+@media screen and (max-width: 850px) {
+    .flex-row {
+        flex-direction: column;
+    }
+
+    form {
+        align-items: center;
+        width: 100%;
+    }
+
+    .min-width {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .mobileOnly {
+        display: flex;
+    }
+    
+    .pcOnly {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 651px) {
+    .mobileOnly {
+        display: none !important;
+    }
+    
+    .pcOnly {
+        display: flex;
+    }
 }

templates/404.html

@@ -14,11 +14,18 @@
     <p>
         It seems like the thing you are looking for is not here :[
         <br><br>
+        <span class="pcOnly">
         while you're here, why not play some snake?
+        </span>
+        <span class="mobileOnly">
+        You can't play snake on mobile, sorry :(
+        </span>
     </p>
-    <canvas id="snakeCanvas"></canvas>
+    <div class="pcOnly" id="snakeContainer">
+        <canvas id="snakeCanvas"></canvas>
+    </div>
 </section>
-<section class="flex-row">
+<section class="pcOnly flex-row">
     <section class="min-width">
         <h2>Submit score</h2>
         <form action="/404/submit" method="POST" id="snakeForm">
@@ -41,6 +48,18 @@
         </ul>
     </section>
 </section>
+<section class="max-width mobileOnly" id="snakeLeaderboardSection">
+    <h2>Leaderboard</h2>
+    <ul id="snakeLeaderboard">
+        {% for score in scores %}
+        <li>
+            <span>{{ score.position }}</span>
+            <span>{{ score.name }}</span>
+            <span>{{ score.score }}</span>
+        </li>
+        {% endfor %}
+    </ul>
+</section>
 {% if error %}
 <dialog id="errorDialog">
     <h2>Error</h2>