lerko
141d66d7bb
Merge projects + homelab + timeline into one scrollable page. Remove typeface picker (sans/serif/mono), keep theme toggle. Nav simplified to name + toggle. Hero gains anchor links for in-page navigation (#projects, #journey, #homelab). Old pages become meta-refresh redirects. Timeline redesigned as two-column grid layout — date left, content right — cutting vertical space ~50%. Focus states added for keyboard nav. Tags dropped from timeline entries.
36 lines
1.1 KiB
Plaintext
36 lines
1.1 KiB
Plaintext
<header class="sticky top-0 z-50 bg-[var(--color-bg)] border-b border-[var(--color-border)]">
|
|
<nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
|
|
<a href="/" class="font-semibold">Tyler Koenig</a>
|
|
|
|
<button
|
|
data-theme-toggle
|
|
aria-label="Switch to light mode"
|
|
class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
|
|
>
|
|
light
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<script>
|
|
const themeBtn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
|
|
|
|
function updateTheme() {
|
|
const isDark = document.documentElement.classList.contains("dark");
|
|
themeBtn.textContent = isDark ? "light" : "dark";
|
|
themeBtn.setAttribute(
|
|
"aria-label",
|
|
isDark ? "Switch to light mode" : "Switch to dark mode",
|
|
);
|
|
}
|
|
|
|
themeBtn.addEventListener("click", () => {
|
|
const next = !document.documentElement.classList.contains("dark");
|
|
document.documentElement.classList.toggle("dark", next);
|
|
localStorage.setItem("lerko96-dark-mode", String(next));
|
|
updateTheme();
|
|
});
|
|
|
|
updateTheme();
|
|
</script>
|