From 68e386fade2fd4073461c8185101fc38a1def2cd Mon Sep 17 00:00:00 2001
From: Trianta <56975502+Trimutex@users.noreply.github.com>
Date: Mon, 9 Dec 2024 21:04:28 -0600
Subject: [PATCH] core: add foundations of idea

---
 default.css |  8 ++++++++
 index.html  | 54 ++++++++++++++++++++++++++++++-----------------------
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/default.css b/default.css
index de26e00..a037c8b 100644
--- a/default.css
+++ b/default.css
@@ -39,6 +39,14 @@ canvas {
     background: #003161;
 }
 
+.cardLeft {
+    display: inline-block;
+}
+
+.cardRight {
+    display: inline-block;
+}
+
 #navigation {
     text-align: right;
     padding: 6px;
diff --git a/index.html b/index.html
index ef59e28..bb8c4ff 100644
--- a/index.html
+++ b/index.html
@@ -21,35 +21,43 @@
             <h2 class="first">Completed Projects</h2>
             <div class="card">
                 <h3 class="cardTop">Pong</h3>
-                <div class="canvas">
-                    <canvas width="750" height="585" id="pong"></canvas>
-                    <script src="public/pong.js"></script>
-                    <div id="gameover" hidden="true">
-                        <h3>Game Over</h3>      
-                    </div>
-                    <div id="restart" hidden="true">
-                        <button class="button" type="button" onclick = "restartGame()">Restart Game</a>
+                <div class="cardLeft">
+                    <div class="canvas">
+                        <canvas width="750" height="585" id="pong"></canvas>
+                        <script src="public/pong.js"></script>
+                        <div id="gameover" hidden="true">
+                            <h3>Game Over</h3>      
+                        </div>
+                        <div id="restart" hidden="true">
+                            <button class="button" type="button" onclick = "restartGame()">Restart Game</a>
+                        </div>
                     </div>
                 </div>
-                <p class="cardStats">Left Paddle Height: <span id="leftPaddle"></span></p>
-                <p class="cardStats">Right Paddle Height: <span id="rightPaddle"></span></p>
-                <a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/pong.js">View Code</a>
+                <div class="cardRight">
+                    <p class="cardStats">Left Paddle Height: <span id="leftPaddle"></span></p>
+                    <p class="cardStats">Right Paddle Height: <span id="rightPaddle"></span></p>
+                    <a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/pong.js">View Code</a>
+                </div>
             </div>
             <div class="card">
                 <h3 class="cardTop">Snake</h3>
-                <div class="canvas">
-                    <canvas width="625" height="375" id="snake"></canvas>
-                    <script src="public/snake.js"></script>
+                <div class="cardLeft">
+                    <div class="canvas">
+                        <canvas width="625" height="375" id="snake"></canvas>
+                        <script src="public/snake.js"></script>
+                    </div>
+                </div>
+                <div class="cardRight">
+                    <p class="cardStats">
+                        Adjust game size -- Width: 
+                        <input class="cardStats" id="snakeWidth" type="number" min="2" max="31" value="31">
+                        Height: 
+                        <input class="cardStats" id="snakeHeight" type="number" min="2" max="24" value="24">
+                    </p>
+                    <p class="cardStats">Snake Head Location: <span id="snakeHead"></span></p>
+                    <p class="cardStats">Food Location: <span id="snakeFood"></span></p>
+                    <a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
                 </div>
-                <p class="cardStats">
-                    Adjust game size -- Width: 
-                    <input class="cardStats" id="snakeWidth" type="number" min="2" max="31" value="31">
-                    Height: 
-                    <input class="cardStats" id="snakeHeight" type="number" min="2" max="24" value="24">
-                </p>
-                <p class="cardStats">Snake Head Location: <span id="snakeHead"></span></p>
-                <p class="cardStats">Food Location: <span id="snakeFood"></span></p>
-                <a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
             </div>
         </div>
     </div>