mirror of
https://git.kittycat.homes/zoe/hugo-battheme.git
synced 2024-08-15 03:25:18 +00:00
clean up js, start adding hamburger
This commit is contained in:
parent
b8901b68d7
commit
137f5a2b05
11 changed files with 120 additions and 41 deletions
|
@ -251,3 +251,32 @@ header {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: $dark-bg;
|
||||||
|
background-color: $dark-bg-alt;
|
||||||
|
border-color: $dark-bg;
|
||||||
|
&:hover {
|
||||||
|
transition: $trans-short;
|
||||||
|
background-color: $dark-bg;
|
||||||
|
color: $dark-bg-alt;
|
||||||
|
}
|
||||||
|
&.light {
|
||||||
|
color: $light-bg;
|
||||||
|
background-color: $light-bg-alt;
|
||||||
|
border-color: $light-bg;
|
||||||
|
&:hover {
|
||||||
|
transition: $trans-short;
|
||||||
|
background-color: $light-bg;
|
||||||
|
color: $light-bg-alt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#pageindicator {
|
||||||
|
&.light {
|
||||||
|
color: $light-bg;
|
||||||
|
}
|
||||||
|
&:hover {background-color: transparent;}
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
|
@ -17,6 +17,7 @@ $small: 12pt;
|
||||||
* {
|
* {
|
||||||
font-family: CaskaydiaCove;
|
font-family: CaskaydiaCove;
|
||||||
font-size: $small;
|
font-size: $small;
|
||||||
|
text-overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
p,
|
||||||
|
|
|
@ -50,6 +50,7 @@ p code{
|
||||||
justify-self: left;
|
justify-self: left;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer-right {
|
#footer-right {
|
||||||
|
@ -133,3 +134,14 @@ header{
|
||||||
padding-top: 42pt;
|
padding-top: 42pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#hamburger-bg{
|
||||||
|
position: fixed;
|
||||||
|
background-color: red;
|
||||||
|
opacity: 40%;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 42pt);
|
||||||
|
left: 0pt;
|
||||||
|
top: 0pt;
|
||||||
|
right: 0;
|
||||||
|
transition: 0s;
|
||||||
|
}
|
||||||
|
|
|
@ -2,3 +2,4 @@
|
||||||
@import "./layout";
|
@import "./layout";
|
||||||
@import "./font";
|
@import "./font";
|
||||||
@import "./style";
|
@import "./style";
|
||||||
|
@import "./responsive"
|
||||||
|
|
16
assets/scss/responsive.css
Normal file
16
assets/scss/responsive.css
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
#hamburger-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 640pt) {
|
||||||
|
#footer-center,
|
||||||
|
#darkmode-toggle,
|
||||||
|
#darkmode-toggle-label
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#hamburger-button {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -52,13 +52,15 @@ input:checked + label::after {
|
||||||
content: "滛";
|
content: "滛";
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-nav-item {
|
.footer-nav-item,
|
||||||
|
button{
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.togglelabel {
|
.togglelabel {
|
||||||
|
|
|
@ -5,6 +5,6 @@
|
||||||
{{- partial "header.html" . -}}
|
{{- partial "header.html" . -}}
|
||||||
<div id="content">{{- block "main" . }}{{- end }}</div>
|
<div id="content">{{- block "main" . }}{{- end }}</div>
|
||||||
{{- partial "footer.html" . -}}
|
{{- partial "footer.html" . -}}
|
||||||
<script src="/js/main.js"></script>
|
<script type="module" src="/js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<footer class="colorswitch">
|
<footer class="colorswitch">
|
||||||
<span id="footer-left"></span>
|
<span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="{{.Title}}"> {{.Site.Title | truncate 14}}</a></span>
|
||||||
<span id="footer-center">
|
<span id="footer-center">
|
||||||
<nav id="footer-nav" aria-label="navigation">
|
<nav id="footer-nav" aria-label="navigation">
|
||||||
{{ $currentPage := . }}
|
{{ $currentPage := . }}
|
||||||
|
@ -10,6 +10,16 @@
|
||||||
</span>
|
</span>
|
||||||
<span id="footer-right">
|
<span id="footer-right">
|
||||||
<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"></label>
|
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
|
||||||
|
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
|
||||||
|
<div class="hamburger colorswitch" id="hamburger-bg">
|
||||||
|
<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>
|
||||||
|
{{ end }}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
1
static/js/hamburger.js
Normal file
1
static/js/hamburger.js
Normal file
|
@ -0,0 +1 @@
|
||||||
|
function activateHamburger() {}
|
36
static/js/lightmode.js
Normal file
36
static/js/lightmode.js
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
const checkbox = document.getElementById("darkmode-toggle");
|
||||||
|
const colorswitchers = document.getElementsByClassName("colorswitch");
|
||||||
|
|
||||||
|
function switchToLight() {
|
||||||
|
for (let item of colorswitchers) {
|
||||||
|
item.classList.add("light");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchToDark() {
|
||||||
|
for (let item of colorswitchers) {
|
||||||
|
console.log(item);
|
||||||
|
item.classList.remove("light");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateMode() {
|
||||||
|
if (localStorage.getItem("light")) {
|
||||||
|
switchToLight();
|
||||||
|
} else {
|
||||||
|
switchToDark();
|
||||||
|
}
|
||||||
|
checkbox.checked = localStorage.getItem("dark");
|
||||||
|
checkbox.addEventListener("change", function () {
|
||||||
|
localStorage.setItem("light", this.checked);
|
||||||
|
if (this.checked) {
|
||||||
|
switchToLight();
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem("light");
|
||||||
|
switchToDark();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (localStorage.getItem("light")) {
|
||||||
|
checkbox.checked = true;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,36 +1,7 @@
|
||||||
const checkbox = document.getElementById("darkmode-toggle");
|
import { updateMode } from "./lightmode.js";
|
||||||
const colorswitchers = document.getElementsByClassName("colorswitch");
|
import { activateHamburger } from "./hamburger.js";
|
||||||
|
|
||||||
function switchToLight() {
|
|
||||||
for (let item of colorswitchers) {
|
|
||||||
item.classList.add("light");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function switchToDark() {
|
|
||||||
for (let item of colorswitchers) {
|
|
||||||
console.log(item);
|
|
||||||
item.classList.remove("light");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
if (localStorage.getItem("light")) {
|
updateMode();
|
||||||
switchToLight();
|
activateHamburger();
|
||||||
} else {
|
|
||||||
switchToDark();
|
|
||||||
}
|
|
||||||
checkbox.checked = localStorage.getItem("dark");
|
|
||||||
checkbox.addEventListener("change", function () {
|
|
||||||
localStorage.setItem("light", this.checked);
|
|
||||||
if (this.checked) {
|
|
||||||
switchToLight();
|
|
||||||
} else {
|
|
||||||
localStorage.removeItem("light");
|
|
||||||
switchToDark();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (localStorage.getItem("light")) {
|
|
||||||
checkbox.checked = true;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue