Improve accessibility

embeds/nav.html

@@ -1,4 +1,4 @@
-<section class="nav">
+<section class="nav" role="navigation" aria-label="Site navigation">
   <p>
     <a href="/">Home</a> <a href="/branding/">Branding</a>
     <a href="/site/">Site Information</a>

views/projects/scripts/data_get_projects.js

@@ -7,7 +7,7 @@ fetch("./public/projects.json")
       .reduce(
         (html, project) =>
           html +
-          `<h1>${project.name}${
+          `<h1><a href="${project.url}">${project.name}${
             /*<span style="vertical-align: middle;
           font-size: 0.5em;">${project.tags.reduce(
             (html, tag) =>
@@ -20,19 +20,13 @@ fetch("./public/projects.json")
               ">${tag}</button>`,
             ""
           )}</span>*/ ""
-          }</h1>
+          }</a></h1>
     <p><b>${new Date(project.date).toLocaleDateString()}</b></p>
     ${project.description.reduce(
       (html, descfragment) => html + `<p>${descfragment}</p>`,
       ""
     )}
     <p>
-      <button 
-        onclick="window.location.assign('${project.url}')"
-      >
-        Open
-      </button>
-      or
       <button
         onclick="window.manager.createWindow('${project.url}', false${
             project.size?.[0] ? ", " + project.size[0] : ""

views/scripts/accessibility.js

@@ -27,7 +27,7 @@ const FONTS = [
 
 function createAccessibilityNodes() {
   document.querySelector("#accessibility").innerHTML = `<details>
-  <summary>Accessibility controls</summary>
+  <summary>Site Modifiers</summary>
   <fieldset>
     <label for="acc-scale">UI scale:
       <input
@@ -84,7 +84,6 @@ function createAccessibilityNodes() {
     <label for="acc-base" class="checkbox">Base style:
       <input id="acc-base" type="checkbox" />
       <span class="checkbox">✓</span>
-      (requires reload)
     </label>
   </fieldset>
 </details>`;
@@ -138,7 +137,7 @@ function createAccessibilityNodes() {
 
   accBase.addEventListener("change", function (e) {
     window.localStorage.setItem("acc-base", e.target.checked);
-    window.location.reload();
+    changeBase(e.target.checked);
   });
 }
 
@@ -159,7 +158,7 @@ function initializeChanges(_, loading) {
   }
   let width = window.localStorage.getItem("acc-width");
   if (width == null) {
-    window.localStorage.setItem("acc-width", 40);
+    window.localStorage.setItem("acc-width", 50);
     width = window.localStorage.getItem("acc-width");
   }
   let font = window.localStorage.getItem("acc-font");
@@ -198,11 +197,7 @@ function initializeChanges(_, loading) {
   changeColor(hue, sat, hueOver === "true", satOver === "true");
 
   changeFont(font);
-
+  changeBase(base === "true");
-  if (loading) {
-    prevBase = base;
-    changeBase(base === "true");
-  } else if (base != prevBase) window.location.reload();
 
   if (scale != null && accScale != null) accScale.value = scale;
   if (width != null && accWidth != null) accWidth.value = width;

views/styles/normal.css

@@ -62,9 +62,9 @@
   /* The foreground color of the page. */
   --color: hsl(var(--base-color), 85%);
   /* The accent color of the page. */
-  --accent-color: hsl(var(--base-color), 40%);
+  --accent-color: hsl(var(--base-color), 30%);
   /* The background-adjacent accent color of the page. */
-  --accent-color-bg: hsl(var(--base-color), 50%);
+  --accent-color-bg: hsl(var(--base-color), 75%);
   /* The foreground accent color of the page. */
   --accent-color-fg: hsl(var(--base-color), 95%);
 
@@ -87,9 +87,9 @@
     /* The foreground color of the page. */
     --color: hsl(var(--base-color), 15%);
     /* The accent color of the page. */
-    --accent-color: hsl(var(--base-color), 60%);
+    --accent-color: hsl(var(--base-color), 70%);
     /* The background-adjacent accent color of the page. */
-    --accent-color-bg: hsl(var(--base-color), 30%);
+    --accent-color-bg: hsl(var(--base-color), 25%);
     /* The foreground accent color of the page. */
     --accent-color-fg: hsl(var(--base-color), 5%);
     /* The color of the borders used on certain elements. */
@@ -98,17 +98,17 @@
 }
 
 html.base {
-  --base-color: 0, 0% !important;
+  /* --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;
+  --font-weight: normal !important;
 
   --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;
+  --header-font-weight: bold !important;
 
   --underlay-color: #fff !important;
   --background-color: transparent !important;
@@ -117,10 +117,10 @@ html.base {
   --accent-color-bg: #000 !important;
   --accent-color-fg: #000 !important;
 
-  --border-width: calc(1em / 16);
+  --border-width: calc(1em / 16) !important;
-  --border-style: solid;
+  --border-style: solid !important;
-  --border-color: var(--color);
+  --border-color: var(--color) !important;
-  --border-radius: 0;
+  --border-radius: 0 !important;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -136,8 +136,32 @@ html.base {
   }
 }
 
-html.base body {
+@media (forced-colors: active) {
-  margin: 0;
+  :root {
+    /* --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 !important;
+
+    --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 !important;
+
+    --underlay-color: #fff !important;
+    --background-color: transparent !important;
+    --color: #000 !important;
+    --accent-color: #c0c0c0 !important;
+    --accent-color-bg: #000 !important;
+    --accent-color-fg: #000 !important;
+
+    --border-width: calc(1em / 16) !important;
+    --border-style: solid !important;
+    --border-color: var(--color) !important;
+    --border-radius: 0 !important;
+  }
 }
 
 /* Size and type normalize */

views/styles/windows.css

@@ -25,6 +25,7 @@ div.window-object {
   min-height: 2em;
   background-color: var(--accent-color);
   color: var(--accent-color-fg);
+  --border-color: var(--color);
   border: var(--border-width) var(--border-style) var(--border-color);
   resize: both;
   overflow: hidden;
@@ -36,6 +37,18 @@ div.window-object {
   animation-duration: 0.25s;
 }
 
+html.base div.window-object {
+  --background-color: transparent !important;
+  --color: #000 !important;
+  --accent-color: #c0c0c0 !important;
+  --accent-color-bg: #000 !important;
+  --accent-color-fg: #000 !important;
+
+  background-color: var(--accent-color);
+  color: var(--accent-color-fg);
+  border: var(--border-width) var(--border-style) var(--border-color);
+}
+
 div.window-object {
   /* The underlay color of the document. */
   --underlay-color: hsl(var(--base-color), 10%);
@@ -70,6 +83,20 @@ div.window-object {
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  html.base div.window-object {
+    --background-color: transparent !important;
+    --color: #fff !important;
+    --accent-color: #404040 !important;
+    --accent-color-bg: #fff !important;
+    --accent-color-fg: #fff !important;
+
+    background-color: var(--accent-color);
+    color: var(--accent-color-fg);
+    border: var(--border-width) var(--border-style) var(--border-color);
+  }
+}
+
 div.window-object.unfocused {
   opacity: 0.5;
 }