init: hugo + blog awesome, struktura webu
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
;
|
||||
window.addEventListener('load', () => {
|
||||
const gttButton = document.getElementById("totop");
|
||||
if (!gttButton) return;
|
||||
window.onscroll = () => {
|
||||
if (
|
||||
document.body.scrollTop > 300 ||
|
||||
document.documentElement.scrollTop > 300
|
||||
) {
|
||||
gttButton.style.visibility = "visible";
|
||||
gttButton.style.opacity = "1";
|
||||
} else {
|
||||
gttButton.style.visibility = "hidden";
|
||||
gttButton.style.opacity = "0";
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
(() => {
|
||||
"use strict";
|
||||
const LS_THEME_KEY = "theme";
|
||||
const THEMES = {
|
||||
LIGHT: "light",
|
||||
DARK: "dark",
|
||||
AUTO: "auto",
|
||||
};
|
||||
|
||||
const body = document.body;
|
||||
const config = body.getAttribute("data-theme");
|
||||
|
||||
const getThemeState = () => {
|
||||
const lsState = localStorage.getItem(LS_THEME_KEY);
|
||||
if (lsState) return lsState;
|
||||
|
||||
let state;
|
||||
switch (config) {
|
||||
case THEMES.DARK:
|
||||
state = THEMES.DARK;
|
||||
break;
|
||||
case THEMES.LIGHT:
|
||||
state = THEMES.LIGHT;
|
||||
break;
|
||||
case THEMES.AUTO:
|
||||
default:
|
||||
state = window.matchMedia("(prefers-color-scheme: dark)")
|
||||
.matches
|
||||
? THEMES.DARK
|
||||
: THEMES.LIGHT;
|
||||
break;
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
const initTheme = (state) => {
|
||||
if (state === THEMES.DARK) {
|
||||
document.documentElement.classList.add(THEMES.DARK);
|
||||
document.documentElement.classList.remove(THEMES.LIGHT);
|
||||
} else if (state === THEMES.LIGHT) {
|
||||
document.documentElement.classList.remove(THEMES.DARK);
|
||||
document.documentElement.classList.add(THEMES.LIGHT);
|
||||
}
|
||||
};
|
||||
|
||||
// init theme ASAP, then do the rest.
|
||||
initTheme(getThemeState());
|
||||
requestAnimationFrame(() => body.classList.remove("notransition"))
|
||||
const toggleTheme = () => {
|
||||
const state = getThemeState();
|
||||
if (state === THEMES.DARK) {
|
||||
localStorage.setItem(LS_THEME_KEY, THEMES.LIGHT);
|
||||
initTheme(THEMES.LIGHT);
|
||||
} else if (state === THEMES.LIGHT) {
|
||||
localStorage.setItem(LS_THEME_KEY, THEMES.DARK);
|
||||
initTheme(THEMES.DARK);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
// Theme switch
|
||||
const lamp = document.getElementById("mode");
|
||||
|
||||
lamp.addEventListener("click", () => toggleTheme());
|
||||
|
||||
// Blur the content when the menu is open
|
||||
const cbox = document.getElementById("menu-trigger");
|
||||
|
||||
cbox.addEventListener("change", function () {
|
||||
const area = document.querySelector(".wrapper");
|
||||
if (this.checked) return area.classList.add("blurry");
|
||||
area.classList.remove("blurry");
|
||||
});
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user