Added layout rules for mobile

ExtF8 · Jul 22, 2023 · 3a946cc · 3a946cc
1 parent d0af3d3
commit 3a946cc
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -27,13 +27,16 @@ <h1>Conway's Game of Life</h1>
                     Any dead cell with exactly three live neighbors becomes a
                     live cell (reproduction)
                 </li>
-                <br>
+                <br />
                 <li>
-                    Click on the canvas to select initial live cells, then press 'Start' to watch the patterns evolve according to the rules.
+                    Click on the canvas to select initial live cells, then press
+                    'Start' to watch the patterns evolve according to the rules.
                 </li>
             </ul>
         </div>
-        <canvas id="gameCanvas" width="800" height="500"></canvas>
+        <div class="container">
+            <canvas id="gameCanvas"></canvas>
+        </div>
         <div class="controls">
             <button id="startBtn">Start</button>
             <button id="stopBtn">Stop</button>

diff --git a/script.js b/script.js
@@ -2,6 +2,8 @@
 const canvas = document.getElementById('gameCanvas');
 canvas.addEventListener('click', handleCanvasClick);
 const ctx = canvas.getContext('2d');
+canvas.width = 800;
+canvas.height = 600;
 const cellSize = 10;
 const rows = canvas.height / cellSize;
 const cols = canvas.width / cellSize;
@@ -39,13 +41,12 @@ document.getElementById('startBtn').addEventListener('click', () => {
 
     function animate() {
         setTimeout(() => {
-
             updateGame();
             drawGrid();
             if (isAnimating) {
                 animationId = requestAnimationFrame(animate);
             }
-        }, 100)
+        }, 100);
     }
     animate();
     console.log('start');

diff --git a/style.css b/style.css
@@ -1,19 +1,57 @@
+html {
+    box-sizing: border-box;
+}
+
 * {
     margin: 0;
     padding: 0;
+    box-sizing: inherit;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: normal;
 }
 
 body {
     font-family: Arial, Helvetica, sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 50px;
+    margin-top: 10px;
+    padding: 20px;
+}
+
+h1 {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-align: center;
+    font-weight: bolder;
+    text-transform: capitalize;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    position: relative;
 }
 
 canvas {
     border: 1px solid black;
+    margin: 10px;
+}
 
+@media (max-width: 768px) {
+    #gameCanvas {
+        width: 400px;
+        max-width: 98%;
+        height: auto;
+    }
+}
+
+@media (max-width: 768px) {
+    button {
+        padding: 15px 25px;
+        font-size: 18px;
+        margin-bottom: 15px;
+    }
 }
 
 .controls {
@@ -35,6 +73,7 @@ button {
     list-style-type: none;
     line-height: 1.2;
 }
+
 #howTo {
     margin-bottom: 20;
 }