feat: add backdrop filter (#597)

fbuireu · Oct 1, 2023 · da69048 · da69048
1 parent ab0345a
commit da69048
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/src/components/organisms/Header/Header.js b/src/components/organisms/Header/Header.js
@@ -26,6 +26,7 @@ const Header = () => {
 
   return (
     <header className={`${isScrolling ? `--is-scrolling` : ``}`}>
+      <div className='backdrop' />
       <section className={`wrapper`}>
         <Link
           className={`logo__link ${isMenuActive ? `--is-active` : ``}`}

diff --git a/src/components/organisms/Header/Header.scss b/src/components/organisms/Header/Header.scss
@@ -2,8 +2,8 @@
 @import '../../../styles/global/functions';
 
 header {
-  backdrop-filter: blur(1.25rem);
-  background: rgba(color(others, white), .75);
+ // backdrop-filter: blur(1.25rem);
+  //background: rgba(color(others, white), .75);
   margin-inline: auto;
   padding: 1.5rem 0;
   position: fixed;
@@ -12,14 +12,31 @@ header {
   z-index: 1000;
 
   &.--is-scrolling {
-    box-shadow: 0 .125rem .375rem color(neutral, neutral-3);
+    //box-shadow: 0 .125rem .375rem color(neutral, neutral-3);
 
     &::after {
       clip-path: polygon(0% 0%, 100% 0%, 100% 120%, 0% 120%);
     }
   }
 }
 
+.backdrop {
+  --extended-by: 100px;
+  --cutoff: calc(100% - var(--extended-by));
+  --blur: 15px;
+  pointer-events: none;
+  position: absolute;
+  inset:0;
+  bottom: calc(-1 * var(--extended-by));
+  -webkit-mask-image:linear-gradient(
+  to bottom,
+  black 0,
+  black var(--cutoff),
+  transparent var(--cutoff)
+  );
+  backdrop-filter: blur(var(--blur));
+}
+
 .logo {
   height: 100%;
   max-height: 14rem;
@@ -28,6 +45,10 @@ header {
   width: 100%;
 }
 
+.logo__link:not(.--is-active){
+  position: relative;
+}
+
 .logo__link.--is-active .logo {
   animation: to-front .5s forwards .3s;
   fill: color(others, white);

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -22,7 +22,7 @@ const Index = ({
     },
   },
 }) => {
-   return (
+  /* return (
      <h1
        style={{
          textAlign: `center`,
@@ -34,15 +34,15 @@ const Index = ({
        <br/>
        We&apos;ll be back soon
      </h1>
-   )
+   )*/
 
-  //return <Layout>
- //   <SEO title="Home"/>
- //   <HomeJumbotron {...jumbotron} />
- //   <Testimonials {...testimonials} />
-  //  <MyWork {...myWork} />
- //   <HomeLatestArticles //{...latestArticles} />
-//  </Layout>
+  return <Layout>
+    <SEO title="Home"/>
+    <HomeJumbotron {...jumbotron} />
+    <Testimonials {...testimonials} />
+    <MyWork {...myWork} />
+    <HomeLatestArticles {...latestArticles} />
+  </Layout>
 };
 
 export const homeData = graphql`