fallbacks for noscript

assets/scss/colors.scss

@@ -53,7 +53,6 @@ a {
     background-color: $dark-fg;
   }
 }
-
 a.footer-nav-item.active,
 a.footer-nav-item:hover {
   &.light {

assets/scss/layout.scss

@@ -32,6 +32,7 @@ footer {
 #content ul,
 #content ol,
 #content table,
+#content nav,
 .embed,
 code,
 .postdescription,
@@ -50,6 +51,10 @@ hr,
   height: 100%;
 }
 
+#replacement-burger{
+  display: flex;
+}
+
 #content .embed{
   display: block;
   overflow: hidden;
@@ -107,7 +112,6 @@ p code{
 }
 
 #footer-right * {
-  display: flex;
   margin-top: auto;
   margin-bottom: auto;
 }

assets/scss/main.scss

@@ -1,5 +1,6 @@
+@import "./noscript";
 @import "./colors";
 @import "./layout";
 @import "./font";
 @import "./style";
-@import "./responsive"
+@import "./responsive";

assets/scss/noscript.scss

@@ -0,0 +1,4 @@
+.flexjs,
+.iflexjs {
+  display: none;
+}

assets/scss/style.scss

@@ -68,6 +68,12 @@ button{
   cursor: pointer;
 }
 
+
+#replacement-burger{
+  width: 24pt;
+  height: 24pt;
+}
+
 .togglelabel {
   border: solid;
 }
@@ -112,6 +118,7 @@ h6 {
 }
 
 .postdescription,
+#content nav,
 #content p,
 #content ul,
 #content ol,

layouts/_default/nav.html

@@ -0,0 +1,22 @@
+{{ define "main" }}
+<section id="main">
+<header>
+  <h1 id="title" class="colorswitch">
+    <a href="../" class="colorswitch uplink">{{ .Title }}</a>
+  </h1>
+</header>
+  <div>
+        <article id="content" class="colorswitch">
+           {{ .Content }}
+           <p>
+           <nav>
+    {{ $currentPage := . }}
+    {{ range .Site.Menus.nav }}
+    <a class="hamburger-nav-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} active{{end}} colorswitch" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }} {{ .Title }}</a>
+    {{ end }}
+           </nav>
+           </p>
+        </article>
+  </div>
+</section>
+{{ end }}

layouts/partials/footer.html

@@ -4,15 +4,26 @@
 <nav id="footer-nav" aria-label="navigation">
     {{ $currentPage := . }}
     {{ range .Site.Menus.nav }}
-    <a class="footer-nav-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} active{{end}} colorswitch" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
+    <a class="footer-nav-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} active{{end}} colorswitch" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }} </a>
     {{ end }}
 </nav>
 </span>
 <span id="footer-right">
+        <div class="flexjs">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
+        </div>
+        <div class="flexjs">
         <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
+        <nav aria-label="hamburger menu">
         <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
+        </nav>
+        </div>
+        <noscript>
+            <nav>
+            <a class="colorswitch footer-nav-item" id="replacement-burger" href="/nav"></a>
+            </nav>
+        </noscript>
         <div class="hamburger colorswitch hidden" id="hamburger-bg">
 <nav id="hamburger-nav" aria-label="navigation">
     {{ $currentPage := . }}
@@ -20,6 +31,6 @@
     <a class="hamburger-nav-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} active{{end}} colorswitch" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }} {{ .Title }}</a><br>
     {{ end }}
 </nav>
-        </div>
 </span>
+</noscript>
 </footer>

layouts/shortcodes/randomword.html

@@ -1 +1 @@
-<button class="randomword-button colorswitch" data-wordlist="{{.Get 0}}"></button>
+<button class="randomword-button colorswitch" data-wordlist="{{.Get 0}}"><noscript>{{.Get 1}}</noscript></button>

static/js/main.js

@@ -1,9 +1,11 @@
 import { updateMode } from "./lightmode.js";
 import { activateHamburger } from "./hamburger.js";
 import { randomizeWords } from "./randomword.js";
+import { unhide_elements } from "./noscript.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   updateMode();
   activateHamburger();
   randomizeWords();
+  unhide_elements();
 });

static/js/noscript.js

@@ -0,0 +1,10 @@
+const flexes = document.getElementsByClassName("flexjs");
+const iflexes = document.getElementsByClassName("iflexjs");
+export function unhide_elements() {
+  for (let element of flexes) {
+    element.style.display = "flex";
+  }
+  for (let element of iflexes) {
+    element.style.display = "inline-flex";
+  }
+}