diff options
| author | Tor Andersson <tor@ccxvii.net> | 2023-10-19 01:32:29 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2023-10-20 19:05:27 +0200 |
| commit | 28a5c0d826ca97abfd4ed07af1deedc6ed3be000 (patch) | |
| tree | 131f0d758e81a5d6d7f98d6f6a630b4a3558d8ec | |
| parent | 49480720cf474a7cc74854f912b868efb8a20f27 (diff) | |
| download | time-of-crisis-28a5c0d826ca97abfd4ed07af1deedc6ed3be000.tar.gz | |
Mobile layout.
| -rw-r--r-- | about.html | 9 | ||||
| -rw-r--r-- | play.css | 2 | ||||
| -rw-r--r-- | play.html | 29 | ||||
| -rw-r--r-- | play.js | 5 |
4 files changed, 20 insertions, 25 deletions
@@ -8,12 +8,9 @@ mists of time. <p> Game Design by Wray Ferrell and Brad Johnson. - -<p> -Copyright © 2017 -<a href="https://www.gmtgames.com/p-1039-time-of-crisis-deluxe-edition.aspx">GMT Games, LLC</a>. -<br> -Cover art by Rodger B. MacGowan © 2017. +<br> Copyright © 2017 <a href="https://www.gmtgames.com/p-1039-time-of-crisis-deluxe-edition.aspx">GMT Games, LLC</a>. +<br> Cover art by Rodger B. MacGowan © 2017. +<br> Programming © 2023 Tor Andersson. <ul> <li><a href="/time-of-crisis/info/rules.html">Rules of Play</a> @@ -1,4 +1,4 @@ -main { background-color: dimgray; } +body { background-color: dimgray; } #roles { background-color: gray; } header { background-color: silver; } header.your_turn { background-color: orange; } @@ -2,7 +2,8 @@ <!-- vim:set nowrap: --> <html lang="en"> <head> -<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content"> +<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover"> +<meta name="theme-color" content="#444"> <meta charset="utf-8"> <title>TIME OF CRISIS</title> <link rel="icon" href="favicon.png"> @@ -18,21 +19,19 @@ <header> <div id="toolbar"> - <div class="menu"> - <div class="menu_title"><img src="/images/cog.svg"></div> - <div class="menu_popup"> - <div id="tint" class="menu_item checked" onclick="toggle_tint()">Colored units</div> - <div class="menu_separator"></div> - <a class="menu_item" target="_blanK" href="/time-of-crisis/info/readme.html">Read me!</a> - <a class="menu_item" target="_blanK" href="/time-of-crisis/info/rules.html">Rules of Play</a> - <a class="menu_item" target="_blanK" href="/time-of-crisis/info/expansion.html">Expansion Rules</a> - <a class="menu_item" target="_blanK" href="/time-of-crisis/info/aid.html">Player Aid</a> - <a class="menu_item" target="_blanK" href="/time-of-crisis/info/cards.html">Card Gallery</a> - </div> - </div> + <details> + <summary><img src="/images/cog.svg"></summary> + <menu> + <li id="tint" class="checked" onclick="toggle_tint()">Colored units + <li class="separator"> + <li><a target="_blank" href="/time-of-crisis/info/readme.html">Read me!</a> + <li><a target="_blank" href="/time-of-crisis/info/rules.html">Rules of Play</a> + <li><a target="_blank" href="/time-of-crisis/info/expansion.html">Expansion Rules</a> + <li><a target="_blank" href="/time-of-crisis/info/aid.html">Player Aid</a> + <li><a target="_blank" href="/time-of-crisis/info/cards.html">Card Gallery</a> + </menu> + </details> </div> - <div id="prompt"></div> - <div id="actions"></div> </header> <aside> @@ -8,7 +8,6 @@ function check_menu(id, x) { function remember_position(e) { if (e.parentElement) { - console.log("REMEMBER", e.my_id) let rect = e.getBoundingClientRect() e.my_parent = e.parentElement e.my_x = rect.x @@ -32,7 +31,7 @@ function animate_position(e) { { transform: `translate(${dx}px, ${dy}px)`, }, { transform: "translate(0, 0)", }, ], - { duration: 500, easing: "ease" } + { duration: 250, easing: "ease" } ) } } else { @@ -41,7 +40,7 @@ function animate_position(e) { { opacity: 0 }, { opacity: 1 } ], - { duration: 500, easing: "ease" } + { duration: 250, easing: "ease" } ) } } |