fallbacks for noscript

This commit is contained in:
zoe 2022-05-27 17:11:36 +02:00
parent 5cc0c2e449
commit 797ce896ad
10 changed files with 66 additions and 6 deletions

View file

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

View file

@ -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;
}

View file

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

View file

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

View file

@ -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,

22
layouts/_default/nav.html Normal file
View file

@ -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 }}

View file

@ -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>

View file

@ -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>

View file

@ -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();
});

10
static/js/noscript.js Normal file
View file

@ -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";
}
}