From 8ed2214c9d4a0ed3e43611694fe289cb1efbc99f Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sat, 2 Dec 2023 22:21:23 +0100
Subject: Responsive panel layout.

---
 play.html | 127 ++++++++++++++++++++++++++++++++++++++------------------------
 1 file changed, 78 insertions(+), 49 deletions(-)

(limited to 'play.html')

diff --git a/play.html b/play.html
index 7f90426..8711a5b 100644
--- a/play.html
+++ b/play.html
@@ -167,26 +167,29 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
 
 /* PANELS */
 
-.panel_grid {
+section > * {
+	margin: 24px auto;
+}
+
+.row {
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: center;
-	min-width: 1100px;
-	max-width: 1500px;
-	margin: 24px auto;
 	gap: 24px;
 }
 
 .panel {
+	padding: 3px;
 	font-family: CopperplateCC;
 	font-variant: small-caps;
-	x-border: 2px solid #222;
 	background-color: hsl(43, 52%, 88%);
 	box-shadow: 1px 2px 4px #0004;
+	min-width: fit-content;
+	max-width: fit-content;
 }
 
 .panel_header {
 	background-color: hsl(43, 42%, 78%);
-	margin: 3px;
 	border: 2px solid #222;
 	font-weight: bold;
 	text-align: center;
@@ -194,7 +197,7 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
 }
 
 .panel_body {
-	margin: 3px;
+	margin-top: 3px;
 	border: 2px solid #222;
 	display: grid;
 	grid-template-columns: repeat(3, 250px);
@@ -202,9 +205,11 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
 	gap: 16px;
 	min-height: 350px;
 	min-width: 250px;
-	max-width: 1100px;
 }
 
+#support_claimed_panel { grid-column: 2; }
+#opposition_claimed_panel { grid-column: 3; }
+
 #support_claimed_header { background-color: var(--back-suf); color: white; }
 #opposition_claimed_header { background-color: var(--back-opp); color: white; }
 #strategy_draw_header { background-color: var(--back-strategy); }
@@ -216,34 +221,52 @@ body.Opposition #hand_header { background-color: var(--opp-75); }
 body.Suffragist #set_aside_header { background-color: var(--suf-85); }
 body.Opposition #set_aside_header { background-color: var(--opp-85); }
 
-#support_claimed, #opposition_claimed {
-	grid-template-columns: 250px;
-}
+#support_claimed, #opposition_claimed { grid-template-columns: 250px; }
+#strategy_draw { grid-template-columns: repeat(3, 250px); }
 
-#strategy_draw {
+#states_draw {
 	grid-template-columns: repeat(3, 250px);
+	grid-template-rows: repeat(3, 350px);
 }
 
-#hand, #set_aside {
-	grid-template-columns: repeat(auto-fill, 250px);
+@media (min-width: 1320px) {
+	#states_draw {
+		grid-template-columns: repeat(4, 250px);
+		grid-template-rows: repeat(3, 350px);
+	}
 }
 
-/*
-#hand, #set_aside, #support_claimed, #opposition_claimed, #states_draw, #strategy_draw { min-height: 350px; }
-#hand { min-width: calc(250px * 4 + 16px * 3); }
-#strategy_draw { min-width: calc(250px * 3 + 16px * 2); }
-#states_draw { width: calc(250px * 3 + 16px * 2); }
-#support_claimed, #opposition_claimed { min-width: 250px; }
+@media (min-width: 1590px) {
+	#states_draw {
+		grid-template-columns: repeat(5, 250px);
+		grid-template-rows: repeat(2, 350px);
+	}
+}
 
-@media (min-width: 1320px) {
-#states_draw { width: calc(250px * 4 + 16px * 3); }
+@media (min-width: 1840px) {
+	#states_draw {
+		grid-template-columns: repeat(6, 250px);
+		grid-template-rows: repeat(2, 350px);
+	}
 }
 
-@media (min-width: 1900px) {
-#states_draw { width: calc(250px * 6 + 16px * 5); }
+#hand, #set_aside {
+	grid-template-columns: repeat(4, 250px);
+	grid-template-rows: repeat(2, 350px);
 }
-*/
 
+@media (min-width: 2120px) {
+	#hand, #set_aside {
+		grid-template-columns: repeat(7, 250px);
+		grid-template-rows: repeat(1, 350px);
+	}
+}
+
+@media (max-width: 800px) {
+	section {
+		width: 1100px;
+	}
+}
 
 /* MAP */
 
@@ -1271,39 +1294,45 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
 	</div>
 	</div>
 
-	<div id="hand_panel" class="panel hide">
-		<div id="hand_header" class="panel_header">Hand</div>
-		<div id="hand" class="panel_body"></div>
+	<section>
+
+		<div id="hand_panel" class="panel hide">
+			<div id="hand_header" class="panel_header">Hand</div>
+			<div id="hand" class="panel_body"></div>
+			</div>
 		</div>
-	</div>
 
-	<div id="set_aside_panel" class="panel hide">
-		<div id="set_aside_header" class="panel_header">Set-aside Cards</div>
-		<div id="set_aside" class="panel_body"></div>
+		<div id="set_aside_panel" class="panel hide">
+			<div id="set_aside_header" class="panel_header">Set-aside Cards</div>
+			<div id="set_aside" class="panel_body"></div>
+			</div>
 		</div>
-	</div>
 
-	<div class="panel_grid">
-		<div id="support_claimed_panel" class="panel">
-			<div id="support_claimed_header" class="panel_header">Suffragist Claimed</div>
-			<div id="support_claimed" class="panel_body"></div>
+		<div class="row">
+
+			<div id="support_claimed_panel" class="panel">
+				<div id="support_claimed_header" class="panel_header">Suffragist Claimed</div>
+				<div id="support_claimed" class="panel_body"></div>
+			</div>
+
+			<div id="opposition_claimed_panel" class="panel">
+				<div id="opposition_claimed_header" class="panel_header">Opposition Claimed</div>
+				<div id="opposition_claimed" class="panel_body"></div>
+			</div>
+
 		</div>
 
-		<div id="opposition_claimed_panel" class="panel">
-			<div id="opposition_claimed_header" class="panel_header">Opposition Claimed</div>
-			<div id="opposition_claimed" class="panel_body"></div>
+		<div id="strategy_draw_panel" class="panel">
+			<div id="strategy_draw_header" class="panel_header">Available Strategy Cards</div>
+			<div id="strategy_draw" class="panel_body"></div>
 		</div>
-	</div>
 
-	<div id="strategy_draw_panel" class="panel">
-		<div id="strategy_draw_header" class="panel_header">Available Strategy Cards</div>
-		<div id="strategy_draw" class="panel_body"></div>
-	</div>
+		<div id="states_draw_panel" class="panel">
+			<div id="states_draw_header" class="panel_header">Available States Cards</div>
+			<div id="states_draw" class="panel_body"></div>
+		</div>
 
-	<div id="states_draw_panel" class="panel">
-		<div id="states_draw_header" class="panel_header">Available States Cards</div>
-		<div id="states_draw" class="panel_body"></div>
-	</div>
+	</section>
 
 	<br><br><br>
 	<br><br><br>
-- 
cgit v1.2.3