mirror of
https://github.com/ParkerTenBroeck/ParkerTenBroeck.github.io.git
synced 2026-06-07 05:18:40 -04:00
68 lines
No EOL
2.4 KiB
HTML
68 lines
No EOL
2.4 KiB
HTML
<div class="title">
|
|
<a href="{{config.base_url}}">Hey! it's Grey</a>
|
|
</div>
|
|
<nav>
|
|
<a href="{{ get_url(path='@/blog/_index.md') }}">Posts</a>
|
|
{# <a href="{{ get_url(path='@/projects/_index.md') }}">Projects</a>
|
|
<a href="{{ get_url(path='@/crafts/_index.md') }}">Crafts</a> #}
|
|
<a href="{{ get_url(path='@/random/_index.md') }}">Random</a>
|
|
<a href="{{ get_url(path='@/pictures/_index.md') }}">Pictures</a>
|
|
<a href="{{ get_url(path='tags') }}">Tags</a>
|
|
<a href="{{ get_url(path='category') }}">Categories</a>
|
|
<button
|
|
class="theme-toggle"
|
|
type="button"
|
|
aria-label="Toggle theme"
|
|
aria-pressed="false"
|
|
>
|
|
<!-- Sun (light) -->
|
|
<svg class="icon icon-sun" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M4.93 19.07l1.42-1.42M19.07 4.93 17.65 6.35m1.42 12.72-1.42-1.42M4.93 4.93 6.35 6.35M20 12h2M2 12H4m8 10V20M12 4V2m0 16A6 6 0 0112 6a6 6 0 110 12Z"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
|
|
<!-- Moon (dark) -->
|
|
<svg class="icon icon-moon" viewBox="1 1 24 20" aria-hidden="true">
|
|
<path
|
|
d="M21 14.5A8.5 8.5 0 019.5 3 7 7 0 1021 14.5Z"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
|
|
<script>
|
|
(function setupThemeToggle() {
|
|
const root = document.documentElement;
|
|
const btn = document.querySelector(".theme-toggle");
|
|
const mql = window.matchMedia("(prefers-color-scheme: dark)");
|
|
const systemTheme = () => (mql.matches ? "dark" : "light");
|
|
const getTheme = () => localStorage.theme ?? root.dataset.theme ?? systemTheme();
|
|
|
|
const applyTheme = (theme, { manual = false } = {}) => {
|
|
root.dataset.theme = theme;
|
|
localStorage.theme = theme;
|
|
btn.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
|
|
};
|
|
|
|
document.documentElement.classList.add("no-theme-transition");
|
|
applyTheme(getTheme());
|
|
requestAnimationFrame(() => {
|
|
document.documentElement.classList.remove("no-theme-transition");
|
|
});
|
|
|
|
btn.addEventListener("click", () => {
|
|
const next = getTheme() === "dark" ? "light" : "dark";
|
|
applyTheme(next);
|
|
});
|
|
})();
|
|
</script> |