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.

1 files changed, 17 insertions, 7 deletions

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;
+}