fix: styling adjustments for signature

ucsddesignco · Jun 2, 2024 · b32a6a4 · b32a6a4
1 parent e7aac03
commit b32a6a4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;