From 35ecaece5b3a6d51842c6bc9f09d4842f758f85d Mon Sep 17 00:00:00 2001
From: Max Ward <max.jp.ward@gmail.com>
Date: Sun, 19 Feb 2023 18:42:52 -0800
Subject: [PATCH] make title text fade behind header

---
 src/components/layout/Navigation.tsx | 72 ++++++++++++++--------------
 src/views/search/SearchView.tsx      |  8 ++--
 2 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index 71d40f76..299f0908 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -12,43 +12,45 @@ export interface NavigationProps {
 
 export function Navigation(props: NavigationProps) {
   return (
-    <div className="fixed left-0 right-0 top-0 z-10 flex min-h-[88px] items-center justify-between py-5 px-7">
-      <div
-        className={`${
-          props.bg ? "opacity-100" : "opacity-0"
-        } absolute inset-0 block bg-denim-100 transition-opacity duration-300`}
-      >
-        <div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" />
-      </div>
-      <div className="relative flex w-full items-center justify-center sm:w-fit">
-        <div className="mr-auto sm:mr-6">
-          <Link to="/">
-            <BrandPill clickable />
-          </Link>
+    <div className="fixed left-0 right-0 top-0 z-20 min-h-[150px] bg-gradient-to-b from-denim-300 via-denim-300 to-transparent sm:from-transparent">
+      <div className="flex items-center justify-between py-5 px-7">
+        <div
+          className={`${
+            props.bg ? "opacity-100" : "opacity-0"
+          } absolute inset-0 block bg-denim-100 transition-opacity duration-300`}
+        >
+          <div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" />
         </div>
-        {props.children}
-      </div>
-      <div
-        className={`${
-          props.children ? "hidden sm:flex" : "flex"
-        } relative flex-row	gap-4`}
-      >
-        <a
-          href={conf().DISCORD_LINK}
-          target="_blank"
-          rel="noreferrer"
-          className="text-2xl text-white"
+        <div className="relative flex w-full items-center justify-center sm:w-fit">
+          <div className="mr-auto sm:mr-6">
+            <Link to="/">
+              <BrandPill clickable />
+            </Link>
+          </div>
+          {props.children}
+        </div>
+        <div
+          className={`${
+            props.children ? "hidden sm:flex" : "flex"
+          } relative flex-row	gap-4`}
         >
-          <IconPatch icon={Icons.DISCORD} clickable />
-        </a>
-        <a
-          href={conf().GITHUB_LINK}
-          target="_blank"
-          rel="noreferrer"
-          className="text-2xl text-white"
-        >
-          <IconPatch icon={Icons.GITHUB} clickable />
-        </a>
+          <a
+            href={conf().DISCORD_LINK}
+            target="_blank"
+            rel="noreferrer"
+            className="text-2xl text-white"
+          >
+            <IconPatch icon={Icons.DISCORD} clickable />
+          </a>
+          <a
+            href={conf().GITHUB_LINK}
+            target="_blank"
+            rel="noreferrer"
+            className="text-2xl text-white"
+          >
+            <IconPatch icon={Icons.GITHUB} clickable />
+          </a>
+        </div>
       </div>
     </div>
   );
diff --git a/src/views/search/SearchView.tsx b/src/views/search/SearchView.tsx
index 501c8a2f..5035574d 100644
--- a/src/views/search/SearchView.tsx
+++ b/src/views/search/SearchView.tsx
@@ -32,10 +32,10 @@ export function SearchView() {
             <div className="absolute left-0 bottom-0 right-0 flex h-0 justify-center">
               <div className="absolute bottom-4 h-[100vh] w-[3000px] rounded-[100%] bg-denim-300 md:w-[200vw]" />
             </div>
-            <div className="relative z-20">
-              <div className="mb-16">
-                <Title className="mx-auto max-w-xs">{t("search.title")}</Title>
-              </div>
+            <div className="relative z-10 mb-16">
+              <Title className="mx-auto max-w-xs">{t("search.title")}</Title>
+            </div>
+            <div className="relative z-30">
               <Sticky enabled top={16} onStateChange={stickStateChanged}>
                 <SearchBarInput
                   onChange={setSearch}