summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-10-17 18:33:41 +0200
committerTor Andersson <tor@ccxvii.net>2023-10-20 19:05:27 +0200
commit49480720cf474a7cc74854f912b868efb8a20f27 (patch)
tree62194ed431f72ffaf68baf5c3e70d4bfdb7f765c
parente277a5e25c13469deacdf016b59b6073788b4d1c (diff)
downloadtime-of-crisis-49480720cf474a7cc74854f912b868efb8a20f27.tar.gz
Mobile phone layout.
-rw-r--r--about.html2
-rw-r--r--play.css16
-rw-r--r--play.html12
3 files changed, 14 insertions, 16 deletions
diff --git a/about.html b/about.html
index 942575e..200d83f 100644
--- a/about.html
+++ b/about.html
@@ -6,8 +6,6 @@ to manipulate people and situations to ensure that the family's
name is remembered by history rather than being lost in the
mists of time.
-<br clear="left">
-
<p>
Game Design by Wray Ferrell and Brad Johnson.
diff --git a/play.css b/play.css
index 6053b21..80f302c 100644
--- a/play.css
+++ b/play.css
@@ -82,6 +82,12 @@ body.Green .your_turn { background-color: hsl(99,36%,65%) }
cursor: pointer;
}
+@media (max-width: 800px) {
+ #panel_list {
+ min-width: 2550px;
+ }
+}
+
#mapwrap {
width: 2550px;
height: 1740px;
@@ -674,7 +680,7 @@ body.tint .legion.reduced {
.panel {
background-color: #444;
- max-width: min(calc(100% - 30px), 1636px);
+ width: clamp(824px, calc(100% - 30px), 1636px);
margin: 12px auto 36px auto;
box-shadow: 1px 2px 6px #0004;
border: 1px solid #0008;
@@ -801,11 +807,3 @@ body.tint .legion.reduced {
border: 2px solid #444;
opacity: 0.8;
}
-
-/* MOBILE LAYOUT */
-
-@media (max-width: 640px) {
- .panel_body {
- justify-content: center;
- }
-}
diff --git a/play.html b/play.html
index 8c07d39..3f51882 100644
--- a/play.html
+++ b/play.html
@@ -2,14 +2,14 @@
<!-- vim:set nowrap: -->
<html lang="en">
<head>
-<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content">
<meta charset="utf-8">
<title>TIME OF CRISIS</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="/fonts/fonts.css">
-<link rel="stylesheet" href="/common/play.css">
+<link rel="stylesheet" href="/common/client.css">
<link rel="stylesheet" href="play.css">
-<script defer src="/common/play.js"></script>
+<script defer src="/common/client.js"></script>
<script defer src="play.js"></script>
</head>
<body class="tint p4">
@@ -30,8 +30,6 @@
<a class="menu_item" target="_blanK" href="/time-of-crisis/info/cards.html">Card Gallery</a>
</div>
</div>
- <div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
- <div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
</div>
<div id="prompt"></div>
<div id="actions"></div>
@@ -178,6 +176,8 @@
</div>
</div>
+<div id="panel_list">
+
<div id="played_panel" class="panel">
<div id="played_header" class="panel_header">Played</div>
<div id="played" class="panel_body">
@@ -208,6 +208,8 @@
</div>
</div>
+</div>
+
</main>
<footer id="status"></footer>