feat: smooth bg gradient fade (#1588)

* feat: smooth bg gradient fade port of #1381 to stable docs * add z-index to heroContainer
tauri-apps · Oct 2, 2023 · d09e55f · d09e55f
1 parent ce7914f
commit d09e55f
Showing 1 changed file with 36 additions and 5 deletions.
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -22,12 +22,24 @@
 
 /* Hero */
 .hero {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: stretch;
   padding: 4rem 0;
 }
 
+.hero::after {
+  content: '';
+  position: absolute;
+  inset: 70% 0 0;
+  background: linear-gradient(transparent, var(--ifm-background-color));
+}
+
+html[data-theme='light'] .hero::after {
+  background: linear-gradient(transparent, var(--ifm-background-surface-color));
+}
+
 @media (max-width: 700px) {
   .hero {
     padding: 1rem 0;
@@ -40,6 +52,7 @@
   align-items: center;
   flex-shrink: 0;
   max-width: min(50rem, 100%);
+  z-index: 1;
 }
 
 .heroBefore,
@@ -246,10 +259,28 @@
 }
 
 .hero {
-  animation: hero-intro 2s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
-  background:
-    linear-gradient(-90deg, #6d6d6d25 1px, transparent 1px), linear-gradient(#6d6d6d25 1px, transparent 1px), linear-gradient(-90deg, #6d6d6d25 1px, transparent 1px), linear-gradient(#6d6d6d25 1px, transparent 1px), linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px), linear-gradient(-90deg, #6d6d6d25 1px, transparent 1px), linear-gradient(-90deg, transparent 6px, transparent 6px, transparent 156px, transparent 156px), linear-gradient(#6d6d6d25 1px, transparent 1px), transparent;
-  background-size: 32px 32px, 32px 32px, 256px 256px, 256px 256px, 256px 256px, 256px 256px, 256px 256px, 256px 256px
+  animation: hero-intro 2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
+  background: linear-gradient(-90deg, #6d6d6d25 1px, transparent 1px),
+    linear-gradient(#6d6d6d25 1px, transparent 1px),
+    linear-gradient(-90deg, #6d6d6d25 1px, transparent 1px),
+    linear-gradient(#6d6d6d25 1px, transparent 1px),
+    linear-gradient(
+      transparent 6px,
+      transparent 6px,
+      transparent 156px,
+      transparent 156px
+    ),
+    linear-gradient(-90deg, #6d6d6d25 1px, transparent 1px),
+    linear-gradient(
+      -90deg,
+      transparent 6px,
+      transparent 6px,
+      transparent 156px,
+      transparent 156px
+    ),
+    linear-gradient(#6d6d6d25 1px, transparent 1px), transparent;
+  background-size: 32px 32px, 32px 32px, 256px 256px, 256px 256px, 256px 256px,
+    256px 256px, 256px 256px, 256px 256px;
 }
 
 @keyframes hero-intro {
@@ -262,4 +293,4 @@
   .hero {
     animation: none;
   }
-}
+}