nearly done with the html/css; grids are the worst

static/games_page.css

@@ -8,7 +8,7 @@ body {
     font-family: 'Alegreya', serif;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 300px;
+    grid-template-rows: 100px 330px;
     grid-gap: 50px 30px; /*space between rows, then columns*/
     align-items: center;
     justify-items: center;
@@ -16,6 +16,11 @@ body {
     grid-auto-flow: row;
 }
 
+#title {
+    grid-column: 2;
+    grid-row: 1;
+}
+
 .h1 {
     margin: auto;
     width: 45%;
@@ -34,10 +39,165 @@ body {
 .game {
     font-family: 'Alegreya', serif;
     color: white;
+    align-self: stretch;
+    justify-self: stretch;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    background: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/
+    border: 4px solid;
+    border-radius: 4px;
+    border-color: rgb(113, 54, 138); /*matteo purple™*/
+    border-top: none;
+    border-right: none;
+    border-bottom: none;
 }
 
 h2 {
     font-family: 'Alegreya', serif;
     color: white;
     text-align: center;
-}
+}
+
+.header {
+    width: 100%;
+    background-color: #4f545c; /*discord's background-tertiary*/
+    border-top-right-radius: 4px;
+    height: max-content;
+    
+}
+
+.inning {
+    float: left;
+    margin: 5px;
+}
+
+.weather {
+    float: right;
+    margin: 5px;
+}
+
+.body {
+    margin: 10px;
+    display: grid;
+    grid-template-columns: 3fr 2fr;
+    grid-template-areas:
+      "scores info"
+      "players players"
+      "update update";
+    grid-template-rows: 130px;
+    grid-row-gap: 10px;
+    grid-column-gap: 10px;
+    flex: 1;
+}
+
+.scores {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.team {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.team_name {
+    overflow: hidden;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    background: #4f545c;
+    padding-top: 8px;
+    padding-bottom: 4px;
+    margin-left: 15%;
+    border-radius: 4px;
+}
+
+.batting {
+    grid-area: batting;
+    font-size: 10pt;
+    text-align: left;
+    height: max-content;
+    padding: 5px;
+}
+
+.outs {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 60%;
+}
+
+.outs_title {
+    font-weight: bolder;
+}
+
+.outs_count {
+    display: flex;
+}
+
+.out {
+    height: 20px;
+}
+
+.team_name, .score {
+    font-size: 25px
+}
+
+.score {
+    background: #4f545c; /*discord's background-accent*/
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+}
+
+.players {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    grid-area: players;
+    height: max-content;
+    width: 100%;
+}
+
+.player {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 330px;
+}
+
+.player_name {
+    overflow: hidden;
+    margin-left: 15px;
+}
+
+.update {
+    grid-area: update;
+}
+
+.update_emoji, .update_text {
+    display: inline
+}
+
+.field {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+
+.base1, .base2, .base3 {
+    height: 60px;
+}
+
+.base2 {
+    margin-bottom: -25%
+}

templates/index.html

@@ -16,7 +16,61 @@
         </div>
         <div></div>
         <div class="emptyslot"></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>