From b32a6a4a19e4b68f17d330740bb0888c379a031d Mon Sep 17 00:00:00 2001
From: Aaron Chan <42254254+aaronchan32@users.noreply.github.com>
Date: Sun, 2 Jun 2024 12:56:55 -0700
Subject: [PATCH] fix: styling adjustments for signature

---
 src/app/components/Navbar/Navbar.scss       |  7 +++++++
 src/app/components/Navbar/Navbar.tsx        | 14 +++++++-------
 src/app/components/Signature/Signature.scss |  2 --
 src/app/pages/Landing/Landing.scss          | 11 +++++++++--
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/app/components/Navbar/Navbar.scss b/src/app/components/Navbar/Navbar.scss
index e418ab2..7cd4251 100644
--- a/src/app/components/Navbar/Navbar.scss
+++ b/src/app/components/Navbar/Navbar.scss
@@ -85,6 +85,13 @@ nav {
       padding-left: 0;
       margin-block: 2rem;
     }
+
+    .nav-signature-container {
+      margin-bottom: 1rem;
+      @media (min-width: $desktop-breakpoint) {
+        margin-bottom: clamp(1rem, 3.5vw, 2.5rem);
+      }
+    }
   }
 
   .dark_overlay {
diff --git a/src/app/components/Navbar/Navbar.tsx b/src/app/components/Navbar/Navbar.tsx
index 9eaffa4..353e76c 100644
--- a/src/app/components/Navbar/Navbar.tsx
+++ b/src/app/components/Navbar/Navbar.tsx
@@ -106,13 +106,13 @@ export default function Navbar({ pageRefs }: NavbarProps) {
           </span>
 
           <div className="nav-footer">
-            {/* <ApplyNow navContainerRef={navContainerRef} /> */}
-            {/* <FutureUpgrader/> */}
-            <Signature
-              hideMobile={true}
-              navContainerRef={navContainerRef}
-              hoveringCart={hoveringCart}
-            />
+            <div className="nav-signature-container">
+              <Signature
+                hideMobile={true}
+                navContainerRef={navContainerRef}
+                hoveringCart={hoveringCart}
+              />
+            </div>
             <a
               className="add-me-to-cart"
               onMouseEnter={() => {
diff --git a/src/app/components/Signature/Signature.scss b/src/app/components/Signature/Signature.scss
index 876b163..504ab51 100644
--- a/src/app/components/Signature/Signature.scss
+++ b/src/app/components/Signature/Signature.scss
@@ -9,8 +9,6 @@
   }
 
   position: relative;
-  margin-top: 10px;
-  margin-bottom: clamp(15px, calc(3px + 1vw), 40px);
   font-size: $p-font;
   height: 60px;
 
diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss
index d8a5187..c478ae9 100644
--- a/src/app/pages/Landing/Landing.scss
+++ b/src/app/pages/Landing/Landing.scss
@@ -1,6 +1,7 @@
 #landing {
   h1,
   h3 {
+    width: fit-content;
     text-transform: uppercase;
     text-wrap: nowrap;
   }
@@ -10,7 +11,7 @@
     margin-block-end: calc($p-size * 0.5);
 
     @media (min-width: 400px) {
-      font-size: clamp(30px, calc(27px + 0.9vw), 44px);
+      font-size: clamp(30px, calc(25px + 2vw), 44px);
     }
   }
 
@@ -19,8 +20,13 @@
   }
 
   .mobile-header {
+    width: fit-content;
     margin-block-start: calc($main-padding-mobile-block + 10px);
-    margin-inline: 10vw;
+    margin-inline: auto;
+
+    p {
+      width: fit-content;
+    }
   }
 
   .breadcrumb {
@@ -32,6 +38,7 @@
     margin-block: 1rem;
     margin-inline: auto;
     width: 80%;
+    max-width: 400px;
     display: flex;
     justify-content: center;
     flex-direction: column;