Fix window height for mobile devices

src/main.ts

@@ -2,6 +2,13 @@
 
 import * as Locutus from "locutus";
 
+function resize() {
+    document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
+}
+
+resize();
+window.addEventListener("resize", resize);
+
 window.addEventListener("DOMContentLoaded", () => {
     // Remove <noscript> tags
     for (const noscript of document.getElementsByTagName("noscript")) {

www/res/styles/styles.css

@@ -1,5 +1,5 @@
 
-* {
+html {
     font-family: 'Arial', sans-serif;
     --bg-win: rgba(192, 192, 192, 0.25);
     --bg: rgba(224, 224, 224, 0.5);
@@ -10,14 +10,14 @@
 noscript {
     display: block;
     text-align: center;
-    margin: 20vh auto 1em auto;
+    margin: calc(var(--vh, 1vh) * 20) auto 1em auto;
     max-width: 650px;
     padding: 2em !important;
 }
 
 body {
     margin: 0;
-    min-height: 100vh;
+    min-height: calc(var(--vh, 1vh) * 100);
     background-image: url("/res/images/background.jpg");
     background-repeat: no-repeat;
     background-position: center;
@@ -28,12 +28,12 @@ div#wrapper {
     box-sizing: border-box;
     width: 100%;
     padding: 1em;
-    height: calc(100vh - var(--footer-height));
+    height: calc(var(--vh, 1vh) * 100 - var(--footer-height));
 }
 
 @media screen and (max-width: 600px) {
     div#wrapper {
-        height: 100vh;
+        height: calc(var(--vh, 1vh) * 100);
     }
 }
 
@@ -74,7 +74,7 @@ div#windows > * {
 div.window-login,
 div.window-welcome {
     max-width: 650px;
-    margin: calc(max(25vh, 8em) - 8em) auto 1em auto;
+    margin: calc(max(var(--vh, 1vh) * 25, 8em) - 8em) auto 1em auto;
 }
 
 div.window-login h1,
@@ -99,7 +99,7 @@ footer {
     footer {
         flex-direction: column;
     }
-    * {
+    html {
         --footer-height: 4em;
     }
 }