From 10acafcc9b112ec12860227acea412227c6bd676 Mon Sep 17 00:00:00 2001
From: Martin Prokoph <motschen@midnightdust.eu>
Date: Wed, 1 Jan 2025 14:35:52 +0100
Subject: [PATCH] Smoother dark mode switch

---
 src/components/FancyDarkMode.astro | 2 +-
 src/components/Header.astro        | 1 +
 src/components/Navigation.astro    | 5 +++--
 src/layouts/DefaultLayout.astro    | 2 ++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/FancyDarkMode.astro b/src/components/FancyDarkMode.astro
index ca9a68e..98686c8 100644
--- a/src/components/FancyDarkMode.astro
+++ b/src/components/FancyDarkMode.astro
@@ -2,7 +2,7 @@
 import { Icon } from 'astro-icon/components'
 ---
 <fancy-dark-mode>
-  <button class="darkmode-toggle mr-4 xl:mr-0" aria-expanded="false" aria-label="Toggle dark mode">
+  <button class="darkmode-toggle ml-1.5" aria-expanded="false" aria-label="Toggle dark mode">
     <div id="animation-icon" class="hidden"/>
     <Icon is:inline={true} id="light" class="hidden" name="line-md:sunny" width="32" height="32"/>
     <Icon is:inline={true} id="dark" class="hidden" name="line-md:moon" width="32" height="32" />
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 89db922..2be00f7 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -62,6 +62,7 @@ import { Icon } from 'astro-icon/components'
 
   header {
     background-color: rgb(255, 255, 255, 0.75);
+    transition: background-color 0.25s ease-in-out;
 
     .type-icon a {
       display: block;
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index c0cfed1..376875c 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -23,7 +23,9 @@ import FancyDarkMode from './FancyDarkMode.astro'
       <div class="pt-1.5">
         <FancyDarkMode />
       </div>
-      <ResponsiveToggle />
+      <div class="h-8 w-8 pt-[0.2rem]">
+        <ResponsiveToggle />
+      </div>
     </div>
     <nav class="mobile-menu" aria-label="Main navigation mobile">
       <ul class="menu">
@@ -324,7 +326,6 @@ import FancyDarkMode from './FancyDarkMode.astro'
       button {
         display: block;
         width: 100%;
-        padding: 0.5rem 0;
       }
     }
 
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
index 9edeb02..a5683be 100644
--- a/src/layouts/DefaultLayout.astro
+++ b/src/layouts/DefaultLayout.astro
@@ -80,6 +80,8 @@ const {
         color: var(--font-color);
         background-color: var(--background);
 
+        transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
+
         main {
           flex: 1 0 auto;
         }