make gradient

WISVCH · Dec 15, 2023 · ec815f3 · ec815f3
1 parent 28bcf96
commit ec815f3
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
@@ -39,14 +39,14 @@ export const About: FunctionalComponent = () => (
                 <Icon icon={faTicket} pad />
                 Sign up for the waiting list!
             </a> */}
-            <a
+            {/* <a
                 class={style.discord}
                 href="https://discord.gg/rB2ucUaFnc"
                 target="_blank"
             >
                 <Icon icon={faDiscord} pad />
                 Join Our Discord!
-            </a>
+            </a> */}
         </div>
     </section>
 );
diff --git a/src/components/header/style.scss b/src/components/header/style.scss
@@ -7,7 +7,7 @@
     height: 100vh;
     min-height: 100vh;
     width: 100vw;
-    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #05238E 100%,), url('../../../static/banner.gif');
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, $background-color 100%,), url('../../../static/banner.gif');
     background-repeat: no-repeat;
     background-size: cover;
 

diff --git a/src/components/numbers/style.scss b/src/components/numbers/style.scss
@@ -2,8 +2,8 @@
 @import "./src/variables";
 
 .numbers {
-    margin-bottom: 64px; 
-
+    margin-bottom: 64px;
+    // background: linear-gradient(180deg, $background-color 0%, rgba(37, 0, 67, 0.00));
 
     h2 {
         color: $secondary-color;

diff --git a/src/global.scss b/src/global.scss
@@ -22,6 +22,10 @@ body {
     position: relative;
 }
 
+.gradient {
+    background: linear-gradient(180deg, $background-color 25%, rgba(0, 0, 0, 0.00) 100%);
+}
+
 section {
     margin: 0 8px;
 }

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,4 +1,5 @@
 import { Fragment, h, render } from "preact";
+import * as style from "./global.scss";
 
 import {
     About,
@@ -22,8 +23,10 @@ const start = (): void => {
     render(
         <Fragment>
             <Header />
-            <Numbers />
-            <Navigation />
+            <div class={style.gradient}>
+                <Navigation />
+                <Numbers />
+            </div>
             <About />
             <Photos />
             <Timeline />