index.html

@@ -5,6 +5,11 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>Fuel App</title>
 		<style type="text/css">
+@font-face {
+	src: url("Nunito.woff2") format("woff2");
+	font-family: Nunito;
+	font-weight: 200 1000;
+}
 body {
 	margin:40px auto;
 	max-width:650px;
@@ -12,7 +17,7 @@ body {
 	font-size:18px;
 	color:#444;
 	padding:0 10px;
-	font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, Nunito, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
+	font-family: Nunito, serif;
 	width: fit-content;
 }
     h1,h2,h3{ line-height:1.2 }
@@ -52,17 +57,8 @@ body {
 			<h1>⛽<br>Fuel App</h1>
 		</header>
 
-		<div id="app">
+		<div id="app"></div>
-                  <noscript>JavaScript is required to use this calculator.</noscript>
-                </div>
 
-                  <script type="text/javascript">
-                    const el = document.getElementById('app');
-                    if (el) {
-                      const timer = setTimeout(function() { console.log('ran'); el.textContent = "Loading…" }, 500);
-                      el.dataset.timer = timer;
-                    }
-                  </script>
 		<script type="module">
 			import { reactive, html } from './arrow.min.mjs';
 
@@ -85,10 +81,6 @@ function updateValue(e) {
 	}
 }
 
-const app = document.getElementById('app');
-clearTimeout(parseInt(app.dataset.timer, 10));
-app.replaceChildren(); // Clear loading text
-
 html`
 <form>
 <label for="price">Price</label>
@@ -107,7 +99,7 @@ html`
 <p class="total">
 $${() => calculate().toFixed(2)}
 </p>
-`(app)
+`(document.getElementById('app'))
 		</script>
 	</body>
 </html>