diff options
| -rw-r--r-- | about.html | 4 | ||||
| -rw-r--r-- | info/aid.html | 31 | ||||
| -rw-r--r-- | info/cards.html | 54 | ||||
| -rw-r--r-- | play.css | 143 | ||||
| -rw-r--r-- | play.html | 95 |
5 files changed, 286 insertions, 41 deletions
@@ -18,5 +18,7 @@ Designer: Richard Sivél. <ul> <li><a href="/maria/info/MariaRules.pdf">Rules</a> -<li><a href="/maria/info/cards.html">Cards</a> +<li><a href="/maria/info/cards.html">Political Cards</a> +<li><a href="/maria/info/aid.html">Playing Aid</a> +<li><a href="/maria/info/readme.html">README</a> </ul> 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 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=700"> +<title>Maria Playing Aid</title> +<style> + +html { + background-color: slategray; +} + +.list { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin: 40px; +} + +img { + display: block; + border-radius: 8px; +} +</style> +<body> + +<div class="list"> +<img src="../cards/Maria.PlayAid.reverse.2.150.jpg"> +<img src="../cards/Maria.PlayAid.reverse.3.150.jpg"> +<img src="../cards/Maria.PlayAid.reverse.4.150.jpg"> +<img src="../cards/Maria.PlayAid.reverse.5.150.jpg"> +<img src="../cards/Maria.PlayAid.reverse.6.150.jpg"> +<img src="../cards/Maria.PlayAid.reverse.7.150.jpg"> +</div> 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 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=700"> +<title>Maria Political Cards</title> +<style> + +html { + background-color: slategray; +} + +.list { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin: 40px; +} + +img { + display: block; + border-radius: 8px; +} +</style> +<body> + +<div class="list"> +<img src="../cards/Maria.PolCard.reverse.deck_1.150.jpg"> +<img src="../cards/Maria.PolCard.reverse.deck_2.150.jpg"> +<img src="../cards/Maria.PolCard.reverse.deck_3.150.jpg"> +<img src="../cards/Maria.PolCard.reverse.deck_4.150.jpg"> +<img src="../cards/Maria.PolCard.01.150.jpg"> +<img src="../cards/Maria.PolCard.02.150.jpg"> +<img src="../cards/Maria.PolCard.03.150.jpg"> +<img src="../cards/Maria.PolCard.04.150.jpg"> +<img src="../cards/Maria.PolCard.05.150.jpg"> +<img src="../cards/Maria.PolCard.06.150.jpg"> +<img src="../cards/Maria.PolCard.07.150.jpg"> +<img src="../cards/Maria.PolCard.08.150.jpg"> +<img src="../cards/Maria.PolCard.09.150.jpg"> +<img src="../cards/Maria.PolCard.10.150.jpg"> +<img src="../cards/Maria.PolCard.11.150.jpg"> +<img src="../cards/Maria.PolCard.12.150.jpg"> +<img src="../cards/Maria.PolCard.13.150.jpg"> +<img src="../cards/Maria.PolCard.14.150.jpg"> +<img src="../cards/Maria.PolCard.15.150.jpg"> +<img src="../cards/Maria.PolCard.16.150.jpg"> +<img src="../cards/Maria.PolCard.17.150.jpg"> +<img src="../cards/Maria.PolCard.18.150.jpg"> +<img src="../cards/Maria.PolCard.19.150.jpg"> +<img src="../cards/Maria.PolCard.20.150.jpg"> +<img src="../cards/Maria.PolCard.21.150.jpg"> +<img src="../cards/Maria.PolCard.22.150.jpg"> +<img src="../cards/Maria.PolCard.23.150.jpg"> +<img src="../cards/Maria.PolCard.24.150.jpg"> +<img src="../cards/Maria.PolCard.ImpElection.150.jpg"> +</div> @@ -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 { @@ -46,56 +46,71 @@ </div> </div> -<div id="political_display"> - <div id="display_track_saxony"></div> - <div id="display_track_russia"></div> - <div id="display_track_italy"></div> - <div id="display_prussia"></div> - <div id="display_france"></div> - <div id="display_pragmatic_army"></div> - <div id="display_austria"></div> -</div> - <div id="power_panel_list"> -<div id="hand_prussia_panel" class="panel"> -<div id="hand_prussia_header" class="panel_header">Prussia</div> -<div id="hand_prussia" class="panel_body"> -</div> -</div> + <!-- Louis XV --> -<div id="hand_bavaria_panel" class="panel"> -<div id="hand_bavaria_header" class="panel_header">Bavaria</div> -<div id="hand_bavaria" class="panel_body"> -</div> -</div> + <div id="hand_france_panel" class="panel"> + <div id="hand_france_header" class="panel_header">France</div> + <div id="hand_france" class="panel_body"> + </div> + </div> -<div id="hand_france_panel" class="panel"> -<div id="hand_france_header" class="panel_header">France</div> -<div id="hand_france" class="panel_body"> -</div> -</div> + <div id="hand_bavaria_panel" class="panel"> + <div id="hand_bavaria_header" class="panel_header">Bavaria</div> + <div id="hand_bavaria" class="panel_body"> + </div> + </div> -<div id="hand_saxony_panel" class="panel"> -<div id="hand_saxony_header" class="panel_header">Saxony</div> -<div id="hand_saxony" class="panel_body"> -</div> -</div> + <!-- Frederick --> -<div id="hand_pragmatic_army_panel" class="panel"> -<div id="hand_pragmatic_army_header" class="panel_header">Pragmatic Army</div> -<div id="hand_pragmatic_army" class="panel_body"> -</div> -</div> + <div id="hand_prussia_panel" class="panel"> + <div id="hand_prussia_header" class="panel_header">Prussia</div> + <div id="hand_prussia" class="panel_body"> + </div> + </div> -<div id="hand_austria_panel" class="panel"> -<div id="hand_austria_header" class="panel_header">Austria</div> -<div id="hand_austria" class="panel_body"> -</div> -</div> + <div id="hand_saxony_panel" class="panel"> + <div id="hand_saxony_header" class="panel_header">Saxony</div> + <div id="hand_saxony" class="panel_body"> + </div> + </div> + + <div id="hand_pragmatic_panel" class="panel"> + <div id="hand_pragmatic_header" class="panel_header">Pragmatic Army</div> + <div id="hand_pragmatic" class="panel_body"> + </div> + </div> + + <!-- Maria Theresa --> + + <div id="hand_austria_panel" class="panel"> + <div id="hand_austria_header" class="panel_header">Austria</div> + <div id="hand_austria" class="panel_body"> + </div> + </div> + + <!-- Political Display --> + + <div id="political_panel" class="panel" style="width:905px"> + <div id="political_header" class="panel_header">Political Display</div> + <div class="panel_body" style="padding:12px"> + <div id="political_display"> + <div id="display_track_saxony"></div> + <div id="display_track_russia"></div> + <div id="display_track_italy"></div> + <div id="display_prussia"></div> + <div id="display_france"></div> + <div id="display_pragmatic_army"></div> + <div id="display_austria"></div> + </div> + </div> + </div> </div> +<br> + </main> <footer id="status"></footer> |