More flexible layout.

1 files changed, 12 insertions, 18 deletions

diff --git a/play.html b/play.html
index c528d7e..5681bab 100644
--- a/play.html
+++ b/play.html
@@ -24,6 +24,8 @@ body.Versailles header.your_turn { background-color: skyblue; }
 #log .h1 { background-color: #dcd7af; font-weight: bold; padding:2px 0; text-align: center; }
 #log .h2 { background-color: #dcd7af; padding: 0; text-align: center; }
 #log .h3 { text-decoration: underline #575a53; }
+X#log .commune { background-color: #761c1e44 }
+X#log .versailles { background-color: #2a4e6e44 }
 #log > .i { padding-left: 20px; }
 #log .tip { font-style: italic }
 #log .tip:hover { cursor: pointer; text-decoration: underline; }
@@ -54,30 +56,24 @@ body.Versailles header.your_turn { background-color: skyblue; }
 .panel_grid {
 	display: flex;
 	flex-wrap: wrap;
-	margin: 20px auto;
 	justify-content: center;
+	margin: 20px;
 	gap: 20px;
 }
 
-#hand, #discard, #set_aside, #red_objective, #blue_objective {
+#final, #hand, #discard, #set_aside, #red_objective, #blue_objective {
 	min-height: 350px;
+	min-width: 250px;
 }
 
-#hand { min-width: 1060px }
-#hand.censorship { min-width: 1330px }
-#red_objective { min-width: 250px }
-#blue_objective { min-width: 250px }
-#set_aside { min-width: 790px }
-#discard { min-width: 250px }
-#final { min-width: 520px }
+#hand_panel { width: clamp(290px, 1100px, 100%) }
+body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
+#final_panel { width: clamp(290px, 560px, 100%) }
+#set_aside_panel { width: clamp(290px, 830px, 100%) }
 
 #red_objective_header { background-color: #761c1e; }
 #blue_objective_header { background-color: #2a4e6e; }
 
-#hand, #set_aside {
-	flex-grow: 1
-}
-
 .panel {
 	background-color: #555;
 }
@@ -99,8 +95,6 @@ body.Versailles header.your_turn { background-color: skyblue; }
 	gap: 20px;
 }
 
-body.Observer #set_aside_panel { display: none }
-
 /* CARDS */
 
 .card {
@@ -126,6 +120,7 @@ body.Observer #set_aside_panel { display: none }
 	box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
 	width: 1500px;
 	height: 1050px;
+	margin-bottom: 30px;
 }
 
 #map {
@@ -404,7 +399,7 @@ body.Observer #set_aside_panel { display: none }
 		<div class="menu_popup">
 			<a class="menu_item" href="info/rules.html" target="_blank">Rules</a>
 			<a class="menu_item" href="info/playbook.html" target="_blank">Playbook</a>
-			<a class="menu_item" href="info/pac.html" target="_blank">Player Aids</a>
+			<a class="menu_item" href="info/censorship.html" target="_blank">Quick Reference</a>
 			<a class="menu_item" href="info/cards.html" target="_blank">Cards</a>
 			<div class="resign menu_separator"></div>
 			<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
@@ -463,8 +458,6 @@ body.Observer #set_aside_panel { display: none }
 <div id="hand" class="panel_body"></div>
 </div>
 
-</div>
-<div class="panel_grid">
 
 <div id="discard_panel" class="panel">
 <div id="discard_header" class="panel_header">Discard</div>
@@ -476,6 +469,7 @@ body.Observer #set_aside_panel { display: none }
 <div id="final" class="panel_body"></div>
 </div>
 
+
 <div id="blue_objective_panel" class="panel">
 <div id="blue_objective_header" class="panel_header">Versailles Objective</div>
 <div id="blue_objective" class="panel_body"></div>