From d09e55f6a38994ca7eb018b2c820cdd5db13af14 Mon Sep 17 00:00:00 2001
From: Amr Bashir <amr.bashir2015@gmail.com>
Date: Mon, 2 Oct 2023 19:51:01 +0300
Subject: [PATCH] feat: smooth bg gradient fade (#1588)

* feat: smooth bg gradient fade

port of https://github.com/tauri-apps/tauri-docs/pull/1381 to stable docs

* add z-index to heroContainer
---
 src/pages/index.module.css | 41 +++++++++++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 28823527f3..0ae2c16667 100644
--- 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;
   }
-}
\ No newline at end of file
+}