summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--play.css40
-rw-r--r--play.html13
2 files changed, 34 insertions, 19 deletions
diff --git a/play.css b/play.css
index 06044a0..f26d24d 100644
--- a/play.css
+++ b/play.css
@@ -220,10 +220,6 @@ dialog button {
border: 1px solid #0008;
}
-#political_body div.deal {
- margin: 16px 8px 8px 8px;
-}
-
#political_body td {
border: 1px solid #0004;
padding: 4px;
@@ -286,6 +282,34 @@ dialog button {
#discard_pile_header { background-color: var(--color-light-discard); }
#discard_pile_panel { background-color: var(--color-medium-discard); }
+.panel_body { padding-right: calc(18px + 167px); }
+.panel_body { gap: 18px 0; }
+
+#discard_pile_panel { max-width: calc(230px * 4 + 18px * 5) }
+#discard_pile_body { padding: 18px; gap: 18px; }
+
+#political_panel {
+ width: min-content;
+}
+#political_body {
+ padding: 4px;
+ display: grid;
+ grid-template-rows: min-content 1fr;
+ grid-template-columns: 179px 879px 169px;
+ gap: 12px;
+}
+#political_display { grid-row: 1; grid-column: 2; }
+#pc_deck { grid-row: 1; grid-column: 1; }
+#pc_show { grid-row: 1; grid-column: 3; }
+#pc_show .card + .card { margin-top: 12px ; }
+#pc_deck, #pc_show { margin-top: 4px; }
+
+#pd_deals { grid-row: 2; grid-column: 2; }
+
+div.deal + div.deal {
+ margin-top: 8px;
+}
+
/* LOG */
#log {
@@ -665,14 +689,6 @@ body.shift span.value.deck_4 { background-color: #f002 }
.card.tc.hand { margin-right: calc(-167px + 10px); }
.card.polcard.pile { margin-right: calc(-167px + 6px); }
-.panel_body { padding-right: calc(18px + 167px); }
-.panel_body { gap: 18px 0; }
-#discard_pile_body { padding: 18px; gap: 18px; }
-
-#political_body { padding: 4px 0; display: body; }
-#political_panel { width: 879px }
-#discard_pile_panel { max-width: calc(230px * 4 + 18px * 5) }
-
.card_pile {
display: flex;
flex-wrap: wrap;
diff --git a/play.html b/play.html
index a231426..3af7332 100644
--- a/play.html
+++ b/play.html
@@ -121,14 +121,13 @@
<div class="pc_pile card_pile" id="placed_pragmatic"></div>
<div class="pc_pile card_pile" id="placed_austria"></div>
</div>
- <div style="display:flex;flex-wrap:wrap;gap:18px;margin:18px;">
- <div id="pc_deck" class="card_pile"></div>
- <div id="pc_show" style="display:flex;flex-wrap:wrap;gap:18px;">
- </div>
+ <div id="pc_deck" class="card_pile"></div>
+ <div id="pc_show"></div>
+ <div id="pd_deals">
+ <div class="deal" id="subsidy_list"></div>
+ <div class="deal" id="active_deal_list"></div>
+ <div class="deal" id="proposed_deal_list"></div>
</div>
- <div class="deal" id="subsidy_list"></div>
- <div class="deal" id="active_deal_list"></div>
- <div class="deal" id="proposed_deal_list"></div>
</div>
</div>