summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-05-14 17:15:53 +0200
committerTor Andersson <tor@ccxvii.net>2023-05-24 21:06:18 +0200
commit2ab63e2169d2b6ca8d5b561cf41b58a0f2e49320 (patch)
tree7e1012aaa3665fb1754d08144baf3e855ebb1451 /play.html
parent1b23caef2dc7e591b412cd656096bada0ddd8f28 (diff)
downloadred-flag-over-paris-2ab63e2169d2b6ca8d5b561cf41b58a0f2e49320.tar.gz
More flexible layout.
Diffstat (limited to 'play.html')
-rw-r--r--play.html30
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>