(v0.3.2-alpha) New Section!

Modified the CSS to allow the creation of new sections! THe HERO section takes up the initial 100% of the screen. The next sections do NOT affect it :yay: lol

Author: rupnil-codes

src/routes/landing.jsx

@@ -41,6 +41,31 @@ function Landing() {
                     </div>
                 </section>
             </section>
+            <section className="content">
+                <div className={"divider"}/>
+                <div className={"glow"}/>
+
+                <h1> Deciphering</h1>
+                <h2>CIPHER's Mystery</h2>
+                <div className={"small-divider"}/>
+                <p>Explanation here.. COMING SOONNN</p>
+
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+                <p></p>
+
+            </section>
         </>
     )
 }

src/styles/App.css

@@ -1,7 +1,7 @@
 
 .viewport {
-    height: 100vh;
-    width: 100vw;
+    height: 100%;
+    width: 100%;
 
     display: flex;
     flex-direction: column;

src/styles/index.css

@@ -8,6 +8,8 @@ body {
     background-color: var(--clr-dark-a0);
     color: var(--clr-primary-a80);
     margin: 0;
+
+    height: 100%;
 }
 
 .header-font {

src/styles/routes/landing.css

@@ -3,21 +3,26 @@
     /*margin-top: 3.5rem;*/
 
     width: 100%;
-    height: 100%;
+    min-height: 100vh;
 
     display: flex;
     flex-direction: column;
 }
 
 .landing .hero {
     margin-top: 6rem;
-
+    height: calc(100vh - 6rem);
     width: 100%;
-    height: calc(100% - 5.2rem);
+
+    flex: 1;
+    flex-shrink: 0;
 
     display: flex;
     align-items: center;
     flex-direction: column;
+
+    justify-content: flex-start;
+    min-height: 0;
 }
 
 .landing .hero h1 {
@@ -79,7 +84,9 @@
     /*backdrop-filter: brightness(1.6);*/
     background-color: color-mix(in srgb, var(--clr-surface-a0) 50%, black);
 
-    height: 100%;
+    flex-grow: 1;
+    flex-shrink: 0;
+
     width: 65%;
 
     border-radius: 1.25rem 1.25rem 0 0;
@@ -145,11 +152,67 @@
     display: flex;
 
     width: 100%;
-    height: 100%;
+    flex-grow: 1;
+    overflow: hidden;
 
     margin-top: 1rem;
 }
 
 .landing .hero .terminal .body p {
     margin-left: 1.5rem;
+}
+
+
+
+.content {
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background-color: var(--clr-dark-a0);
+}
+
+.content .divider {
+    height: 2px;
+    width: 100%;
+
+    background-color: var(--clr-surface-a10);
+}
+.content .glow {
+    height: 8rem;
+    width: 100%;
+
+    /*background-image: linear-gradient(color-mix(in srgb, var(--clr-primary-a20) 20%, transparent), var(--clr-dark-a0));*/
+}
+
+.content h1 {
+    font-family: "Cook Widetype", cursive;
+    letter-spacing: 0.25rem;
+
+    font-size: 3.25rem;
+    font-weight: 800;
+    margin: 0 0 0.5rem 0;
+
+    text-align: center;
+}
+
+.content h2 {
+    font-family: "Cook Widetype", cursive;
+    letter-spacing: 0.25rem;
+
+    font-size: 2rem;
+    font-weight: 800;
+    margin: 0 0 1.5rem 0;
+
+    text-align: center;
+}
+
+.content .small-divider {
+    height: 2px;
+    width: 65%;
+
+    background-color: var(--clr-surface-a10);
+    margin: 0 0 5rem 0;
 }