Compare commits

..

3 commits

Author SHA1 Message Date
zoe
a238bb327f noscript 2022-05-27 17:29:31 +02:00
zoe
41bfe7db62 add meta description 2022-05-27 17:19:05 +02:00
zoe
797ce896ad fallbacks for noscript 2022-05-27 17:11:36 +02:00
11 changed files with 66 additions and 9 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,
@ -107,7 +108,6 @@ p code{
}
#footer-right * {
display: flex;
margin-top: auto;
margin-bottom: auto;
}
@ -142,13 +142,14 @@ h6 {
text-align: right;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1em;
margin-bottom: 1em;
margin-top: 12pt;
margin-bottom: 12pt;
}
article {

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

@ -1,5 +1,6 @@
#hamburger-button,
#hamburger-bg,
#replacement-burger,
#darkmode-button-small{
display: none;
}
@ -9,8 +10,9 @@
#darkmode-toggle,
#darkmode-toggle-label
{
display: none;
display: none !important;
}
#replacement-burger,
#hamburger-button,
#darkmode-button-small,
#hamburger-bg,

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,

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

@ -0,0 +1,20 @@
{{ 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>
{{ $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 }}
</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";
}
}