From 3d08d71a3967ec46d94404bdae3c0c458c6c9eb4 Mon Sep 17 00:00:00 2001
From: sunyiteng <sunyiteng@bytedance.com>
Date: Wed, 22 Apr 2026 13:26:16 +0800
Subject: [PATCH 1/2] feat(blog): tune background glow visuals

---
 src/blog-background/glow-dark.svg     | 14 ++++++++
 src/blog-background/glow-light.svg    | 14 ++++++++
 src/blog-background/index.module.scss | 18 ++++++++++
 src/blog-background/index.tsx         |  1 +
 src/blog-list/index.module.scss       | 47 ++++++++++++++-------------
 src/blog-list/index.tsx               |  2 ++
 6 files changed, 74 insertions(+), 22 deletions(-)
 create mode 100644 src/blog-background/glow-dark.svg
 create mode 100644 src/blog-background/glow-light.svg

diff --git a/src/blog-background/glow-dark.svg b/src/blog-background/glow-dark.svg
new file mode 100644
index 0000000..f961f9b
--- /dev/null
+++ b/src/blog-background/glow-dark.svg
@@ -0,0 +1,14 @@
+<svg width="959" height="677" viewBox="0 0 959 677" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="959" height="677" fill="url(#paint0_radial_2002_11167)" fill-opacity="0.15"/>
+<rect width="959" height="677" fill="url(#paint1_radial_2002_11167)" fill-opacity="0.15"/>
+<defs>
+<radialGradient id="paint0_radial_2002_11167" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(616.147 377.815) rotate(121.487) scale(261.625 237.327)">
+<stop stop-color="#ff8b00"/>
+<stop offset="1" stop-color="#ff8b00" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_2002_11167" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(479.5 289.093) rotate(93.4123) scale(346.066 262.102)">
+<stop stop-color="#f93920"/>
+<stop offset="1" stop-color="#f93920" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/blog-background/glow-light.svg b/src/blog-background/glow-light.svg
new file mode 100644
index 0000000..7100e55
--- /dev/null
+++ b/src/blog-background/glow-light.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="959" height="677" viewBox="0 0 959 677" fill="none">
+<rect width="959" height="677" fill="url(#paint0_radial_2002_13780)" fill-opacity="0.15"/>
+<rect width="959" height="677" fill="url(#paint1_radial_2002_13780)" fill-opacity="0.15"/>
+<defs>
+<radialGradient id="paint0_radial_2002_13780" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(616.147 377.815) rotate(121.487) scale(261.625 237.327)">
+<stop stop-color="#ff8b00"/>
+<stop offset="1" stop-color="#ff8b00" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_2002_13780" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(479.952 355.03) rotate(94.3068) scale(280.307 212.232)">
+<stop stop-color="#f93920"/>
+<stop offset="1" stop-color="#f93920" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/blog-background/index.module.scss b/src/blog-background/index.module.scss
index 496694e..2222dd2 100644
--- a/src/blog-background/index.module.scss
+++ b/src/blog-background/index.module.scss
@@ -4,6 +4,7 @@
       linear-gradient(180deg, rgba(15, 23, 42, 0.02), transparent 72%),
       linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px),
       linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px);
+    --rs-blog-glow-bg: url('./glow-light.svg');
   }
 
   html.dark {
@@ -11,6 +12,7 @@
       linear-gradient(180deg, rgba(148, 163, 184, 0.04), transparent 72%),
       linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
       linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px);
+    --rs-blog-glow-bg: url('./glow-dark.svg');
   }
 }
 
@@ -28,3 +30,19 @@
   background-size: 1200px;
   opacity: 0.15;
 }
+
+.glowBackground {
+  position: absolute;
+  inset: 0;
+  background: var(--rs-blog-glow-bg) no-repeat center 300px;
+  background-size: 1200px;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.6;
+}
+
+:global(html.dark) {
+  .glowBackground {
+    opacity: 0.2;
+  }
+}
diff --git a/src/blog-background/index.tsx b/src/blog-background/index.tsx
index 0e915d6..cd62b74 100644
--- a/src/blog-background/index.tsx
+++ b/src/blog-background/index.tsx
@@ -18,6 +18,7 @@ export function BlogBackground({
 
   return (
     <div className={styles.blogBackground}>
+      <div className={styles.glowBackground} />
       <div className={styles.blogFrame} />
       <MeteorsBackground
         gridSize={backgroundGridSize}
diff --git a/src/blog-list/index.module.scss b/src/blog-list/index.module.scss
index e4dd909..a7c5cc6 100644
--- a/src/blog-list/index.module.scss
+++ b/src/blog-list/index.module.scss
@@ -6,7 +6,8 @@
     --rs-blog-list-card-bg:
       radial-gradient(94.38% 84.84% at 0% 2.15%, #ffffff29 0%, #fff0 100%),
       #ffffff9c;
-    --rs-blog-list-card-border: 1px solid #0e0e0f16;
+    --rs-blog-list-card-border: 1px solid #0e0e0f25;
+    --rs-blog-list-card-shadow: 0 4px 24px #0e0e0f09;
   }
 
   html.dark {
@@ -14,6 +15,7 @@
     --rs-blog-list-desc-color: var(--rp-c-text-2);
     --rs-blog-list-card-bg: #ffffff0d;
     --rs-blog-list-card-border: 1px solid #ffffff12;
+    --rs-blog-list-card-shadow: 0 4px 24px #00000040;
   }
 }
 
@@ -45,12 +47,13 @@
   flex-direction: column;
   border-radius: 24px;
   background: var(--rs-blog-list-card-bg);
-  backdrop-filter: blur(1px);
+  backdrop-filter: blur(2px);
   border: var(--rs-blog-list-card-border) !important;
   overflow: hidden;
   text-decoration: none !important;
   color: var(--rp-c-text-1) !important;
   box-sizing: border-box;
+  box-shadow: var(--rs-blog-list-card-shadow);
 }
 
 .interactiveCard {
@@ -73,28 +76,28 @@
 /* ── Featured Post Card ── */
 .featuredSection {
   margin-bottom: 20px;
-}
-
-.featured {
-  padding: 32px 36px;
-  min-height: 240px;
-}
 
-.featuredTitle {
-  font-size: 28px;
-  font-weight: 700;
-  line-height: 1.25;
-  margin-bottom: 16px;
-  color: var(--rs-blog-list-title-color);
-}
+  .featured {
+    padding: 32px 36px;
+    min-height: 240px;
+
+    .featuredTitle {
+      font-size: 28px;
+      font-weight: 700;
+      line-height: 1.25;
+      margin-bottom: 20px;
+      color: var(--rs-blog-list-title-color);
+    }
 
-.featuredDescription {
-  font-size: 15px;
-  font-weight: 400;
-  color: var(--rs-blog-list-desc-color);
-  line-height: 1.7;
-  flex-grow: 1;
-  margin-bottom: 24px;
+    .featuredDescription {
+      font-size: 15px;
+      font-weight: 400;
+      color: var(--rs-blog-list-desc-color);
+      line-height: 1.7;
+      flex-grow: 1;
+      margin-bottom: 24px;
+    }
+  }
 }
 
 /* ── Post Grid ── */
diff --git a/src/blog-list/index.tsx b/src/blog-list/index.tsx
index 16359ad..7f6e6df 100644
--- a/src/blog-list/index.tsx
+++ b/src/blog-list/index.tsx
@@ -362,6 +362,8 @@ export function BlogList({
       ) : null}
       {hideDocLayoutSidebarAndOutline ? (
         <style>{`
+      .rp-doc > h1 { font-weight: 700; }
+      .rp-doc > p { color: var(--rs-blog-list-desc-color); }
       .rp-doc-layout__sidebar-placeholder { display: none; }
       .rp-doc-layout__outline { display: none; }
       .rp-doc-layout__doc { width: 100% !important; max-width: 100% !important; }

From 0c917a57f3ebd692ecc068f6c874f7037b218934 Mon Sep 17 00:00:00 2001
From: sunyiteng <sunyiteng@bytedance.com>
Date: Wed, 22 Apr 2026 16:53:42 +0800
Subject: [PATCH 2/2] fix: copilot comment

---
 src/blog-list/index.module.scss | 56 ++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/blog-list/index.module.scss b/src/blog-list/index.module.scss
index a7c5cc6..44e2c7f 100644
--- a/src/blog-list/index.module.scss
+++ b/src/blog-list/index.module.scss
@@ -6,7 +6,7 @@
     --rs-blog-list-card-bg:
       radial-gradient(94.38% 84.84% at 0% 2.15%, #ffffff29 0%, #fff0 100%),
       #ffffff9c;
-    --rs-blog-list-card-border: 1px solid #0e0e0f25;
+    --rs-blog-list-card-border: 1px solid #0e0e0f16;
     --rs-blog-list-card-shadow: 0 4px 24px #0e0e0f09;
   }
 
@@ -73,33 +73,6 @@
   }
 }
 
-/* ── Featured Post Card ── */
-.featuredSection {
-  margin-bottom: 20px;
-
-  .featured {
-    padding: 32px 36px;
-    min-height: 240px;
-
-    .featuredTitle {
-      font-size: 28px;
-      font-weight: 700;
-      line-height: 1.25;
-      margin-bottom: 20px;
-      color: var(--rs-blog-list-title-color);
-    }
-
-    .featuredDescription {
-      font-size: 15px;
-      font-weight: 400;
-      color: var(--rs-blog-list-desc-color);
-      line-height: 1.7;
-      flex-grow: 1;
-      margin-bottom: 24px;
-    }
-  }
-}
-
 /* ── Post Grid ── */
 .grid {
   display: grid;
@@ -174,6 +147,33 @@
   }
 }
 
+/* ── Featured Post Card ── */
+.featuredSection {
+  margin-bottom: 20px;
+}
+
+.featured {
+  padding: 32px 36px;
+  min-height: 240px;
+}
+
+.featuredTitle {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.25;
+  margin-bottom: 20px;
+  color: var(--rs-blog-list-title-color);
+}
+
+.featuredDescription {
+  font-size: 15px;
+  font-weight: 400;
+  color: var(--rs-blog-list-desc-color);
+  line-height: 1.7;
+  flex-grow: 1;
+  margin-bottom: 24px;
+}
+
 /* ── Responsive: Tablet ── */
 @media (max-width: 1015px) {
   .blogPage {