Improve accessibility somewhat

views/scripts/accessibility.js

@@ -9,8 +9,22 @@ var accSaturation;
 
 var accBase;
 
+// if interface.js is existent
 var propagateStyles = propagateStyles ?? null;
 
+const FONTS = [
+  ["Lexend Deca"],
+  ["Renogare"],
+  ["Mojangles", "Minecraft"],
+  ["Nintendo DS", "NDS12"],
+  ["System Default", `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  "Segoe UI Symbol"`],
+  ["Sans-serif", "sans-serif"],
+  ["Serif", "serif"],
+  ["Mono", "monospace"]
+]
+
 function createAccessibilityNodes() {
   document.querySelector("#accessibility").innerHTML = `<details>
   <summary>Accessibility controls</summary>
@@ -34,18 +48,9 @@ function createAccessibilityNodes() {
         value="50"
       />
     </label><br />
-    <label for="acc-font">Font family:
+    <label for="acc-font">Page font:
       <select id="acc-font">
-        <option value="Lexend Deca" selected>Page Default</option>
-        <option value="-apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto,
-        Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;,
-        &quot;Segoe UI Symbol&quot;">System Default</option>
-        <option value="Minecraft">Mojangles</option>
-        <option value="sans-serif">Sans-serif</option>
-        <option value="serif">Serif</option>
-        <option value="mono">Monospace</option>
-        <option value="cursive">Cursive</option>
-        <option value="fantasy">Fantasy</option>
+        ${FONTS.map(([name, value]) => `<option value="${value ?? name}" selected>${name}</option>`)}
       </select>
     </label><br />
       <label for="acc-hue">Page hue:

views/styles/normal.css

@@ -50,6 +50,11 @@
   /* The weight of the font used in the document. */
   --font-weight: normal;
 
+  /* The font used for headers in the document. */
+  --header-font-family: var(--font-family);
+  /* The weight of the font used for headers in the document. */
+  --header-font-weight: bold;
+
   /* The underlay color of the document. */
   --underlay-color: hsl(var(--base-color), 10%);
   /* The page color. */
@@ -74,6 +79,18 @@
 }
 
 html.base {
+  --base-color: 0, 0% !important;
+
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol" !important;
+  --font-weight: normal;
+
+  --header-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol" !important;
+  --header-font-weight: bold;
+
   --underlay-color: #fff !important;
   --background-color: transparent !important;
   --color: #000 !important;
@@ -81,11 +98,6 @@ html.base {
   --accent-color-bg: #000 !important;
   --accent-color-fg: #000 !important;
 
-  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol" !important;
-  --font-weight: normal;
-
   --border-width: calc(1em / 16);
   --border-style: solid;
   --border-color: var(--color);
@@ -139,6 +151,8 @@ main {
 }
 
 h1 {
+  font-family: var(--header-font-family);
+  font-weight: var(--header-font-weight);
   font-size: 2em;
   line-height: 1.5em;
   margin: 0;
@@ -146,6 +160,8 @@ h1 {
 }
 
 h2 {
+  font-family: var(--header-font-family);
+  font-weight: var(--header-font-weight);
   font-size: 1.5em;
   line-height: 1.25em;
   margin: 0;
@@ -153,6 +169,8 @@ h2 {
 }
 
 h3 {
+  font-family: var(--header-font-family);
+  font-weight: var(--header-font-weight);
   font-size: 1.1em;
   line-height: 1.25em;
   margin: 0;
@@ -160,6 +178,8 @@ h3 {
 }
 
 h4 {
+  font-family: var(--header-font-family);
+  font-weight: var(--header-font-weight);
   font-size: 1em;
   line-height: 1.25em;
   margin: 0;

views/styles/style.css

@@ -6,6 +6,14 @@
   font-family: "Minecraft";
   src: url("/assets/fonts/Minecraft/Regular.otf");
 }
+@font-face {
+  font-family: "Renogare";
+  src: url("/assets/fonts/Renogare/Regular.otf");
+}
+@font-face {
+  font-family: "NDS12";
+  src: url("/assets/fonts/NDS12/Regular.otf");
+}
 :root {
   --font-family: "Lexend Deca";
 }