Compare commits

...

2 commits

Author SHA1 Message Date
0995fa63f0
Show Loading message/noscript 2024-09-04 20:08:59 +10:00
fd57189337
Ditch web font
It was way bigger than the whole site.
2024-09-04 20:08:31 +10:00
2 changed files with 16 additions and 8 deletions

Binary file not shown.

View file

@ -5,11 +5,6 @@
<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;
@ -17,7 +12,7 @@ body {
font-size:18px;
color:#444;
padding:0 10px;
font-family: Nunito, serif;
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;
width: fit-content;
}
h1,h2,h3{ line-height:1.2 }
@ -57,8 +52,17 @@ body {
<h1><br>Fuel App</h1>
</header>
<div id="app"></div>
<div id="app">
<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';
@ -81,6 +85,10 @@ 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>
@ -99,7 +107,7 @@ html`
<p class="total">
$${() => calculate().toFixed(2)}
</p>
`(document.getElementById('app'))
`(app)
</script>
</body>
</html>