(v0.3.1-alpha) UI Colors + Buttons

Added some better bg colors and button styls. Made the navbar fixed to the screen. I'm currently having a bug where the horizontal and vertical stuff i overflowing, ah will see soon :P

Author: rupnil-codes

src/routes/landing.jsx

@@ -7,7 +7,11 @@ function Landing() {
         <>
             <section className={"landing"}>
                 <section className={"hero"}>
-                    <h1 className={"header"}>CIPHER</h1>
+                    <h1 className={"header-font"}>
+                        C1PH
+                        <span className={"sigma-font"}>Σ</span>
+                        R
+                    </h1>
                     <p>Build a CYBERSECURITY related project.</p>
                     <p>Get <i>laptops</i>, <i>hacker kits</i>, and more!</p>
 
@@ -36,6 +40,7 @@ function Landing() {
                         </div>
                     </div>
                 </section>
+
             </section>
         </>
     )

src/styles/components/Navbar.css

@@ -1,6 +1,6 @@
 
 .nav {
-    position: absolute;
+    position: fixed;
 
     display: flex;
     flex-direction: row;
@@ -15,7 +15,7 @@
     border: 1px solid var(--clr-surface-a10);
     border-radius: 1rem;
 
-    backdrop-filter: blur(10px) brightness(1.2);
+    backdrop-filter: blur(0.75rem) brightness(0.5);
 }
 
 .nav .logo-container {

src/styles/index.css

@@ -4,7 +4,7 @@
 }
 
 body {
-    background-color: var(--clr-surface-a0);
+    background-color: var(--clr-dark-a0);
     color: var(--clr-primary-a80);
     margin: 0;
 }

src/styles/routes/landing.css

@@ -6,8 +6,6 @@
     height: 100%;
 
     display: flex;
-    align-items: center;
-    justify-content: center;
     flex-direction: column;
 }
 
@@ -23,9 +21,12 @@
 }
 
 .landing .hero h1 {
+    font-family: "Cook Widetype", cursive;
+    letter-spacing: 0.25rem;
+
     font-size: 4rem;
     font-weight: 800;
-    margin: 0;
+    margin: 0 0 1rem 0;
 }
 
 .landing .hero p {
@@ -49,14 +50,16 @@
 .landing .hero .buttons .button-container {
     padding: 0.75rem 1.5rem;
 
-    /*background-color: var();*/
-    backdrop-filter: brightness(1.5);
+    /*background-color: var(--clr-surface-a0);*/
+    outline: 2px solid var(--clr-surface-tonal-a50);
+    outline-offset: -2px;
+
     color: var(--clr-primary-a70);
     border-radius: 0.5rem;
 
     font-weight: 200;
 }
-.button-container-important {
+.landing .hero .buttons .button-container-important {
     padding: 0.75rem 1.5rem;
 
     background-color: var(--clr-primary-a0);
@@ -73,18 +76,19 @@
     align-items: center;
     flex-direction: column;
 
-    backdrop-filter: brightness(0.6);
+    /*backdrop-filter: brightness(1.6);*/
+    background-color: color-mix(in srgb, var(--clr-surface-a0) 50%, black);
 
     height: 100%;
-    width: 70%;
+    width: 65%;
 
     border-radius: 1.25rem 1.25rem 0 0;
     border-top: 2px solid var(--clr-surface-a10);
     border-right: 2px solid var(--clr-surface-a10);
     border-left: 2px solid var(--clr-surface-a10);
     border-bottom: 0;
 
-    box-shadow: 0 0 10rem -5rem var(--clr-primary-a30);
+    box-shadow: 0 0 10rem -3rem var(--clr-primary-a30);
 }
 
 .landing .hero .terminal .titlebar {