From 0985ae85f91d733d98c91cad017d2e36e5498ff0 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Sun, 7 Aug 2022 20:25:25 -0400
Subject: [PATCH] fix: properly transition box shadow

---
 components/Navbar.vue | 11 ++++++++---
 layouts/default.vue   |  7 ++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/Navbar.vue b/components/Navbar.vue
index 0966726..98e34b6 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -22,15 +22,19 @@ import { navItems } from "@/data/navItems";
 
 <style scoped>
 nav {
+  --nav-drop-color: lightgray;
   height: 4rem;
   width: 100%;
-  box-shadow: 0 0.25rem 0.5rem 0 lightgray;
-  background: white;
+  box-shadow: 0 0.25rem 0.5rem 0 var(--nav-drop-color);
   padding: 1rem;
   /* main stuff is z-index 1 and the hamburger must be above everything else */
   z-index: 2;
 }
 
+html.dark nav {
+  --nav-drop-color: black;
+}
+
 ul {
   display: flex;
   align-items: center;
@@ -52,8 +56,9 @@ li.home-text {
 
 * {
   --trans: 0.2s ease;
+  --box-trans-time: 0.4s;
   transition: opacity var(--trans), transform var(--trans), gap var(--trans),
-    width var(--trans);
+    width var(--trans), box-shadow var(--box-trans-time) ease;
 }
 
 @media screen and (max-width: 510px) {
diff --git a/layouts/default.vue b/layouts/default.vue
index dc9f2a6..11ed4ac 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -64,7 +64,12 @@ main {
 }
 
 footer {
+  --footer-drop-color: lightgray;
   transition: background 0.2s ease;
-  box-shadow: 0 -0.05rem 0.75rem 0 lightgray;
+  box-shadow: 0 -0.05rem 0.75rem 0 var(--footer-drop-color);
+}
+
+html.dark footer {
+  --footer-drop-color: black;
 }
 </style>