Add some better logic to the resizing, add a better contacts page. sidebar hiding still in the works

This commit is contained in:
Bun 2025-07-02 21:44:35 -04:00
parent d8893f0463
commit 67de08a5b8
19 changed files with 180 additions and 99 deletions

View file

@ -11,7 +11,7 @@ function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark })
return "light";
}
function updateButton({ buttonEl, isDark }) {
function updateThemeButton({ buttonEl, isDark }) {
const newCta = isDark ? "toggle light" : "toggle dark";
buttonEl.setAttribute("aria-label", newCta);
buttonEl.innerText = newCta;
@ -22,21 +22,21 @@ function updateThemeOnHtmlEl({ theme }) {
}
const button = document.querySelector("[data-theme-toggle]");
const themeToggleButton = document.querySelector("[data-theme-toggle]");
const localStorageTheme = localStorage.getItem("theme");
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
updateThemeButton({ buttonEl: themeToggleButton, isDark: currentThemeSetting === "dark" });
updateThemeOnHtmlEl({ theme: currentThemeSetting });
button.addEventListener("click", (event) => {
themeToggleButton.addEventListener("click", () => {
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
localStorage.setItem("theme", newTheme);
updateButton({ buttonEl: button, isDark: newTheme === "dark" });
updateThemeButton({ buttonEl: themeToggleButton, isDark: newTheme === "dark" });
updateThemeOnHtmlEl({ theme: newTheme });
currentThemeSetting = newTheme;
});
});