web: ui improvements, mainly for mobile

Using a `100vh' height results in the bottom bit of the UI being cropped
until scrolling down, while using `100%' results in the address bar
always wasting space. By combining these with a fixed-position element,
we're able to have the UI grow and shrink as the address bar visibility
changes.

3 files changed, 22 insertions, 9 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index e664a8d..aacb1bc 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -158,8 +158,9 @@ document.addEventListener('DOMContentLoaded', () => {
 	f = e => $(`#${e.target.dataset.modal}`).style.display = 'block';
 	$$('[data-modal]').forEach(x => x.addEventListener('click', f));
 	f = e => {
-		if (e.target === e.currentTarget)
-			e.target.style.display = 'none';
+		if (e.target === e.currentTarget ||
+			e.target.classList.contains("modal-close"))
+			e.currentTarget.style.display = 'none';
 	};
 	$$('.modal').forEach(x => x.addEventListener('click', f));
 });
diff --git a/web/static/index.html b/web/static/index.html
index d9d8718..1e5b9a5 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -67,6 +67,7 @@
 		</div>
 		<div id="help-modal" class="modal">
 			<div class="modal-content">
+				<p><span class="modal-close">[Close]</span></p>
 				<h2>dartboat</h2>
 				<p>dartboat uses an internal representation of a specification dartboard. Darts are thrown following a normal distribution, with the resultant coordinates used to calculate the segments in which they land. The idea is that this provides a more realistic opponent than picking points at random.</p>
 				<h2>Settings</h2>
@@ -77,6 +78,7 @@
 				<p>The controls are designed to be keyboard-friendly. The keys should be fairly intuitive for the most part.</p>
 				<h2>Info</h2>
 				<p>dartboat is <a href="https://retarded.software/dartboat.git/" target="_blank">free and open-source software</a>. It is written in C and compiled to WebAssembly for the web target. JavaScript is used to handle the interactive elements.</p>
+				<p><span class="modal-close">[Close]</span></p>
 			</div>
 		</div>
 	</body>
diff --git a/web/static/style.css b/web/static/style.css
index da03f7d..a7d1244 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter&family=Lato:wght@400;700&family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap');
 
+html {
+	height: 100vh;
+}
+
 body {
 	color-scheme: dark;
 	color: #eee;
@@ -7,6 +11,9 @@ body {
 	font-family: 'Lato', sans-serif;
 	user-select: none;
 
+	position: fixed;
+	height: 100%;
+	width: 100%;
 	margin: 0;
 	padding: 0;
 }
@@ -15,8 +22,7 @@ body {
 	background-color: #111;
 	font-size: clamp(1.5vh, 2.5vw, 2vh);
 
-	height: 100vh;
-	width: 100vw;
+	height: 100%;
 	margin: 0 auto;
 
 	display: grid;
@@ -489,9 +495,9 @@ body {
 	font-family: 'Source Serif Pro', serif;
 	user-select: text;
 
-	width: calc(min(40em, 90vw) - 4em);
-	max-height: calc(calc(100vh - 10vw) - 4em);
-	margin: 5vw auto;
+	width: calc(min(44em, 100%) - 8em);
+	max-height: calc(100% - 8em);
+	margin: 2em auto;
 	padding: 2em;
 	outline: #7eab1e solid 2px;
 	overflow: auto;
@@ -511,10 +517,14 @@ body {
 	margin-top: 1em;
 }
 
-.modal-content a {
+.modal-content a, .modal-content .modal-close {
 	color: #7eab1e;
 }
 
-.modal-content a:hover {
+.modal-content a:hover, .modal-content .modal-close:hover {
 	color: #a8e428;
 }
+
+.modal-content .modal-close {
+	cursor: pointer;
+}