add mask behind header

mcordoba00 · Nov 6, 2024 · ad5ea2d · ad5ea2d
1 parent b7b8b19
commit ad5ea2d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss
@@ -3,10 +3,23 @@
     top: 0;
 }
 
+.mask {
+    pointer-events: none;
+    backdrop-filter: blur(0.5rem);
+    background: linear-gradient(to bottom, var(--page-background), var(--static-transparent));
+    mask-image: linear-gradient(rgba(0,0,0) 25%, rgba(0, 0, 0, 0) 100%);
+    mask-size: 100% 100%;
+}
+
 @media (--s) {
     .position {
         top: auto;
         position: fixed;
         bottom: var(--static-space-24);
     }
+
+    .mask {
+        transform: rotate(180deg);
+        bottom: 0;
+    }
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -73,15 +73,9 @@ export const Header = () => {
     return (
         <>
             <Flex
+                className={styles.mask}
                 position="fixed" zIndex={9}
-                fillWidth minHeight="80" justifyContent="center"
-                style={{
-                    pointerEvents: 'none',
-                    backdropFilter: 'blur(0.5rem)',
-                    background: 'linear-gradient(to bottom, var(--page-background), var(--static-transparent))',
-                    maskImage: 'linear-gradient(rgba(0,0,0) 25%, rgba(0, 0, 0, 0) 100%)',
-                    maskSize: '100% 100%',
-                }}>
+                fillWidth minHeight="80" justifyContent="center">
             </Flex>
             <Flex style={{height: 'fit-content'}}
                 className={styles.position}