fallbacks for noscript
This commit is contained in:
parent
5cc0c2e449
commit
797ce896ad
|
@ -53,7 +53,6 @@ a {
|
||||||
background-color: $dark-fg;
|
background-color: $dark-fg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.footer-nav-item.active,
|
a.footer-nav-item.active,
|
||||||
a.footer-nav-item:hover {
|
a.footer-nav-item:hover {
|
||||||
&.light {
|
&.light {
|
||||||
|
|
|
@ -32,6 +32,7 @@ footer {
|
||||||
#content ul,
|
#content ul,
|
||||||
#content ol,
|
#content ol,
|
||||||
#content table,
|
#content table,
|
||||||
|
#content nav,
|
||||||
.embed,
|
.embed,
|
||||||
code,
|
code,
|
||||||
.postdescription,
|
.postdescription,
|
||||||
|
@ -50,6 +51,10 @@ hr,
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#replacement-burger{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
#content .embed{
|
#content .embed{
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -107,7 +112,6 @@ p code{
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer-right * {
|
#footer-right * {
|
||||||
display: flex;
|
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
|
@import "./noscript";
|
||||||
@import "./colors";
|
@import "./colors";
|
||||||
@import "./layout";
|
@import "./layout";
|
||||||
@import "./font";
|
@import "./font";
|
||||||
@import "./style";
|
@import "./style";
|
||||||
@import "./responsive"
|
@import "./responsive";
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
.flexjs,
|
||||||
|
.iflexjs {
|
||||||
|
display: none;
|
||||||
|
}
|
|
@ -68,6 +68,12 @@ button{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#replacement-burger{
|
||||||
|
width: 24pt;
|
||||||
|
height: 24pt;
|
||||||
|
}
|
||||||
|
|
||||||
.togglelabel {
|
.togglelabel {
|
||||||
border: solid;
|
border: solid;
|
||||||
}
|
}
|
||||||
|
@ -112,6 +118,7 @@ h6 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.postdescription,
|
.postdescription,
|
||||||
|
#content nav,
|
||||||
#content p,
|
#content p,
|
||||||
#content ul,
|
#content ul,
|
||||||
#content ol,
|
#content ol,
|
||||||
|
|
|
@ -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 }}
|
|
@ -4,15 +4,26 @@
|
||||||
<nav id="footer-nav" aria-label="navigation">
|
<nav id="footer-nav" aria-label="navigation">
|
||||||
{{ $currentPage := . }}
|
{{ $currentPage := . }}
|
||||||
{{ range .Site.Menus.nav }}
|
{{ 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 }}
|
{{ end }}
|
||||||
</nav>
|
</nav>
|
||||||
</span>
|
</span>
|
||||||
<span id="footer-right">
|
<span id="footer-right">
|
||||||
|
<div class="flexjs">
|
||||||
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
|
<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>
|
<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>
|
<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>
|
<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">
|
<div class="hamburger colorswitch hidden" id="hamburger-bg">
|
||||||
<nav id="hamburger-nav" aria-label="navigation">
|
<nav id="hamburger-nav" aria-label="navigation">
|
||||||
{{ $currentPage := . }}
|
{{ $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>
|
<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 }}
|
{{ end }}
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
|
||||||
</span>
|
</span>
|
||||||
|
</noscript>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
import { updateMode } from "./lightmode.js";
|
import { updateMode } from "./lightmode.js";
|
||||||
import { activateHamburger } from "./hamburger.js";
|
import { activateHamburger } from "./hamburger.js";
|
||||||
import { randomizeWords } from "./randomword.js";
|
import { randomizeWords } from "./randomword.js";
|
||||||
|
import { unhide_elements } from "./noscript.js";
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
updateMode();
|
updateMode();
|
||||||
activateHamburger();
|
activateHamburger();
|
||||||
randomizeWords();
|
randomizeWords();
|
||||||
|
unhide_elements();
|
||||||
});
|
});
|
||||||
|
|
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue