Maria Playing Aid

From c8a135ad09d7cd758ed61e8c010dcde8580e6c2a Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 31 May 2024 21:16:06 +0200 Subject: play --- about.html | 4 +- info/aid.html | 31 ++++++++++++ info/cards.html | 54 +++++++++++++++++++++ play.css | 143 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ play.html | 95 +++++++++++++++++++++---------------- 5 files changed, 286 insertions(+), 41 deletions(-) create mode 100644 info/aid.html create mode 100644 info/cards.html diff --git a/about.html b/about.html index 213e38f..fca5300 100644 --- a/about.html +++ b/about.html @@ -18,5 +18,7 @@ Designer: Richard Sivél.

diff --git a/info/aid.html b/info/aid.html new file mode 100644 index 0000000..52f1414 --- /dev/null +++ b/info/aid.html @@ -0,0 +1,31 @@ + + +Maria Playing Aid + + + +

diff --git a/info/cards.html b/info/cards.html new file mode 100644 index 0000000..82ad7db --- /dev/null +++ b/info/cards.html @@ -0,0 +1,54 @@ + + +Maria Political Cards + + + +

diff --git a/play.css b/play.css index 217ed27..a9195f8 100644 --- a/play.css +++ b/play.css @@ -25,6 +25,7 @@ body { width: 2485px; height: 1654px; margin-bottom: 30px; + box-shadow: 2px 2px 4px #0006; } #map { @@ -44,8 +45,150 @@ body { background-size: cover; background-image: url(Maria.Political.Display.075.jpg); background-color: #ece1a9; + box-shadow: 2px 2px 4px #0006; + border: 1px solid #0008; } +header.your_turn.france { background-color: var(--color-light-france); } +header.your_turn.bavaria { background-color: var(--color-light-bavaria); } +header.your_turn.prussia { background-color: var(--color-light-prussia); } +header.your_turn.saxony { background-color: var(--color-light-saxony); } +header.your_turn.pragmatic { background-color: var(--color-light-pragmatic); } +header.your_turn.austria { background-color: var(--color-light-austria); } + +/* COLORS */ + +:root { + --color-light-france: hsl(0, 70%, 80%); + --color-light-bavaria: hsl(36, 70%, 80%); + --color-light-prussia: hsl(210, 80%, 75%); + --color-light-saxony: hsl(140, 50%, 70%); + --color-light-pragmatic: hsl(0, 0%, 75%); + --color-light-austria: hsl(0, 0%, 97%); + --color-light-political: hsl(50, 73%, 78%); + + --color-medium-france: hsl(0, 35%, 70%); + --color-medium-bavaria: hsl(36, 65%, 70%); + --color-medium-prussia: hsl(210, 30%, 60%); + --color-medium-saxony: hsl(140, 20%, 55%); + --color-medium-pragmatic: hsl(0, 0%, 65%); + --color-medium-austria: hsl(0, 0%, 90%); + --color-medium-political: hsl(50, 35%, 60%); + + --color-dark-france: hsl(358, 85%, 52%); + --color-dark-bavaria: hsl(36, 65%, 52%); + --color-dark-prussia: hsl(198, 100%, 24%); + --color-dark-saxony: hsl(139, 72%, 28%); + --color-dark-pragmatic: hsl(0, 0%, 87%); + --color-dark-austria: hsl(0, 0%, 97%); + + --color-role-louis: hsl(0, 70%, 80%); + --color-role-frederick: hsl(210, 80%, 75%); + --color-role-maria: hsl(0, 0%, 97%); + + --color-clubs: #007c49; + --color-diamonds: #c2263e; + --color-hearts: #ed1c24; + --color-spades: #274085; + --color-reserve: #0094c9; +} + +/* PANELS */ + +.panel { + background-color: darkgray; + width: clamp(500px, calc(100% - 48px), 2475px); + margin: 24px auto; + box-shadow: 2px 2px 4px #0006; + border: 1px solid #0008; + padding: 4px; +} + +.panel_header { + border: 1px solid #000a; + box-shadow: 1px 1px 4px #0003; + text-align: center; + padding: 2px 0; +} + +.panel_body { + display: flex; + justify-content: start; + flex-wrap: wrap; + padding: 18px; + gap: 18px; + min-height: 256px; +} + +#hand_france_header { background-color: var(--color-light-france) } +#hand_bavaria_header { background-color: var(--color-light-bavaria) } +#hand_prussia_header { background-color: var(--color-light-prussia) } +#hand_saxony_header { background-color: var(--color-light-saxony) } +#hand_pragmatic_header { background-color: var(--color-light-pragmatic) } +#hand_austria_header { background-color: var(--color-light-austria) } + +#hand_france_panel { background-color: var(--color-medium-france) } +#hand_bavaria_panel { background-color: var(--color-medium-bavaria) } +#hand_prussia_panel { background-color: var(--color-medium-prussia) } +#hand_saxony_panel { background-color: var(--color-medium-saxony) } +#hand_pragmatic_panel { background-color: var(--color-medium-pragmatic) } +#hand_austria_panel { background-color: var(--color-medium-austria) } + +#political_header { background-color: var(--color-light-political) } +#political_panel { background-color: var(--color-medium-political) } + + +/* LOG */ + +#log { + font-family: "Suit Symbols", var(--font-small); + font-variant-numeric: tabular-nums; +} + +#log { background-color: #f3ebd4 } + +#log div:empty { + min-height: 4px; +} + +#log .city_tip:hover { cursor: pointer; text-decoration: underline; } + +#log .piece_tip:hover { cursor: pointer; text-decoration: underline; } + +#log .h { + background-color: tan; + border-top: 1px solid black; border-bottom: 1px solid black; + margin: 8px 0; +} + +#log .h.fate { text-align: center; } +#log .h.fate::before { content: "\2014 " } +#log .h.fate::after { content: " \2014" } + +#log .combat { background-color: #d7cfb8; } + +#log .h.austria { background-color: var(--color-light-austria); } +#log .h.france { background-color: var(--color-light-france); } +#log .h.bavaria { background-color: var(--color-light-bavaria); } +#log .h.prussia { background-color: var(--color-light-prussia); } +#log .h.pragmatic { background-color: var(--color-light-pragmatic); } +#log .h.saxony { background-color: var(--color-light-saxony); } + +#log .q { font-style: italic; } + +#log .i { padding-left: 20px } +#log .ii { padding-left: 32px } + +#log span.suit { font-size: 11px; } + +span.suit.reserve { padding: 0 1px; } + +span.suit.spades { color: var(--color-spades) } +span.suit.clubs { color: var(--color-clubs) } +span.suit.hearts { color: var(--color-hearts) } +span.suit.diamonds { color: var(--color-diamonds) } +span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family: "Source Serif SmText"; } + /* SPACES */ .space { diff --git a/play.html b/play.html index a7c8e9d..1e6d210 100644 --- a/play.html +++ b/play.html @@ -46,56 +46,71 @@ -

Prussia

+ -

Bavaria

France

Bavaria

Saxony

+ -

Pragmatic Army

Prussia

Austria

Saxony

+ +

Pragmatic Army

+ + + +

Austria

+ + + +

Political Display

+
+ -- cgit v1.2.3