From 28a5c0d826ca97abfd4ed07af1deedc6ed3be000 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Thu, 19 Oct 2023 01:32:29 +0200
Subject: Mobile layout.

---
 play.html | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

(limited to 'play.html')

diff --git a/play.html b/play.html
index 3f51882..b016733 100644
--- a/play.html
+++ b/play.html
@@ -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>
-- 
cgit v1.2.3