css changes and add title field

static/css/game.css

@@ -27,33 +27,23 @@
     background-color: var(--background-secondary);
     border-top-right-radius: 4px;
     height: max-content;
-    
+    display: flex;
+    justify-content: space-between
 }
 
-.inning {
+.header > div {
-    float: left;
+    margin: 0.3rem 0.5rem;
-    margin: 5px;
-    margin-left: 8px;
-}
-
-.weather {
-    float: right;
-    margin: 5px;
-    margin-right: 8px;
 }
 
 .body {
-    margin: 10px;
+    margin: 0.5rem;
     display: grid;
-    grid-template-columns: 66% 33%;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     grid-template-areas:
-      "teams info" 
+      "teams teams info" "players players info" "update update update";
-      "players info" 
+    grid-template-rows: 5.5rem auto auto;
-      "update update";
+    grid-row-gap: 0.5rem;
-    grid-template-rows: 90px 85px;
+    grid-column-gap: 0.75rem;
-    grid-row-gap: 4px;
-    grid-column-gap: 14px;
-    flex: 1;
 }
 
 .teams {
@@ -70,7 +60,7 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-    margin: 5px 0px;
+    margin: 0.25rem 0rem;
 }
 
 .team_name {
@@ -86,8 +76,7 @@
     align-items: center;
     justify-content: space-around;
     background: #4f545c;
-    padding: 25px 0px;
+    padding: 0.75rem 0rem;
-    margin-right: 10px;
     border-radius: 4px;
 }
 
@@ -95,14 +84,14 @@
     font-size: 10pt;
     text-align: left;
     height: max-content;
-    padding: 5px;
+    margin: 0.3rem 0.5rem;
 }
 
 .leagueoruser {
     font-size: 10pt;
     text-align: right;
     height: max-content;
-    padding: 5px;
+    margin: 0.3rem 0.5rem;
 }
 
 .footer {
@@ -144,17 +133,22 @@
 
 .players {
     grid-area: players;
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: auto minmax(0, 1fr);
-    justify-content: space-around;
+    grid-template-rows: auto auto;
-    align-items: start;
+    grid-column-gap: 0.5rem;
+    margin-left: 0.3rem;
 }
 
-.player {
+.players > div {
-    display: flex;
+    margin: 0.25rem 0rem;
-    align-items: end;
+}
-    width: 100%;
+
-    flex-direction: column;
+.player_type {
+    text-align: end;
+    font-weight: bolder;
+    display: inline-block;
+    vertical-align: middle;
 }
 
 .player_name {
@@ -162,16 +156,13 @@
     text-overflow: ellipsis;
     text-align: start;
     white-space: nowrap;
-    width: 95%;
+    width: 100%;
-    margin-top: -4px;
 }
 
 .update {
     grid-area: update;
-    margin-right: 10px;
+    min-height: 3.5rem;
-    margin-top: 5px;
+    padding: 0rem 0.75rem;
-    min-height: 50px;
-    padding: 0px 10px;
     height: 100%;
     background: var(--background-secondary);
     border-radius: 4px;
@@ -180,14 +171,8 @@
     justify-content: start;
 }
 
-.player_type {
-    width: 100%;
-    text-align: start;
-    font-weight: bolder;
-}
-
 .update_emoji {
-    margin-right: 10px;
+    margin-right: 0.75rem;
     margin-left: 2px;
 }
 

static/css/games_page.css

@@ -8,7 +8,7 @@
 }
 
 .container > div {
-    min-height: 325px;
+    min-height: 298px;
 }
 
 #filters {
@@ -21,15 +21,15 @@
 }
 
 #filters > * {
-    padding: 4px 8px;
+    padding: 0.25rem 0.5rem;
-    margin: 0px 8px;
+    margin: 0rem 0.5rem;
     font-size: 16pt;
     background: rgba(0,0,0,0);
 }
 
 #filters > .filter {
-    border-radius: 8px;
+    border-radius: 0.5rem;
-    min-width: 100px;
+    min-width: 6.25rem;
     text-align: center;
     border: none;
     color: white;
@@ -45,14 +45,14 @@
     flex-direction: column;
     justify-content: center;
     width: 100%;
-    height: 75px;
+    height: 4.5rem;
 }
 
 #footer > div {
     text-align: center;
-    font-size: 20px;
+    font-size: 16pt;
     position: relative;
-    top: 5px;
+    top: 0.25rem;
 }
 
 .emptyslot {

templates/base.html

@@ -23,7 +23,7 @@
             <a href="https://github.com/Sakimori/matteo-the-prestige" class="link" target="_blank" rel="noopener noreferrer">Github</a><br />
             <a href="https://twitter.com/intent/follow?screen_name=SIBR_XVI" class="link" target="_blank" rel="noopener noreferrer">Twitter</a>
         </div>
-        <h2 class="page_header" style="font-size: 50px;">THE SIMMADOME</h2>
+        <a href="/"><h2 class="page_header" style="font-size: 50px;">THE SIMMADOME</h2></a>
         <h2 class="page_header">Join SIBR on <a href="https://discord.gg/UhAajY2NCW" class="link"><img src="static/discord.png" height="30"></a> to start your own games!</h2>
     </div>
     {% block body %}{% endblock %}

templates/game_box.html

@@ -6,6 +6,7 @@ src={% if state.bases[number] %}"/static/img/base_filled.png" alt="{{state.bases
 {%- endmacro %}
 <div class="header">
     <div class="inning">Inning: {% if state.display_top_of_inning == true %}🔼{% else %}🔽{% endif %} {{ state.display_inning }}/{{ state.max_innings }}</div>
+    <div class="title">{{ state.title }}</div>
     <div class="weather">{{ state.weather_emoji }} {{ state.weather_text }}</div>
 </div>
 <div class="body">
@@ -36,14 +37,10 @@ src={% if state.bases[number] %}"/static/img/base_filled.png" alt="{{state.bases
         </div>
     </div>
     <div class="players">
-        <div class="player pitcher">
+        <div class="player_type">PITCHER</div>
-            <div class="player_type">PITCHER</div>
+        <div class="player_name pitcher_name">{{ state.pitcher }}</div>
-            <div class="player_name pitcher_name">{{ state.pitcher }}</div>
+        <div class="player_type">BATTER</div>
-        </div>
+        <div class="player_name batter_name">{{ state.batter }}</div>
-        <div class="player batter">
-            <div class="player_type">BATTER</div>
-            <div class="player_name batter_name">{{ state.batter }}</div>
-        </div>
     </div>
     <div class="update">
         <div class="update_emoji">{{ state.update_emoji }}</div>