tfld/watterblock
1
0
Fork 0
Code

implement _yesscript css class

Browse Source 
Elements with this class are only shown when JS is available, i.e. they
are (mostly) the opposite of the noscript element.

This replaces the previous implementation to do that, which was itself
based on JavaScript. It is now reusable, declarative and easier to grasp
at a glance.

As the entire site is built on JS this likely won't be used much beyond
its single current invocation.
This commit is contained in:
Adrian Wannenmacher 2026-03-10 22:05:07 +01:00
parent 085b3cca03
commit f530706097
Signed by: tfld
GPG Key ID: 19D986ECB1E492D5
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -9,6 +9,14 @@
<link rel="stylesheet" href="/vendored/normalize-8.0.1.css"> <link rel="stylesheet" href="/vendored/normalize-8.0.1.css">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/vendored/material-icons.css" /> <link rel="stylesheet" href="/vendored/material-icons.css" />
<noscript>
<style>
._yesscript {
display: none !important;
}
</style>
</noscript>
<script type="module"> <script type="module">
// initialize DB early // initialize DB early
import WbDb from "/data/db.js"; import WbDb from "/data/db.js";
@ -27,12 +35,11 @@
</head> </head>
<body class="wb-layout"> <body class="wb-layout">
<div class="wb-splash" id="initial" style="display: none;"> <div class="wb-splash _yesscript">
<div class="spinner"></div> <div class="spinner"></div>
<h1>Watterblock</h1> <h1>Watterblock</h1>
<p>I lad grad…</p> <p>I lad grad…</p>
</div> </div>
<script>document.getElementById("initial").removeAttribute("style")</script>
<noscript class="wb-splash"> <noscript class="wb-splash">
<h1>Watterblock</h1> <h1>Watterblock</h1>