From 5008e813a9ebd3a6888f615270fe6d7d5b87b09e Mon Sep 17 00:00:00 2001
From: sunyiteng <sunyiteng@bytedance.com>
Date: Wed, 22 Apr 2026 12:36:39 +0800
Subject: [PATCH] feat(blog): refine background and card styling

---
 src/background-image/index.tsx                           | 2 +-
 src/{blog-list => blog-background}/MeteorsBackground.tsx | 2 ++
 src/blog-background/index.module.scss                    | 6 +-----
 src/blog-background/index.tsx                            | 2 +-
 src/blog-list/index.module.scss                          | 8 ++++----
 5 files changed, 9 insertions(+), 11 deletions(-)
 rename src/{blog-list => blog-background}/MeteorsBackground.tsx (99%)

diff --git a/src/background-image/index.tsx b/src/background-image/index.tsx
index c21a83b..af557eb 100644
--- a/src/background-image/index.tsx
+++ b/src/background-image/index.tsx
@@ -47,7 +47,7 @@ export const BackgroundImage: FC<BackgroundProps> = ({
     <>
       {/* For transparent navbar, overrides css only in homepage, and unmounted in other pages */}
       <style>
-        {'body:not(.notTopArrived) .rp-nav {background: transparent !important; border-bottom: none !important;}' +
+        {'body:not(.notTopArrived) .rp-nav {background: transparent !important; border-bottom: 1px solid transparent !important;}' +
           '.rp-nav {background: color-mix(in srgb,var(--rp-c-bg) 60%,transparent);backdrop-filter: blur(25px);-webkit-backdrop-filter: blur(25px);}'}
       </style>
       <img
diff --git a/src/blog-list/MeteorsBackground.tsx b/src/blog-background/MeteorsBackground.tsx
similarity index 99%
rename from src/blog-list/MeteorsBackground.tsx
rename to src/blog-background/MeteorsBackground.tsx
index 558056c..07bb84d 100644
--- a/src/blog-list/MeteorsBackground.tsx
+++ b/src/blog-background/MeteorsBackground.tsx
@@ -292,6 +292,8 @@ export function MeteorsBackground({
         width: '100%',
         height: '65vh',
         zIndex: -1,
+        filter: 'blur(.5px)',
+        opacity: 0.8,
       }}
     />
   );
diff --git a/src/blog-background/index.module.scss b/src/blog-background/index.module.scss
index 5a06c20..496694e 100644
--- a/src/blog-background/index.module.scss
+++ b/src/blog-background/index.module.scss
@@ -26,9 +26,5 @@
   inset: 0;
   background: var(--rs-blog-list-frame-bg);
   background-size: 1200px;
-  opacity: 0.45;
-}
-
-:global(.dark) .blogFrame {
-  opacity: 0.35;
+  opacity: 0.15;
 }
diff --git a/src/blog-background/index.tsx b/src/blog-background/index.tsx
index 7286530..0e915d6 100644
--- a/src/blog-background/index.tsx
+++ b/src/blog-background/index.tsx
@@ -1,4 +1,4 @@
-import { MeteorsBackground } from '../blog-list/MeteorsBackground';
+import { MeteorsBackground } from './MeteorsBackground';
 import styles from './index.module.scss';
 
 export type BlogBackgroundProps = {
diff --git a/src/blog-list/index.module.scss b/src/blog-list/index.module.scss
index 2798ce9..e4dd909 100644
--- a/src/blog-list/index.module.scss
+++ b/src/blog-list/index.module.scss
@@ -5,15 +5,15 @@
     --rs-blog-list-desc-color: var(--rp-c-text-2);
     --rs-blog-list-card-bg:
       radial-gradient(94.38% 84.84% at 0% 2.15%, #ffffff29 0%, #fff0 100%),
-      #ffffff80;
-    --rs-blog-list-card-border: 1px solid #11111314;
+      #ffffff9c;
+    --rs-blog-list-card-border: 1px solid #0e0e0f16;
   }
 
   html.dark {
     --rs-blog-list-title-color: var(--rp-c-text-0);
     --rs-blog-list-desc-color: var(--rp-c-text-2);
-    --rs-blog-list-card-bg: #ffffff08;
-    --rs-blog-list-card-border: 1px solid #ffffff0f;
+    --rs-blog-list-card-bg: #ffffff0d;
+    --rs-blog-list-card-border: 1px solid #ffffff12;
   }
 }