summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--play.html150
1 files changed, 97 insertions, 53 deletions
diff --git a/play.html b/play.html
index 1403f55..7f90426 100644
--- a/play.html
+++ b/play.html
@@ -27,17 +27,23 @@
}
:root {
- --suf-25: hsl(273 80% 25%);
- --suf-75: hsl(273 39% 75%);
- --suf-85: hsl(273 39% 85%);
-
- --opp-25: hsl(16 100% 25%);
- --opp-75: hsl(16 85% 75%);
- --opp-85: hsl(16 85% 85%);
+ --back-strategy: hsl(36, 71%, 66%);
+ --back-states: #99b778;
+ --back-suf: #754d8d;
+ --back-opp: #da6642;
+
+ --suf-25: hsl(273, 80%, 25%);
+ --suf-75: hsl(273, 39%, 75%);
+ --suf-85: hsl(273, 39%, 85%);
+
+ --opp-25: hsl(16, 100%, 25%);
+ --opp-75: hsl(16, 85%, 75%);
+ --opp-85: hsl(16, 85%, 85%);
}
main {
background-color: slategray;
+ background-color: hsl(170, 13%, 55%);
}
#role_Suffragist { background-color: var(--suf-85); }
@@ -49,7 +55,7 @@ main {
body.Suffragist header.your_turn { background-color: var(--suf-75); }
body.Opposition header.your_turn { background-color: var(--opp-75); }
-#log { background-color: whitesmoke; }
+#log { background-color: floralwhite; }
#log .h1, #log .h2 {
font-weight: bold;
padding-top: 2px;
@@ -58,8 +64,8 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
border-top: 1px solid black;
border-bottom: 1px solid black;
}
-#log .h1 { background-color: silver; }
-#log .h2 { background-color: gainsboro; }
+#log .h1 { background-color: hsl(170, 40%, 73%); }
+#log .h2 { background-color: hsl(170, 40%, 83%); }
#log .suf { background-color: var(--suf-85); border-top: 1px solid var(--suf-25); border-bottom: 1px solid var(--suf-25); }
#log .opp { background-color: var(--opp-85); border-top: 1px solid var(--opp-25); border-bottom: 1px solid var(--opp-25); }
@@ -81,7 +87,6 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
vertical-align: -2px;
width: 12px;
height: 12px;
- border-radius: 0px;
box-shadow: none;
border: none;
background-size: contain;
@@ -165,43 +170,89 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
.panel_grid {
display: flex;
justify-content: center;
- min-width: 1500px;
+ min-width: 1100px;
max-width: 1500px;
- margin: 20px auto;
- gap: 20px;
+ margin: 24px auto;
+ gap: 24px;
}
-#hand, #discard, #support_claimed, #support_discard, #opposition_claimed, #opposition_discard, #states_draw, #strategy_draw, #out_of_play { min-height: 350px; }
-#hand_panel, #states_draw, #support_discard_panel, #opposition_discard_panel, #out_of_play { min-width: 1100px; }
-#strategy_draw { min-width: 790px; }
-#support_claimed, #opposition_claimed { min-width: 250px; }
-
.panel {
- background-color: #555;
+ font-family: CopperplateCC;
+ font-variant: small-caps;
+ x-border: 2px solid #222;
+ background-color: hsl(43, 52%, 88%);
+ box-shadow: 1px 2px 4px #0004;
}
.panel_header {
- background-color: #444;
- color: hsl(40, 60%, 90%);
+ background-color: hsl(43, 42%, 78%);
+ margin: 3px;
+ border: 2px solid #222;
font-weight: bold;
text-align: center;
- padding: 3px 1em;
+ padding: 2px 0;
}
.panel_body {
- display: flex;
- justify-content: start;
- flex-wrap: wrap;
- padding: 20px;
- gap: 20px;
+ margin: 3px;
+ border: 2px solid #222;
+ display: grid;
+ grid-template-columns: repeat(3, 250px);
+ padding: 16px;
+ gap: 16px;
+ min-height: 350px;
+ min-width: 250px;
+ max-width: 1100px;
+}
+
+#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); }
+#states_draw_header { background-color: var(--back-states); }
+
+body.Suffragist #hand_header { background-color: var(--suf-75); }
+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;
+}
+
+#strategy_draw {
+ grid-template-columns: repeat(3, 250px);
+}
+
+#hand, #set_aside {
+ grid-template-columns: repeat(auto-fill, 250px);
+}
+
+/*
+#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: 1320px) {
+#states_draw { width: calc(250px * 4 + 16px * 3); }
+}
+
+@media (min-width: 1900px) {
+#states_draw { width: calc(250px * 6 + 16px * 5); }
}
+*/
+
/* MAP */
#mapwrap {
width: 1100px;
height: 850px;
- box-shadow: 0 1px 8px #0008;
+ x-border: 1px solid #222;
+ x-margin-top: -1px;
+ box-shadow: 1px 2px 4px #0004;
}
#map {
@@ -292,7 +343,7 @@ div.label.claimable::after {
*/
div.label.claimable {
- text-decoration: double underline;
+ text-decoration: underline;
}
div.state.selected {
@@ -330,14 +381,14 @@ div.persistent_box {
position: absolute;
width: 125px;
height: 175px;
- border: 1px solid #444;
- border-radius: 8px;
+ border-radius: 4px;
+ box-shadow: 0 0 0 1px #222, 1px 2px 2px #0004;
}
body.shift .persistent_box .card:hover {
width: 250px;
height: 350px;
- border-radius: 16px;
+ border-radius: 8px;
z-index: 100;
}
@@ -471,8 +522,8 @@ div.button_box .button {
background-repeat: no-repeat;
width: 250px;
height: 350px;
- border-radius: 16px;
- box-shadow: 1px 2px 4px #0004;
+ border-radius: 8px;
+ box-shadow: 0 0 0 1px #222, 1px 2px 4px #0004;
}
.card.action {
@@ -1220,45 +1271,38 @@ 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 class="panel_grid">
- <div id="hand_panel" class="panel hide">
+ <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 class="panel_grid">
- <div id="set_aside_panel" class="panel hide">
- <div id="set_aside_header" class="panel_header">Set-aside cards</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 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 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 id="opposition_claimed_header" class="panel_header">Opposition Claimed</div>
+ <div id="opposition_claimed" class="panel_body"></div>
</div>
</div>
- <div class="panel_grid">
- <div id="strategy_draw_panel" class="panel">
- <div id="strategy_draw_header" class="panel_header">Available Strategy cards</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 class="panel_grid">
- <div id="states_draw_panel" class="panel">
- <div id="states_draw_header" class="panel_header">Available States cards</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>
<br><br><br>