From eaa55ad8e1d9dc4ef19d26960dcae13cb95abeb1 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <gpg@kogakure.8shield.net>
Date: Thu, 29 Jan 2026 14:06:24 +0100
Subject: [PATCH] feat: align header items more harmonical and add new hover
 styles for navigation items

---
 src/components/MainNavigation.astro |  2 +-
 src/components/PageHeader.astro     | 10 +++-------
 src/styles/global.css               |  2 +-
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/MainNavigation.astro b/src/components/MainNavigation.astro
index e160092..4845150 100644
--- a/src/components/MainNavigation.astro
+++ b/src/components/MainNavigation.astro
@@ -11,7 +11,7 @@ import navigation from '../data/navigation.json';
 				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"
+							class="rounded-2 pli-3 pbe-2 pbs-3 hover:bg-shibui-950/10 focus:bg-shibui-950/10 hover:dark:bg-shibui-50/10 focus:dark:bg-shibui-50/10"
 							data-umami-event={title}
 							href={url}
 						>
diff --git a/src/components/PageHeader.astro b/src/components/PageHeader.astro
index 5e4eaa5..cd59f6a 100644
--- a/src/components/PageHeader.astro
+++ b/src/components/PageHeader.astro
@@ -15,19 +15,15 @@ const { class: className, navigation = true } = Astro.props;
 
 <header
 	class:list={[
-		'sticky z-50 grid w-full grid-cols-18 grid-rows-[clamp(3rem,_5.55vw,_9rem)] bg-shibui-100 mbe-layout block-start-0 dark:bg-shibui-900 print:hidden',
+		'sticky z-50 grid w-full grid-cols-[0.25fr,0.25fr,0.5fr,8fr,8fr,0.5fr,0.25fr,0.25fr] grid-rows-[clamp(3rem,_5.55vw,_9rem)] bg-shibui-100 mbe-layout block-start-0 dark:bg-shibui-900 print:hidden',
 		className,
 	]}
 	role="banner"
 >
-	<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"
-	>
+	<div class="navigation col-start-4 col-end-5 flex items-center justify-start md:col-start-2">
 		<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"
-	>
+	<div class="col-start-5 col-end-6 flex items-center justify-end mie-[-10px] md:col-end-8">
 		{navigation && <MainNavigation />}
 		<SearchLink />
 		<ThemeToggle />
diff --git a/src/styles/global.css b/src/styles/global.css
index 5fb3e3a..fb0ae6e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -167,7 +167,7 @@
 
 	/** Images */
 	img.image-border {
-		@apply block h-auto w-full rounded-1 border border-solid border-black/5 bg-black/5 shadow-img dark:border-white/5 dark:bg-white/5 dark:opacity-[0.87];
+		@apply block h-auto w-full rounded-1 border border-solid border-black/5 bg-black/5 shadow-img dark:border-white/5 dark:bg-white/5;
 	}
 
 	img.image-no-border {