fix(theme): homepage mask based on logo vertical centering (#917)

web-infra-dev · Apr 7, 2024 · 63107df · 63107df
1 parent 0aba13a
commit 63107df
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/nasty-carrots-share.md b/.changeset/nasty-carrots-share.md
@@ -0,0 +1,5 @@
+---
+"@rspress/theme-default": patch
+---
+
+Homepage mask based on logo vertical centering
diff --git a/packages/theme-default/src/components/HomeHero/index.module.scss b/packages/theme-default/src/components/HomeHero/index.module.scss
@@ -20,7 +20,8 @@
   mixblendmode: normal;
   filter: blur(80px);
   opacity: 0.05;
-  top: -100px;
+  top: 50%;
+  margin-top: -250px;
   transform: translateX(-50%);
   z-index: 0;
 }

diff --git a/packages/theme-default/src/components/HomeHero/index.tsx b/packages/theme-default/src/components/HomeHero/index.tsx
@@ -26,7 +26,7 @@ export function HomeHero({ frontmatter }: { frontmatter: FrontMatterMeta }) {
         .filter(text => text !== '')
     : [];
   return (
-    <div className="m-auto pt-0 px-6 pb-12 sm:pt-10 sm:px-16 md:pt-16 md:px-16 md:pb-16">
+    <div className="m-auto pt-0 px-6 pb-12 sm:pt-10 sm:px-16 md:pt-16 md:px-16 md:pb-16 relative">
       <div
         className={styles.mask}
         style={{