From ed56c8c0ce0a6e94d39920ac56b04673112ebcdd Mon Sep 17 00:00:00 2001
From: Elijah Steres <elijahsteres@gmail.com>
Date: Tue, 29 Dec 2020 22:57:07 -0500
Subject: [PATCH] html/css done! next, js loading.

---
 static/games_page.css |  5 +++-
 templates/game.html   | 55 ++++++++++++++++++++++++++++++++++++++++++
 templates/index.html  | 56 +------------------------------------------
 3 files changed, 60 insertions(+), 56 deletions(-)
 create mode 100644 templates/game.html

diff --git a/static/games_page.css b/static/games_page.css
index 999f63f..b5a2453 100644
--- a/static/games_page.css
+++ b/static/games_page.css
@@ -82,7 +82,7 @@ h2 {
 .body {
     margin: 10px;
     display: grid;
-    grid-template-columns: 3fr 2fr;
+    grid-template-columns: 60% 40%;
     grid-template-areas:
       "scores info"
       "players players"
@@ -119,6 +119,7 @@ h2 {
     padding-top: 8px;
     padding-bottom: 4px;
     margin-left: 15%;
+    margin-right: 10px;
     border-radius: 4px;
 }
 
@@ -156,8 +157,10 @@ h2 {
 .score {
     background: #4f545c; /*discord's background-accent*/
     width: 40px;
+    min-width: 40px;
     height: 40px;
     border-radius: 20px;
+    margin-left: 10px;
 }
 
 .players {
diff --git a/templates/game.html b/templates/game.html
new file mode 100644
index 0000000..e12a2e4
--- /dev/null
+++ b/templates/game.html
@@ -0,0 +1,55 @@
+<div class="game">
+    <div class="header">
+        <div class="inning">
+            Inning: 🔼 1/9
+        </div>
+        <div class="weather">
+            🌟 Supernova
+        </div>
+    </div>
+    <div class="body">
+        <div class="scores">
+            <div class="team">
+                <div class="team_name">Halifax Fire Sharks</div>
+                <div class="score">0</div>
+            </div>
+            <div class="team">
+                <div class="team_name">Dead Batteries</div>
+                <div class="score">1</div>
+            </div>
+        </div>
+        <div class="info">
+            <div class="field">
+                <img class="base2" src="/static/img/base_filled.png"/>
+                <div style="display: flex;">
+                    <img class="base3" src="/static/img/base_empty.png"/>
+                    <img class="base1" src="/static/img/base_empty.png"/>
+                </div>
+            </div>
+            <div class="outs">
+                <div class="outs_title">OUTS</div>
+                <div class="outs_count">
+                    <img class="out" src="/static/img/out_out.png"/>
+                    <img class="out" src="/static/img/out_in.png"/>
+                </div>
+            </div>
+        </div>
+        <div class="players">
+            <div class="player">
+                <div class="player_type">Pitcher:</div>
+                <div class="player_name">Hot Fish Summer</div>
+            </div>
+            <div class="player">
+                <div class="player_type">Batter:</div>
+                <div class="player_name">Shape Batteries</div>
+            </div>
+        </div>
+        <div class="update">
+            <div class="update_emoji">🏏</div>
+            <div class="update_text">Shape Batteries grounds out to Honk For Santa.</div>
+        </div>
+    </div>
+    <div class="footer">
+        <div class="batting">Dead Batteries batting</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index ab2df6c..af42576 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,61 +16,7 @@
         </div>
         <div></div>
         <div class="emptyslot"></div>
-        <div class="game">
-            <div class="header">
-                <div class="inning">
-                    Inning: 🔼 1/9
-                </div>
-                <div class="weather">
-                    🌟 Supernova
-                </div>
-            </div>
-            <div class="body">
-                <div class="scores">
-                    <div class="team">
-                        <div class="team_name">Halifax Fire Sharks</div>
-                        <div class="score">0</div>
-                    </div>
-                    <div class="team">
-                        <div class="team_name">Dead Batteries</div>
-                        <div class="score">1</div>
-                    </div>
-                </div>
-                <div class="info">
-                    <div class="field">
-                        <img class="base2" src="/static/img/base_filled.png"/>
-                        <div style="display: flex;">
-                            <img class="base3" src="/static/img/base_empty.png"/>
-                            <img class="base1" src="/static/img/base_empty.png"/>
-                        </div>
-                    </div>
-                    <div class="outs">
-                        <div class="outs_title">OUTS</div>
-                        <div class="outs_count">
-                            <img class="out" src="/static/img/out_out.png"/>
-                            <img class="out" src="/static/img/out_in.png"/>
-                        </div>
-                    </div>
-                </div>
-                <div class="players">
-                    <div class="player">
-                        <div class="player_type">Pitcher:</div>
-                        <div class="player_name">Hot Fish Summer</div>
-                    </div>
-                    <div class="player">
-                        <div class="player_type">Batter:</div>
-                        <div class="player_name">Shape Batteries</div>
-                    </div>
-                </div>
-                <div class="update">
-                    <div class="update_emoji">🏏</div>
-                    <div class="update_text">Shape Batteries grounds out to Honk For Santa.</div>
-                </div>
-            </div>
-            <div class="footer">
-                <div class="batting">Dead Batteries batting</div>
-            </div>
-        </div>
+        <div class="emptyslot"></div>
         <div class="emptyslot"></div>
         <div class="emptyslot"></div>
         <div class="emptyslot"></div>