From 75b16d5bce7d737472f324faf1bf98b2352f5ce6 Mon Sep 17 00:00:00 2001
From: moris <xinshisheng126@gmail.com>
Date: Mon, 16 Dec 2024 11:36:01 +0900
Subject: [PATCH] =?UTF-8?q?grid-color=E3=82=92transition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.css                                        | 4 ++++
 src/routes/(DefaultStyle)/+layout.svelte           | 2 +-
 src/routes/(DefaultStyle)/[slug]/grid.svelte       | 1 +
 src/routes/(DefaultStyle)/footer.svelte            | 1 +
 src/routes/(DefaultStyle)/post/[slug]/+page.svelte | 1 +
 5 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index f1ce365..62a846b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -6,6 +6,10 @@
     syntax: "<color>";
     inherits: true;
 }
+@property --grid-color {
+    syntax: "<color>";
+    inherits: true;
+}
 
 /* theme color */
 body, body.light {
diff --git a/src/routes/(DefaultStyle)/+layout.svelte b/src/routes/(DefaultStyle)/+layout.svelte
index d36c022..05cb100 100644
--- a/src/routes/(DefaultStyle)/+layout.svelte
+++ b/src/routes/(DefaultStyle)/+layout.svelte
@@ -77,7 +77,7 @@
         & header {
             background-color: var(--theme-color);
             height: 100%;
-            transition: height .4s, transform .4s background-color 1s;
+            transition: height .4s, transform .4s, background-color 1s;
             &.hide {
                 height: 40px;
                 @media(width<1000px) {
diff --git a/src/routes/(DefaultStyle)/[slug]/grid.svelte b/src/routes/(DefaultStyle)/[slug]/grid.svelte
index e9a0012..fe63ce5 100644
--- a/src/routes/(DefaultStyle)/[slug]/grid.svelte
+++ b/src/routes/(DefaultStyle)/[slug]/grid.svelte
@@ -34,6 +34,7 @@
         flex-direction: column;
         position: relative;
         background-color: var(--grid-color);
+        transition: background-color 1s;
         &:hover {
             img {
                 transform: scale(1.03);
diff --git a/src/routes/(DefaultStyle)/footer.svelte b/src/routes/(DefaultStyle)/footer.svelte
index 43237be..e7ac347 100644
--- a/src/routes/(DefaultStyle)/footer.svelte
+++ b/src/routes/(DefaultStyle)/footer.svelte
@@ -33,6 +33,7 @@
         font-family: "Source Code Pro", "Monaco", "Consolas", monospace;
         height: fit-content;
         background-color: var(--theme-color);
+        transition: background-color 1s;
         color: white;
 
         & a {
diff --git a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte b/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
index 056ea34..f355f58 100644
--- a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
+++ b/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
@@ -120,6 +120,7 @@
 		}
 		& #side>* {
 			background-color: var(--grid-color);
+			transition: background-color 1s;
 			border-radius: 8px;
 			box-shadow: 0 0 6px #1111;
 			overflow: hidden;