Damillora/Yuika
1
0
Fork 0
mirror of https://github.com/Damillora/Yuika synced 2024-11-16 23:07:33 +00:00
Code Issues Releases Wiki Activity

fix: JS fixes

Browse Source
This commit is contained in:
Damillora 2021-04-22 17:03:54 +07:00
parent 59c72b60aa
commit 6a2e52bd2f
4 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/js/lib/dark-mode.js
View File

@ -1,5 +1,5 @@
function setDarkMode() { function setDarkMode() {
if (window.document.body.getAttribute("data-theme")){ if (window.document.body.getAttribute("data-theme")) {
window.localStorage.setItem('theme', window.document.body.getAttribute("data-theme")); window.localStorage.setItem('theme', window.document.body.getAttribute("data-theme"));
} }
if (window.document.body.getAttribute("data-theme") == "dark") { if (window.document.body.getAttribute("data-theme") == "dark") {
@ -14,14 +14,13 @@ function setDarkMode() {
if (window.localStorage.getItem('theme')) { if (window.localStorage.getItem('theme')) {
window.document.body.setAttribute("data-theme", window.localStorage.getItem("theme")); window.document.body.setAttribute("data-theme", window.localStorage.getItem("theme"));
} }
document.addEventListener("load",function () {
setDarkMode(); setDarkMode();
document.querySelector("#darkMode").addEventListener("click", function () { document.getElementById("darkMode").addEventListener("click", function () {
if (window.document.body.getAttribute("data-theme") != "dark") { if (window.document.body.getAttribute("data-theme") != "dark") {
window.document.body.setAttribute("data-theme", "dark"); window.document.body.setAttribute("data-theme", "dark");
} else { } else {
window.document.body.setAttribute("data-theme", "light"); window.document.body.setAttribute("data-theme", "light");
} }
setDarkMode(); setDarkMode();
});
}); });

19
assets/js/lib/nav-collapse.js
View File

@ -1,16 +1,13 @@
function toggleMenu() {
document.querySelector("#menushow").addEventListener("click", function () {
document.querySelector(".site-header").classList.toggle('enabled'); document.querySelector(".site-header").classList.toggle('enabled');
document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled'); document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled');
document.querySelector(".menu").classList.toggle("enabled"); document.querySelector(".menu").classList.toggle("enabled");
}); }
document.querySelector(".menu__item").addEventListener("click", function () {
document.querySelector(".site-header").classList.toggle('enabled'); document.querySelector("#menushow").addEventListener("click", toggleMenu);
document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled'); document.querySelectorAll(".menu__item").forEach(menu =>
document.querySelector(".menu").classList.toggle("enabled"); menu.addEventListener("click", toggleMenu)
}) );
var nav = document.querySelector('.site-header'); var nav = document.querySelector('.site-header');
var feed = document.querySelector('main'); var feed = document.querySelector('main');
@ -27,7 +24,7 @@ function onScroll() {
function onResize() { function onResize() {
lastWindowHeight = window.innerHeight; lastWindowHeight = window.innerHeight;
lastDocumentHeight = $(document).height(); lastDocumentHeight = document.height;
requestTick(); requestTick();
} }

4
partials/header-background.hbs
View File

@ -16,20 +16,19 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
<style type="text/css"> <style type="text/css">
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url background size='xl'}}); background-image: url({{img_url background size='xl'}});
background-position: center;
background-size: cover; background-size: cover;
} }
@media(max-width: 1000px) { @media(max-width: 1000px) {
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url background size='l'}}); background-image: url({{img_url background size='l'}});
background-position: center;
} }
} }
@media(max-width: 600px) { @media(max-width: 600px) {
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url background size='m'}}); background-image: url({{img_url background size='m'}});
background-position: center;
} }
} }
</style> </style>
@ -39,6 +38,7 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
<style type="text/css"> <style type="text/css">
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url @site.cover_image size='xl'}}); background-image: url({{img_url @site.cover_image size='xl'}});
background-position: center;
background-size: cover; background-size: cover;
} }