feat(blog): refine background and card styling

Author: SoonIter

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

src/blog-list/MeteorsBackground.tsx src/blog-background/MeteorsBackground.tsxsrc/blog-list/MeteorsBackground.tsx renamed to src/blog-background/MeteorsBackground.tsx

@@ -292,6 +292,8 @@ export function MeteorsBackground({
         width: '100%',
         height: '65vh',
         zIndex: -1,
+        filter: 'blur(.5px)',
+        opacity: 0.8,
       }}
     />
   );

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;
 }

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 = {

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;
   }
 }