From 7ca011742cc34022415a795a64c2e6b5c23cb40b Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <gpg@kogakure.8shield.net>
Date: Wed, 28 Jan 2026 15:22:24 +0100
Subject: [PATCH] feat: add new logo, new theme switcher and realign navigation
 items

---
 src/components/Logo.astro           | 11 +++++++
 src/components/MainNavigation.astro | 42 +++++++++++--------------
 src/components/PageHeader.astro     | 17 ++++++++--
 src/components/SearchLink.astro     |  2 +-
 src/components/ThemeProvider.astro  |  1 +
 src/components/ThemeToggle.astro    | 49 +++++++++++++----------------
 src/components/icons/Circle.tsx     | 16 ----------
 src/components/icons/Copyright.tsx  |  7 +++++
 src/components/icons/Hanko.tsx      |  3 ++
 src/components/icons/Logo.tsx       | 16 ----------
 src/components/icons/Menu.tsx       |  7 +++++
 src/components/icons/Moon.tsx       |  7 +++++
 src/components/icons/Sun.tsx        |  7 +++++
 src/components/icons/index.ts       |  7 +++--
 src/data/navigation.json            |  4 ---
 src/icons/circle.svg                |  1 -
 src/icons/copyright.svg             |  1 +
 src/icons/{logo.svg => hanko.svg}   |  0
 src/icons/menu.svg                  |  1 +
 src/icons/moon.svg                  |  1 +
 src/icons/sun.svg                   |  1 +
 src/styles/global.css               |  4 +++
 22 files changed, 112 insertions(+), 93 deletions(-)
 create mode 100644 src/components/Logo.astro
 delete mode 100644 src/components/icons/Circle.tsx
 create mode 100644 src/components/icons/Copyright.tsx
 create mode 100644 src/components/icons/Hanko.tsx
 delete mode 100644 src/components/icons/Logo.tsx
 create mode 100644 src/components/icons/Menu.tsx
 create mode 100644 src/components/icons/Moon.tsx
 create mode 100644 src/components/icons/Sun.tsx
 delete mode 100644 src/icons/circle.svg
 create mode 100755 src/icons/copyright.svg
 rename src/icons/{logo.svg => hanko.svg} (100%)
 create mode 100755 src/icons/menu.svg
 create mode 100755 src/icons/moon.svg
 create mode 100755 src/icons/sun.svg

diff --git a/src/components/Logo.astro b/src/components/Logo.astro
new file mode 100644
index 0000000..df31b7d
--- /dev/null
+++ b/src/components/Logo.astro
@@ -0,0 +1,11 @@
+---
+import { Hanko } from './icons';
+import Link from './Link.astro';
+---
+
+<Link aria-label="To Homepage" class="group inline-flex cursor-pointer border-0 text-[0]" href="/">
+	<Hanko
+		aria-hidden="true"
+		className="icon h-[clamp(40px,_3vw,_55px)] w-[clamp(40px,_3vw,_55px)] transition-all duration-500 ease-in-out group-hover:scale-125 group-hover:fill-accent group-hover:drop-shadow-[0_0_0.5rem_#921705] group-focus:scale-125 group-focus:fill-accent group-focus:drop-shadow-[0_0_0.5rem_#921705] group-active:scale-100"
+	/>
+</Link>
diff --git a/src/components/MainNavigation.astro b/src/components/MainNavigation.astro
index 7c293e5..e160092 100644
--- a/src/components/MainNavigation.astro
+++ b/src/components/MainNavigation.astro
@@ -2,28 +2,24 @@
 import Link from './Link.astro';
 
 import navigation from '../data/navigation.json';
-import SearchLink from './SearchLink.astro';
 ---
 
-<nav
-	class="navigation col-span-12 col-start-4 flex items-center self-center md:col-span-14 md:col-start-3"
-	role="navigation"
-	aria-label="Main"
->
-	<ul class="flex flex-wrap">
-		{
-			navigation.map(({ title, url }) => (
-				<li class="mie-[10px] xs:mie-[15px]">
-					<Link
-						class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20"
-						data-umami-event={title}
-						href={url}
-					>
-						{title}
-					</Link>
-				</li>
-			))
-		}
-	</ul>
-	<SearchLink />
-</nav>
+<ul class="flex">
+	<nav class="navigation hidden md:flex" role="navigation" aria-label="Main">
+		<ul class="flex flex-wrap">
+			{
+				navigation.map(({ title, url }) => (
+					<li class="mie-[10px] xs:mie-[15px]">
+						<Link
+							class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20"
+							data-umami-event={title}
+							href={url}
+						>
+							{title}
+						</Link>
+					</li>
+				))
+			}
+		</ul>
+	</nav>
+</ul>
diff --git a/src/components/PageHeader.astro b/src/components/PageHeader.astro
index 70608ef..5e4eaa5 100644
--- a/src/components/PageHeader.astro
+++ b/src/components/PageHeader.astro
@@ -1,6 +1,9 @@
 ---
 import MainNavigation from '../components/MainNavigation.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
+import Logo from '../components/Logo.astro';
+
+import SearchLink from './SearchLink.astro';
 
 export interface Props {
 	class?: string;
@@ -17,6 +20,16 @@ const { class: className, navigation = true } = Astro.props;
 	]}
 	role="banner"
 >
-	{navigation && <MainNavigation />}
-	<ThemeToggle />
+	<div
+		class="navigation col-span-5 col-start-2 flex items-center justify-start md:col-span-2 md:col-start-1 md:mis-5 lg:col-span-1 lg:m-0 lg:justify-center"
+	>
+		<Logo />
+	</div>
+	<div
+		class="col-start-7 col-end-18 flex items-center justify-end md:col-start-3 md:col-end-19 md:mie-5"
+	>
+		{navigation && <MainNavigation />}
+		<SearchLink />
+		<ThemeToggle />
+	</div>
 </header>
diff --git a/src/components/SearchLink.astro b/src/components/SearchLink.astro
index fd32236..73fa268 100644
--- a/src/components/SearchLink.astro
+++ b/src/components/SearchLink.astro
@@ -5,7 +5,7 @@ import Link from './Link.astro';
 
 <Link
 	aria-label="Search the website (/)"
-	class="col-span-2 col-start-1 h-clickarea w-clickarea scale-75 items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:scale-90 focus:scale-90 md:col-span-1 print:hidden"
+	class="h-clickarea w-clickarea scale-75 transition-transform duration-500 ease-in-out hover:scale-90 focus:scale-90 md:col-span-1 print:hidden"
 	href="#search"
 	id="search-link"
 	title="Search the website (/)"
diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro
index fcd528f..8a7247d 100644
--- a/src/components/ThemeProvider.astro
+++ b/src/components/ThemeProvider.astro
@@ -19,6 +19,7 @@
 				const isDark = document.documentElement.classList.contains('dark');
 				localStorage.setItem('theme', isDark ? 'dark' : 'light');
 			});
+
 			observer.observe(document.documentElement, {
 				attributes: true,
 				attributeFilter: ['class'],
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index b09256e..e2c2cba 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -1,44 +1,47 @@
 ---
-import { Circle } from './icons';
+import { Moon, Sun } from './icons';
 ---
 
-<theme-toggle
-	class="col-span-2 col-start-17 flex h-clickarea w-clickarea items-center justify-center self-center justify-self-center md:col-span-1 md:col-start-18 print:hidden"
->
+<theme-toggle class="flex h-clickarea w-clickarea print:hidden">
 	<button
 		aria-label="Switch color theme"
 		class="group flex h-clickarea w-clickarea cursor-pointer items-center justify-center self-center border-0 text-[0]"
 		data-umami-event="Switch color theme"
 	>
-		<Circle
-			aria-hidden="true"
-			className="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:scale-125 group-focus:scale-125"
-		/>
+		<div class="h-icon-small w-icon-small">
+			<Sun
+				id="theme-sun"
+				aria-hidden="true"
+				className="icon h-icon-small w-icon-small transition-transform duration-500 ease-in-out group-hover:scale-125 group-focus:scale-125 dark:hidden"
+			/>
+			<Moon
+				id="theme-moon"
+				aria-hidden="true"
+				className="icon hidden h-icon-small w-icon-small transition-transform duration-500 ease-in-out group-hover:scale-125 group-focus:scale-125 dark:block"
+			/>
+		</div>
 	</button>
 </theme-toggle>
 
 <script>
 	function initializeThemeToggle() {
-		// Remove no-js class after transitions
-		document.documentElement.classList.remove('no-js');
-
-		// Only define the custom element if it hasn't been defined yet
 		if (!customElements.get('theme-toggle')) {
 			class ThemeToggle extends HTMLElement {
 				constructor() {
 					super();
 					const button = this.querySelector('button')!;
-					const setTheme = (dark: boolean) => {
-						document.documentElement.classList[dark ? 'add' : 'remove']('dark');
-						button.setAttribute('aria-pressed', String(dark));
-					};
 
 					button.addEventListener('click', () => {
-						setTheme(!this.isDark());
+						const newDark = !this.isDark();
+						document.documentElement.classList[newDark ? 'add' : 'remove']('dark');
+						button.setAttribute('aria-pressed', String(newDark));
+						if (typeof localStorage !== 'undefined') {
+							localStorage.setItem('theme', newDark ? 'dark' : 'light');
+						}
 						button.blur();
 					});
 
-					setTheme(this.isDark());
+					button.setAttribute('aria-pressed', String(this.isDark()));
 				}
 
 				isDark() {
@@ -50,16 +53,6 @@ import { Circle } from './icons';
 		}
 	}
 
-	// Run on initial load
 	initializeThemeToggle();
-
-	// Re-run on view transitions
 	document.addEventListener('astro:after-swap', initializeThemeToggle);
 </script>
-
-<style>
-	/* Turn off toggle if JavaScript is disabled */
-	:global(.no-js) theme-toggle {
-		display: none;
-	}
-</style>
diff --git a/src/components/icons/Circle.tsx b/src/components/icons/Circle.tsx
deleted file mode 100644
index 2c68a98..0000000
--- a/src/components/icons/Circle.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { SVGProps } from 'react';
-const Circle = (props: SVGProps<SVGSVGElement>) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		fill="currentColor"
-		fillRule="evenodd"
-		strokeLinejoin="round"
-		strokeMiterlimit={2}
-		clipRule="evenodd"
-		viewBox="0 0 24 24"
-		{...props}
-	>
-		<circle cx={12} cy={12} r={5} />
-	</svg>
-);
-export default Circle;
diff --git a/src/components/icons/Copyright.tsx b/src/components/icons/Copyright.tsx
new file mode 100644
index 0000000..4b557db
--- /dev/null
+++ b/src/components/icons/Copyright.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+const Copyright = (props: SVGProps<SVGSVGElement>) => (
+	<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" {...props}>
+		<path d="M16.288 9.428A4.999 4.999 0 0 0 7 12a4.999 4.999 0 0 0 9.288 2.572l-1.715-1.028A3 3 0 1 1 12 9c1.093 0 2.05.584 2.573 1.457zM22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10M4 12c0-4.42 3.58-8 8-8s8 3.58 8 8-3.58 8-8 8-8-3.58-8-8" />
+	</svg>
+);
+export default Copyright;
diff --git a/src/components/icons/Hanko.tsx b/src/components/icons/Hanko.tsx
new file mode 100644
index 0000000..c145807
--- /dev/null
+++ b/src/components/icons/Hanko.tsx
@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+const Hanko = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit={2} clipRule="evenodd" viewBox="0 0 24 24" {...props}><path fill="none" d="M0 0h24v24H0z" /><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12S0 18.623 0 12 5.377 0 12 0m.945 23.127a11 11 0 0 0 2.005-.355c-.259-.935-.513-2.338-.578-3.826-.587.519-1.396.677-2.255.705a7.6 7.6 0 0 1-.898 1.744q.15.191.326.39c.51.573.986.988 1.224 1.195.042.037.109.092.176.147m1.94-18.383c-.105-1.446.007-2.792.15-3.493l-.194-.052c-.314.605-.832 1.12-1.474 1.56.234.562.762 1.203 1.224 1.696.092.098.194.197.293.289m3.85-1.65a11.2 11.2 0 0 0-2.516-1.435c-.196 1.032-.286 3.548.371 5.469.385 1.126 1.038 2.059 2.189 2.185l-.056-6.161q0-.03.011-.058m-2.598 19.28a11.2 11.2 0 0 0 2.746-1.583l-.071-7.857c-1.559.13-2.404 1.136-2.825 2.443-.731 2.268-.294 5.368.15 6.997m3.99-2.718a11.2 11.2 0 0 0 2.265-3.563c-.02-.148-.047-.333-.061-.425-.085-.54-.193-1.414-.862-2.033-.323-.298-.775-.527-1.405-.639zM21.92 6.871a11.2 11.2 0 0 0-1.938-2.677l.048 5.08c.524-.07.922-.229 1.213-.487.396-.352.605-.864.673-1.512.033-.255.004-.404.004-.404M9.607 13.399c-.031.665-.225 1.533-1.283 2.279-.49.346-.957.535-.896 1.29.047.58.19.947.444 1.16.257.216.59.278.94.29-.031-.997.088-1.895.114-2.087a.625.625 0 0 1 1.24.166c-.026.187-.152 1.12-.095 2.103.034.593.127 1.21.383 1.657l.002.003c.817-1.415.843-2.63.743-3.8a.625.625 0 0 1 1.246-.107c.056.662.077 1.336-.022 2.043.655-.044 1.235-.234 1.474-.974.352-1.087-.712-1.647-.821-1.713-.509-.307-.835-.58-1.07-.9-.261-.357-.41-.78-.534-1.425-.362.021-.926.03-1.865.015m3.075-.318c.073.441.151.741.333.989.152.207.376.37.706.568.095.057.556.333.943.82a7 7 0 0 1 .207-.681c-.427-.644-.941-1.494-1.469-2.243a2.6 2.6 0 0 1-.72.547m10.36.599a11.2 11.2 0 0 0-.32-4.81q-.247.494-.649.852c-.474.42-1.13.708-2.032.807l.011 1.2c1.047.143 1.762.523 2.265.988.317.293.55.624.724.963m-8.945-2.316c.483.644.983 1.433 1.42 2.114.695-1.021 1.747-1.709 3.283-1.799l-.01-1.108c-1.756-.104-2.813-1.374-3.382-3.038a9 9 0 0 1-.302-1.125l-.167-.073c-.198-.066-.722-.451-1.26-1.025-.517-.552-1.061-1.27-1.384-1.933-.513.252-1.062.475-1.608.68l.022.073c.082.277.196.61.375.828.264.321.718.611 1.147.782a.625.625 0 0 1-.462 1.162c-.622-.248-1.267-.684-1.65-1.15-.279-.339-.477-.854-.605-1.275a46 46 0 0 0-1.036.373 1.7 1.7 0 0 0-.51.301c-.212.186-.124.472-.02.737.163.412.466.803.71 1 .15.12.23.296.233.476.968-.073 1.967-.12 2.815-.008.935.123 1.7.448 2.158 1.028.462.584.663 1.457.301 2.761a3 3 0 0 1-.068.219c.002.003.005.007 0 0m0 0c-.003-.003-.005-.007 0 0m-7.264-6.79q.122-.195.312-.364c.26-.227.567-.406.89-.529 1.187-.45 2.797-.913 4.075-1.616.577-.317 1.088-.678 1.424-1.127A11 11 0 0 0 12 .833C5.837.833.834 5.837.834 12c0 2.029.542 3.932 1.49 5.573.528-6.468.582-10.617.71-11.081a3.7 3.7 0 0 1 .459-1.025c.235-.35.567-.661.991-.804.312-.105.337-.085 2.35-.089m-3.4 14.585a11.15 11.15 0 0 0 7.663 3.971 10.5 10.5 0 0 1-1.727-2.253c-.2-.347-.336-.77-.425-1.218-.693-.02-1.37-.148-1.876-.574-.45-.378-.803-.989-.886-2.017-.05-.616.061-1.044.28-1.387h-.667c.03.227.048.471.037.693-.021.406-.151.75-.356.96-.41.418-.971.556-1.546.522a3 3 0 0 1-.372-.044l-.072.86c-.009.098-.04.364-.053.487M7.2 14.946q.191-.141.403-.29c.578-.407.727-.883.759-1.284l-.712-.02a.625.625 0 0 1 .038-1.25c3.605.11 3.85.06 4.178-.035a1.44 1.44 0 0 0 .757-.533c-.195-.215-.385-.385-.57-.48-.296-.151-.786-.21-1.347-.252-.984-.072-2.16-.045-3.065-.067a.625.625 0 0 1 .03-1.25c.922.022 2.122-.003 3.126.07.764.056 1.424.18 1.826.387q.221.114.457.312c.068-.482.006-.837-.198-1.095-.279-.352-.771-.488-1.34-.563-.963-.127-2.135-.023-3.206.066a.625.625 0 0 1-.6-.922l-.065-.061H6.12c.02.145.034.297.04.444.01.305-.027.594-.113.813-.154.395-.482.645-.854.775a2.8 2.8 0 0 1-.937.128 4 4 0 0 1-.196-.011l-.033.7h2.637a.625.625 0 0 1 0 1.25h-.79c.03.227.048.472.037.694-.021.405-.151.75-.356.959-.41.419-.971.556-1.546.523a3 3 0 0 1-.17-.015l-.032.492h2.778c.308 0 .563.223.616.515M6.82 6.43a3 3 0 0 1-.187-.605c-.72-.002-1.13-.009-1.387-.009-.212 0-.264-.001-.364.033-.158.053-.265.186-.353.316a2 2 0 0 0-.147.265zM4.16 7.68q-.02.376-.044.897c.054.007.112.011.185.014.037.001.208.009.389-.033a1 1 0 0 0 .124-.04c.024-.01.058-.01.068-.037.05-.127.032-.311.015-.49a4 4 0 0 0-.041-.311zm-.44 8.002-.064.88.117.021c.272.045.576.085.782-.097.007-.048.033-.235.028-.354a4 4 0 0 0-.05-.45zm.243-3.902-.05.91c.255.04.53.062.72-.107.008-.048.034-.234.029-.354a4 4 0 0 0-.05-.45z" /></svg>;
+export default Hanko;
\ No newline at end of file
diff --git a/src/components/icons/Logo.tsx b/src/components/icons/Logo.tsx
deleted file mode 100644
index a3f1ecd..0000000
--- a/src/components/icons/Logo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { SVGProps } from 'react';
-const Logo = (props: SVGProps<SVGSVGElement>) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		fillRule="evenodd"
-		strokeLinejoin="round"
-		strokeMiterlimit={2}
-		clipRule="evenodd"
-		viewBox="0 0 24 24"
-		{...props}
-	>
-		<path fill="none" d="M0 0h24v24H0z" />
-		<path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12S0 18.623 0 12 5.377 0 12 0m.945 23.127a11 11 0 0 0 2.005-.355c-.259-.935-.513-2.338-.578-3.826-.587.519-1.396.677-2.255.705a7.6 7.6 0 0 1-.898 1.744q.15.191.326.39c.51.573.986.988 1.224 1.195.042.037.109.092.176.147m1.94-18.383c-.105-1.446.007-2.792.15-3.493l-.194-.052c-.314.605-.832 1.12-1.474 1.56.234.562.762 1.203 1.224 1.696.092.098.194.197.293.289m3.85-1.65a11.2 11.2 0 0 0-2.516-1.435c-.196 1.032-.286 3.548.371 5.469.385 1.126 1.038 2.059 2.189 2.185l-.056-6.161q0-.03.011-.058m-2.598 19.28a11.2 11.2 0 0 0 2.746-1.583l-.071-7.857c-1.559.13-2.404 1.136-2.825 2.443-.731 2.268-.294 5.368.15 6.997m3.99-2.718a11.2 11.2 0 0 0 2.265-3.563c-.02-.148-.047-.333-.061-.425-.085-.54-.193-1.414-.862-2.033-.323-.298-.775-.527-1.405-.639zM21.92 6.871a11.2 11.2 0 0 0-1.938-2.677l.048 5.08c.524-.07.922-.229 1.213-.487.396-.352.605-.864.673-1.512.033-.255.004-.404.004-.404M9.607 13.399c-.031.665-.225 1.533-1.283 2.279-.49.346-.957.535-.896 1.29.047.58.19.947.444 1.16.257.216.59.278.94.29-.031-.997.088-1.895.114-2.087a.625.625 0 0 1 1.24.166c-.026.187-.152 1.12-.095 2.103.034.593.127 1.21.383 1.657l.002.003c.817-1.415.843-2.63.743-3.8a.625.625 0 0 1 1.246-.107c.056.662.077 1.336-.022 2.043.655-.044 1.235-.234 1.474-.974.352-1.087-.712-1.647-.821-1.713-.509-.307-.835-.58-1.07-.9-.261-.357-.41-.78-.534-1.425-.362.021-.926.03-1.865.015m3.075-.318c.073.441.151.741.333.989.152.207.376.37.706.568.095.057.556.333.943.82a7 7 0 0 1 .207-.681c-.427-.644-.941-1.494-1.469-2.243a2.6 2.6 0 0 1-.72.547m10.36.599a11.2 11.2 0 0 0-.32-4.81q-.247.494-.649.852c-.474.42-1.13.708-2.032.807l.011 1.2c1.047.143 1.762.523 2.265.988.317.293.55.624.724.963m-8.945-2.316c.483.644.983 1.433 1.42 2.114.695-1.021 1.747-1.709 3.283-1.799l-.01-1.108c-1.756-.104-2.813-1.374-3.382-3.038a9 9 0 0 1-.302-1.125l-.167-.073c-.198-.066-.722-.451-1.26-1.025-.517-.552-1.061-1.27-1.384-1.933-.513.252-1.062.475-1.608.68l.022.073c.082.277.196.61.375.828.264.321.718.611 1.147.782a.625.625 0 0 1-.462 1.162c-.622-.248-1.267-.684-1.65-1.15-.279-.339-.477-.854-.605-1.275a46 46 0 0 0-1.036.373 1.7 1.7 0 0 0-.51.301c-.212.186-.124.472-.02.737.163.412.466.803.71 1 .15.12.23.296.233.476.968-.073 1.967-.12 2.815-.008.935.123 1.7.448 2.158 1.028.462.584.663 1.457.301 2.761a3 3 0 0 1-.068.219c.002.003.005.007 0 0m0 0c-.003-.003-.005-.007 0 0m-7.264-6.79q.122-.195.312-.364c.26-.227.567-.406.89-.529 1.187-.45 2.797-.913 4.075-1.616.577-.317 1.088-.678 1.424-1.127A11 11 0 0 0 12 .833C5.837.833.834 5.837.834 12c0 2.029.542 3.932 1.49 5.573.528-6.468.582-10.617.71-11.081a3.7 3.7 0 0 1 .459-1.025c.235-.35.567-.661.991-.804.312-.105.337-.085 2.35-.089m-3.4 14.585a11.15 11.15 0 0 0 7.663 3.971 10.5 10.5 0 0 1-1.727-2.253c-.2-.347-.336-.77-.425-1.218-.693-.02-1.37-.148-1.876-.574-.45-.378-.803-.989-.886-2.017-.05-.616.061-1.044.28-1.387h-.667c.03.227.048.471.037.693-.021.406-.151.75-.356.96-.41.418-.971.556-1.546.522a3 3 0 0 1-.372-.044l-.072.86c-.009.098-.04.364-.053.487M7.2 14.946q.191-.141.403-.29c.578-.407.727-.883.759-1.284l-.712-.02a.625.625 0 0 1 .038-1.25c3.605.11 3.85.06 4.178-.035a1.44 1.44 0 0 0 .757-.533c-.195-.215-.385-.385-.57-.48-.296-.151-.786-.21-1.347-.252-.984-.072-2.16-.045-3.065-.067a.625.625 0 0 1 .03-1.25c.922.022 2.122-.003 3.126.07.764.056 1.424.18 1.826.387q.221.114.457.312c.068-.482.006-.837-.198-1.095-.279-.352-.771-.488-1.34-.563-.963-.127-2.135-.023-3.206.066a.625.625 0 0 1-.6-.922l-.065-.061H6.12c.02.145.034.297.04.444.01.305-.027.594-.113.813-.154.395-.482.645-.854.775a2.8 2.8 0 0 1-.937.128 4 4 0 0 1-.196-.011l-.033.7h2.637a.625.625 0 0 1 0 1.25h-.79c.03.227.048.472.037.694-.021.405-.151.75-.356.959-.41.419-.971.556-1.546.523a3 3 0 0 1-.17-.015l-.032.492h2.778c.308 0 .563.223.616.515M6.82 6.43a3 3 0 0 1-.187-.605c-.72-.002-1.13-.009-1.387-.009-.212 0-.264-.001-.364.033-.158.053-.265.186-.353.316a2 2 0 0 0-.147.265zM4.16 7.68q-.02.376-.044.897c.054.007.112.011.185.014.037.001.208.009.389-.033a1 1 0 0 0 .124-.04c.024-.01.058-.01.068-.037.05-.127.032-.311.015-.49a4 4 0 0 0-.041-.311zm-.44 8.002-.064.88.117.021c.272.045.576.085.782-.097.007-.048.033-.235.028-.354a4 4 0 0 0-.05-.45zm.243-3.902-.05.91c.255.04.53.062.72-.107.008-.048.034-.234.029-.354a4 4 0 0 0-.05-.45z" />
-	</svg>
-);
-export default Logo;
diff --git a/src/components/icons/Menu.tsx b/src/components/icons/Menu.tsx
new file mode 100644
index 0000000..68349f9
--- /dev/null
+++ b/src/components/icons/Menu.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+const Menu = (props: SVGProps<SVGSVGElement>) => (
+	<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" {...props}>
+		<path d="M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z" />
+	</svg>
+);
+export default Menu;
diff --git a/src/components/icons/Moon.tsx b/src/components/icons/Moon.tsx
new file mode 100644
index 0000000..4ed61cb
--- /dev/null
+++ b/src/components/icons/Moon.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+const Moon = (props: SVGProps<SVGSVGElement>) => (
+	<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" {...props}>
+		<path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.98 6.98 0 0 0 10 7m-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 8 8 0 0 0 4 12" />
+	</svg>
+);
+export default Moon;
diff --git a/src/components/icons/Sun.tsx b/src/components/icons/Sun.tsx
new file mode 100644
index 0000000..1778419
--- /dev/null
+++ b/src/components/icons/Sun.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+const Sun = (props: SVGProps<SVGSVGElement>) => (
+	<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" {...props}>
+		<path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12m0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z" />
+	</svg>
+);
+export default Sun;
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 7aab7ab..8302331 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -3,15 +3,18 @@ export { default as ArrowLeftS } from './ArrowLeftS.tsx';
 export { default as ArrowRight } from './ArrowRight.tsx';
 export { default as ArrowRightS } from './ArrowRightS.tsx';
 export { default as ArrowUp } from './ArrowUp.tsx';
-export { default as Circle } from './Circle.tsx';
 export { default as Close } from './Close.tsx';
+export { default as Copyright } from './Copyright.tsx';
 export { default as Download } from './Download.tsx';
 export { default as Github } from './Github.tsx';
+export { default as Hanko } from './Hanko.tsx';
 export { default as Instagram } from './Instagram.tsx';
-export { default as Logo } from './Logo.tsx';
 export { default as Mail } from './Mail.tsx';
 export { default as MailSend } from './MailSend.tsx';
+export { default as Menu } from './Menu.tsx';
+export { default as Moon } from './Moon.tsx';
 export { default as Rss } from './Rss.tsx';
 export { default as Search } from './Search.tsx';
+export { default as Sun } from './Sun.tsx';
 export { default as Twitter } from './Twitter.tsx';
 export { default as TwitterX } from './TwitterX.tsx';
diff --git a/src/data/navigation.json b/src/data/navigation.json
index 7c5c807..5aaa340 100644
--- a/src/data/navigation.json
+++ b/src/data/navigation.json
@@ -1,8 +1,4 @@
 [
-	{
-		"title": "Home",
-		"url": "/"
-	},
 	{
 		"title": "About",
 		"url": "/about/"
diff --git a/src/icons/circle.svg b/src/icons/circle.svg
deleted file mode 100644
index 8b7a384..0000000
--- a/src/icons/circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><circle cx="12" cy="12" r="5"/></svg>
diff --git a/src/icons/copyright.svg b/src/icons/copyright.svg
new file mode 100755
index 0000000..0c35d37
--- /dev/null
+++ b/src/icons/copyright.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.2877 9.42773C15.413 7.97351 13.8195 7 12 7 9.23999 7 7 9.23999 7 12 7 14.76 9.23999 17 12 17 13.8195 17 15.413 16.0265 16.2877 14.5723L14.5729 13.5442C14.0483 14.4166 13.0927 15 12 15 10.3425 15 9 13.6575 9 12 9 10.3425 10.3425 9 12 9 13.093 9 14.0491 9.58386 14.5735 10.4568L16.2877 9.42773ZM22 12C22 6.47998 17.52 2 12 2 6.47998 2 2 6.47998 2 12 2 17.52 6.47998 22 12 22 17.52 22 22 17.52 22 12ZM4 12C4 7.57996 7.57996 4 12 4 16.42 4 20 7.57996 20 12 20 16.42 16.42 20 12 20 7.57996 20 4 16.42 4 12Z"></path></svg>
\ No newline at end of file
diff --git a/src/icons/logo.svg b/src/icons/hanko.svg
similarity index 100%
rename from src/icons/logo.svg
rename to src/icons/hanko.svg
diff --git a/src/icons/menu.svg b/src/icons/menu.svg
new file mode 100755
index 0000000..8dc67ad
--- /dev/null
+++ b/src/icons/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path></svg>
\ No newline at end of file
diff --git a/src/icons/moon.svg b/src/icons/moon.svg
new file mode 100755
index 0000000..66af995
--- /dev/null
+++ b/src/icons/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"></path></svg>
\ No newline at end of file
diff --git a/src/icons/sun.svg b/src/icons/sun.svg
new file mode 100755
index 0000000..5dda2cc
--- /dev/null
+++ b/src/icons/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"></path></svg>
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index dd5cc95..5fb3e3a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -204,6 +204,10 @@
 		@apply underline !decoration-accent decoration-4;
 	}
 
+	.navigation .is-active svg {
+		@apply fill-accent;
+	}
+
 	.image-shadow {
 		@apply relative transition-transform duration-500 ease-in-out;