Tweak panel layout.

1 files changed, 24 insertions, 22 deletions

diff --git a/play.html b/play.html
index c34c5e3..c528d7e 100644
--- a/play.html
+++ b/play.html
@@ -20,12 +20,10 @@ body.Versailles header.your_turn { background-color: skyblue; }
 #role_Commune { background-color: salmon; }
 #role_Versailles { background-color: skyblue; }
 
-#log { background-color: ivory; }
-#log .h1 { background-color: hsl(40, 50%, 67%); font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
-#log .h2 { background-color: hsl(40, 50%, 77%); padding-top:2px; padding-bottom:2px; text-align: center; }
-#log .h3 { text-decoration: underline }
-#log .commune { background-color: lightpink }
-#log .versailles { background-color: lightblue }
+#log { background-color: #f7f4e1; }
+#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; }
 #log > .i { padding-left: 20px; }
 #log .tip { font-style: italic }
 #log .tip:hover { cursor: pointer; text-decoration: underline; }
@@ -61,24 +59,20 @@ body.Versailles header.your_turn { background-color: skyblue; }
 	gap: 20px;
 }
 
-#hand, #discard, #set_aside, #commune_cards, #versailles_cards {
+#hand, #discard, #set_aside, #red_objective, #blue_objective {
 	min-height: 350px;
 }
 
 #hand { min-width: 1060px }
 #hand.censorship { min-width: 1330px }
-#commune_cards { min-width: 790px }
-#versailles_cards { min-width: 790px }
+#red_objective { min-width: 250px }
+#blue_objective { min-width: 250px }
 #set_aside { min-width: 790px }
 #discard { min-width: 250px }
+#final { min-width: 520px }
 
-#commune_cards_header {
-	background-color: #633;
-}
-
-#versailles_cards_header {
-	background-color: #345;
-}
+#red_objective_header { background-color: #761c1e; }
+#blue_objective_header { background-color: #2a4e6e; }
 
 #hand, #set_aside {
 	flex-grow: 1
@@ -469,19 +463,27 @@ 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>
 <div id="discard" class="panel_body"></div>
 </div>
 
-<div id="versailles_cards_panel" class="panel">
-<div id="versailles_cards_header" class="panel_header">Versailles</div>
-<div id="versailles_cards" class="panel_body"></div>
+<div id="final_panel" class="panel">
+<div id="final_header" class="panel_header">Final Cards</div>
+<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>
 </div>
 
-<div id="commune_cards_panel" class="panel">
-<div id="commune_cards_header" class="panel_header">Commune</div>
-<div id="commune_cards" class="panel_body"></div>
+<div id="red_objective_panel" class="panel">
+<div id="red_objective_header" class="panel_header">Commune Objective</div>
+<div id="red_objective" class="panel_body"></div>
 </div>
 
 <div id="set_aside_panel" class="panel">