From a24b51a5d2798ca4beedece745a98163410a8b0d Mon Sep 17 00:00:00 2001 From: triethyl Date: Sun, 15 Feb 2026 23:37:03 -0500 Subject: themes overhaul and new font --- site/themes/sine/layouts/partials/head.html | 2 +- site/themes/sine/layouts/partials/nav.html | 2 +- site/themes/sine/static/css/style.css | 19 ++-- .../sine/static/css/themes/melatonin-dark.css | 22 ++++ .../sine/static/css/themes/melatonin-light.css | 22 ++++ .../sine/static/css/themes/oxocarbon-dark.css | 2 +- .../sine/static/css/themes/oxocarbon-light.css | 2 +- site/themes/sine/static/css/themes/themes.css | 5 + .../sine/static/fonts/Jacquard12-Regular.ttf | Bin 0 -> 114268 bytes site/themes/sine/static/js/switch-theme.js | 116 ++++++++++----------- 10 files changed, 119 insertions(+), 73 deletions(-) create mode 100644 site/themes/sine/static/css/themes/melatonin-dark.css create mode 100644 site/themes/sine/static/css/themes/melatonin-light.css create mode 100644 site/themes/sine/static/css/themes/themes.css create mode 100644 site/themes/sine/static/fonts/Jacquard12-Regular.ttf diff --git a/site/themes/sine/layouts/partials/head.html b/site/themes/sine/layouts/partials/head.html index e7c23e5..6651e89 100644 --- a/site/themes/sine/layouts/partials/head.html +++ b/site/themes/sine/layouts/partials/head.html @@ -8,7 +8,7 @@ // Run as early as possible (function() { const theme = localStorage.getItem("theme"); - const preloadClass = theme === "dark" ? "preload-dark" : "preload-light"; + const preloadClass = theme.includes("dark") ? "preload-dark" : "preload-light"; // Add preload class to document.documentElement.classList.add(preloadClass); diff --git a/site/themes/sine/layouts/partials/nav.html b/site/themes/sine/layouts/partials/nav.html index efd7e5b..889d5a0 100644 --- a/site/themes/sine/layouts/partials/nav.html +++ b/site/themes/sine/layouts/partials/nav.html @@ -2,7 +2,7 @@

{{- .Site.Title -}} - +

{{ range.Site.Menus.main }} diff --git a/site/themes/sine/static/css/style.css b/site/themes/sine/static/css/style.css index c14e227..9470d48 100644 --- a/site/themes/sine/static/css/style.css +++ b/site/themes/sine/static/css/style.css @@ -1,8 +1,7 @@ /* COLORS */ -@import url('themes/oxocarbon-light.css'); -@import url('themes/oxocarbon-dark.css'); +@import url('themes/themes.css'); -#toggleTheme { +#switchTheme { font-family: "kirsch"; font-size: 2rem; color: var(--fg); @@ -10,8 +9,8 @@ background: none; cursor: pointer; position: relative; - top: 2px; - margin: -4px 2px; + /* top: 2px; */ + /* margin: -4px 2px; */ } #logoContainer { @@ -29,6 +28,13 @@ font-display: block; } +@font-face { + font-family: 'Jacquard12'; + src: url('/fonts/Jacquard12-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + /* LAYOUT */ body { @@ -152,9 +158,10 @@ body { margin: 14px 0; } -#content h1 { +#content :is(h1, h2, h3, h4, h5, h6) { margin: 0; text-align: center; + font-family: "Jacquard12"; } #content ul { diff --git a/site/themes/sine/static/css/themes/melatonin-dark.css b/site/themes/sine/static/css/themes/melatonin-dark.css new file mode 100644 index 0000000..bd12429 --- /dev/null +++ b/site/themes/sine/static/css/themes/melatonin-dark.css @@ -0,0 +1,22 @@ +/* COLORS */ +[data-theme="melatonin-dark"] { + --base00: #152233; + --base01: #253850; + --base02: #415d81; + --base03: #5b7aa2; + --base04: #84a3cb; + --base05: #c8d7eb; + --base06: #b9cce5; + --base07: #dce7f6; + --base08: #d87595; + --base09: #dd9f6b; + --base0A: #c88953; + --base0B: #90a254; + --base0C: #55aa9b; + --base0D: #5ba1d0; + --base0E: #a586d9; + --base0F: #a06f42; + + --fg: var(--base06); + --bg: var(--base00); +} diff --git a/site/themes/sine/static/css/themes/melatonin-light.css b/site/themes/sine/static/css/themes/melatonin-light.css new file mode 100644 index 0000000..f0d167b --- /dev/null +++ b/site/themes/sine/static/css/themes/melatonin-light.css @@ -0,0 +1,22 @@ +/* COLORS */ +[data-theme="melatonin-light"] { + --base00: #e5edfa; + --base01: #cedef6; + --base02: #b8cef1; + --base03: #6e8db8; + --base04: #2f548a; + --base05: #294069; + --base06: #132745; + --base07: #02060e; + --base08: #d87595; + --base09: #dd9f6b; + --base0A: #c88953; + --base0B: #90a254; + --base0C: #55aa9b; + --base0D: #5ba1d0; + --base0E: #a586d9; + --base0F: #9a6c40; + + --fg: var(--base06); + --bg: var(--base00); +} diff --git a/site/themes/sine/static/css/themes/oxocarbon-dark.css b/site/themes/sine/static/css/themes/oxocarbon-dark.css index 3283009..5388115 100644 --- a/site/themes/sine/static/css/themes/oxocarbon-dark.css +++ b/site/themes/sine/static/css/themes/oxocarbon-dark.css @@ -1,5 +1,5 @@ /* COLORS */ -[data-theme="dark"] { +[data-theme="oxocarbon-dark"] { --base00: #161616; --base01: #262626; --base02: #393939; diff --git a/site/themes/sine/static/css/themes/oxocarbon-light.css b/site/themes/sine/static/css/themes/oxocarbon-light.css index 7cd48ee..018eba4 100644 --- a/site/themes/sine/static/css/themes/oxocarbon-light.css +++ b/site/themes/sine/static/css/themes/oxocarbon-light.css @@ -1,5 +1,5 @@ /* COLORS */ -[data-theme="light"] { +[data-theme="oxocarbon-light"] { --base00: #ffffff; --base01: #f2f2f2; --base02: #d0d0d0; diff --git a/site/themes/sine/static/css/themes/themes.css b/site/themes/sine/static/css/themes/themes.css new file mode 100644 index 0000000..a691171 --- /dev/null +++ b/site/themes/sine/static/css/themes/themes.css @@ -0,0 +1,5 @@ +/* Import all themes */ +@import url('melatonin-dark.css'); +@import url('melatonin-light.css'); +@import url('oxocarbon-light.css'); +@import url('oxocarbon-dark.css'); diff --git a/site/themes/sine/static/fonts/Jacquard12-Regular.ttf b/site/themes/sine/static/fonts/Jacquard12-Regular.ttf new file mode 100644 index 0000000..d096417 Binary files /dev/null and b/site/themes/sine/static/fonts/Jacquard12-Regular.ttf differ diff --git a/site/themes/sine/static/js/switch-theme.js b/site/themes/sine/static/js/switch-theme.js index 5052f39..8baaee5 100644 --- a/site/themes/sine/static/js/switch-theme.js +++ b/site/themes/sine/static/js/switch-theme.js @@ -1,88 +1,78 @@ -// const root = document.documentElement; // , not -// const btn = document.getElementById("toggleTheme"); -// -// const savedTheme = localStorage.getItem("theme") || "light"; -// root.className = savedTheme; -// btn.innerHTML = savedTheme === "dark" ? "✧" : "☾"; -// -// btn.addEventListener("click", () => { -// const newTheme = root.classList.contains("light") ? "dark" : "light"; -// root.className = newTheme; -// localStorage.setItem("theme", newTheme); -// btn.innerHTML = newTheme === "dark" ? "✧" : "☾"; -// }); - -/** -* Utility function to calculate the current theme setting. -* Look for a local storage value. -* Fall back to system setting. -* Fall back to light mode. -*/ -function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) { +// Theme switcher + +// Themes and icons + +const themes = { + "melatonin-dark": { icon: " ☽", name: "Melatonin Dark" }, + "melatonin-light": { icon: " ✧", name: "Melatonin Light" }, + // "oxocarbon-dark": { icon: " ☾", name: "Oxocarbon Dark" }, + // "oxocarbon-light": { icon: " ✧", name: "Oxocarbon Light" }, +}; + +const themeOrder = Object.keys(themes); + +// Default themes +const defaultDarkTheme = "melatonin-dark"; +const defaultLightTheme = "melatonin-light"; + +// checks whether there is already a theme and if not, sets it to the user's default theme. +function calculateTheme({ localStorageTheme, systemSettingDark }) { if (localStorageTheme !== null) { return localStorageTheme; } if (systemSettingDark.matches) { - return "dark"; + return defaultDarkTheme; } - return "light"; + return defaultLightTheme; } -/** -* Utility function to update the button text and aria-label. -*/ -function updateButton({ buttonEl, isDark }) { - const newCta = isDark ? "Change to light theme" : "Change to dark theme"; - - const newInnerText = isDark ? "✧" : "☾"; - // use an aria-label if you are omitting text on the button - // and using a sun/moon icon, for example - buttonEl.setAttribute("aria-label", newCta); - buttonEl.innerText = newInnerText; +// Get next theme in list +function getNextTheme(current) { + const index = themeOrder.indexOf(current); + return themeOrder[(index + 1) % themeOrder.length]; } -/** -* Utility function to update the theme setting on the html tag -*/ -function updateThemeOnHtmlEl({ theme }) { - document.querySelector("html").setAttribute("data-theme", theme); -} +// Utility function to update the button text and aria-label. +function updateButton(button, theme) { + const nextTheme = getNextTheme(theme); + button.innerText = themes[theme].icon; + button.setAttribute( + "aria-label", + `Switch to ${themes[nextTheme].name} theme` + ); +} -/** -* On page load: -*/ +// Utility function to update the theme setting on the html tag +function applyTheme(theme) { + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem("theme", theme); +} -/** -* 1. Grab what we need from the DOM and system settings on page load -*/ -const button = document.querySelector("[data-theme-toggle]"); +// 1. Grab what we need from the DOM and system settings on page load +const button = document.querySelector("[data-theme-switcher]"); const localStorageTheme = localStorage.getItem("theme"); const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); -/** -* 2. Work out the current site settings -*/ -let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }); +// 2. Work out the current site settings +let currentTheme = calculateTheme({ localStorageTheme, systemSettingDark }); +console.log(currentTheme) -/** -* 3. Update the theme setting and button text accoridng to current settings -*/ -updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" }); -updateThemeOnHtmlEl({ theme: currentThemeSetting }); +// 3. Update the theme setting and button text accoridng to current settings +updateButton( button, currentTheme); +applyTheme( currentTheme ); -/** -* 4. Add an event listener to toggle the theme -*/ +// 4. Add an event listener to toggle the theme button.addEventListener("click", (event) => { - const newTheme = currentThemeSetting === "dark" ? "light" : "dark"; + const newTheme = getNextTheme(currentTheme); localStorage.setItem("theme", newTheme); - updateButton({ buttonEl: button, isDark: newTheme === "dark" }); - updateThemeOnHtmlEl({ theme: newTheme }); + updateButton( button, newTheme); + applyTheme( newTheme ); - currentThemeSetting = newTheme; + currentTheme = newTheme; + console.log(currentTheme) }); -- cgit v1.2.3