diff --git a/assets/js/lib/dark-mode.js b/assets/js/lib/dark-mode.js index 76078c0..252c959 100644 --- a/assets/js/lib/dark-mode.js +++ b/assets/js/lib/dark-mode.js @@ -1,5 +1,5 @@ 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")); } if (window.document.body.getAttribute("data-theme") == "dark") { @@ -14,14 +14,13 @@ function setDarkMode() { if (window.localStorage.getItem('theme')) { window.document.body.setAttribute("data-theme", window.localStorage.getItem("theme")); } -document.addEventListener("load",function () { + +setDarkMode(); +document.getElementById("darkMode").addEventListener("click", function () { + if (window.document.body.getAttribute("data-theme") != "dark") { + window.document.body.setAttribute("data-theme", "dark"); + } else { + window.document.body.setAttribute("data-theme", "light"); + } setDarkMode(); - document.querySelector("#darkMode").addEventListener("click", function () { - if (window.document.body.getAttribute("data-theme") != "dark") { - window.document.body.setAttribute("data-theme", "dark"); - } else { - window.document.body.setAttribute("data-theme", "light"); - } - setDarkMode(); - }); }); diff --git a/assets/js/lib/nav-collapse.js b/assets/js/lib/nav-collapse.js index a8cad6a..a39649e 100644 --- a/assets/js/lib/nav-collapse.js +++ b/assets/js/lib/nav-collapse.js @@ -1,16 +1,13 @@ - - - -document.querySelector("#menushow").addEventListener("click", function () { +function toggleMenu() { document.querySelector(".site-header").classList.toggle('enabled'); document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled'); document.querySelector(".menu").classList.toggle("enabled"); -}); -document.querySelector(".menu__item").addEventListener("click", function () { - document.querySelector(".site-header").classList.toggle('enabled'); - document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled'); - document.querySelector(".menu").classList.toggle("enabled"); -}) +} + +document.querySelector("#menushow").addEventListener("click", toggleMenu); +document.querySelectorAll(".menu__item").forEach(menu => + menu.addEventListener("click", toggleMenu) +); var nav = document.querySelector('.site-header'); var feed = document.querySelector('main'); @@ -27,7 +24,7 @@ function onScroll() { function onResize() { lastWindowHeight = window.innerHeight; - lastDocumentHeight = $(document).height(); + lastDocumentHeight = document.height; requestTick(); } diff --git a/partials/header-background.hbs b/partials/header-background.hbs index 7bf27e6..4d5be02 100644 --- a/partials/header-background.hbs +++ b/partials/header-background.hbs @@ -16,20 +16,19 @@ for it, and apply those styles to the
tag. Else, we just output a .responsive-header-img { background-image: url({{img_url background size='xl'}}); + background-position: center; background-size: cover; } @media(max-width: 1000px) { .responsive-header-img { background-image: url({{img_url background size='l'}}); - background-position: center; } } @media(max-width: 600px) { .responsive-header-img { background-image: url({{img_url background size='m'}}); - background-position: center; } } @@ -39,6 +38,7 @@ for it, and apply those styles to the
tag. Else, we just output a .responsive-header-img { background-image: url({{img_url @site.cover_image size='xl'}}); + background-position: center; background-size: cover; } @@ -57,4 +57,4 @@ for it, and apply those styles to the
tag. Else, we just output a - {{/if}} + {{/if}} \ No newline at end of file diff --git a/partials/site-background.hbs b/partials/site-background.hbs index db0c6e3..90b6d6b 100644 --- a/partials/site-background.hbs +++ b/partials/site-background.hbs @@ -36,4 +36,4 @@ for it, and apply those styles to the
tag. Else, we just output a