mirror of
https://git.kittycat.homes/zoe/hugo-battheme.git
synced 2024-08-15 03:25:18 +00:00
fallbacks for noscript
This commit is contained in:
parent
5cc0c2e449
commit
797ce896ad
10 changed files with 66 additions and 6 deletions
|
@ -53,7 +53,6 @@ a {
|
|||
background-color: $dark-fg;
|
||||
}
|
||||
}
|
||||
|
||||
a.footer-nav-item.active,
|
||||
a.footer-nav-item:hover {
|
||||
&.light {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
@import "./noscript";
|
||||
@import "./colors";
|
||||
@import "./layout";
|
||||
@import "./font";
|
||||
@import "./style";
|
||||
@import "./responsive"
|
||||
@import "./responsive";
|
||||
|
|
4
assets/scss/noscript.scss
Normal file
4
assets/scss/noscript.scss
Normal file
|
@ -0,0 +1,4 @@
|
|||
.flexjs,
|
||||
.iflexjs {
|
||||
display: none;
|
||||
}
|
|
@ -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
22
layouts/_default/nav.html
Normal 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 }}
|
|
@ -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>
|
||||
|
|
|
@ -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 { 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
10
static/js/noscript.js
Normal 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";
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue