Fixing responsive

lfglabs-dev · Jul 16, 2023 · 8e659fc · 8e659fc
1 parent 5edb34f
commit 8e659fc
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 21 deletions.
diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
@@ -195,6 +195,14 @@ const Navbar: FunctionComponent = () => {
               </div>
               <div className="py-4 flex flex-col">
                 <ul className="uppercase text-babe-blue">
+                  <Link href="/partnership">
+                    <li
+                      onClick={() => setNav(false)}
+                      className={styles.menuItemSmall}
+                    >
+                      Partnership
+                    </li>
+                  </Link>
                   <Link href="/">
                     <li
                       onClick={() => setNav(false)}

diff --git a/pages/partnership.tsx b/pages/partnership.tsx
@@ -39,7 +39,7 @@ const Partnership: NextPage = () => {
               <MainTitle
                 title="Unlock Starknet Quests:"
                 highlighted="Engage, Reward & Thrive"
-                subtitle="Experience a groundbreaking platform that revolutionizes user engagement and rewards through specialized on-chain quests on Starknet. Explore the possibilities, foster loyalty, and take your project to new heights."
+                subtitle="Experience a groundbreaking platform that revolutionizes user engagement and rewards through specialized on-chain quests on Starknet."
                 corner="topRight"
                 squares="bottomLeft"
               />
@@ -201,7 +201,9 @@ const Partnership: NextPage = () => {
                 <img src="/partners/AVNULogo.svg" />
               </div>
             </Box>
-            <Crosses leftSide={false} number={2} xDecal={-50} />
+            <div className={styles.lastCrosses}>
+              <Crosses leftSide={false} number={2} xDecal={-50} />
+            </div>
           </section>
         </main>
       </div>

diff --git a/styles/components/stats.module.css b/styles/components/stats.module.css
@@ -22,12 +22,6 @@
   margin: 0 128px 64px;
 }
 
-@media screen and (max-width: 740px) {
-  .container {
-    margin: 0 24px 64px;
-  }
-}
-
 .elementsContainer {
   display: flex;
   align-items: flex-start;
@@ -41,6 +35,16 @@
   aspect-ratio: 362 / 164;
 }
 
+@media screen and (max-width: 740px) {
+  .container {
+    margin: 0 24px 64px;
+  }
+  .statElement {
+    flex: 1 0 0;
+    aspect-ratio: unset;
+  }
+}
+
 .statValue {
   display: flex;
   flex-direction: column;

diff --git a/styles/components/steps.module.css b/styles/components/steps.module.css
@@ -141,6 +141,7 @@
     flex-direction: column;
     padding: 40px;
     height: unset;
+    margin-left: 0;
   }
   .icon {
     display: none;

diff --git a/styles/components/titles.module.css b/styles/components/titles.module.css
@@ -65,18 +65,30 @@
   .mainTitle {
     width: 100%;
     font-size: max(min(7vw, 34px), 24px);
-    line-height: 8vw;
+    line-height: max(8vw, 25px);
     margin-top: 24px;
+    text-align: center;
   }
   .mainSubtitle {
     width: 100%;
     font-size: max(3vw, 16px);
     margin-top: 16px;
-    line-height: max(4vw, 18px);
+    line-height: max(4vw, 19px);
+    text-align: center;
   }
   .corner {
     display: none;
   }
+  .container {
+    position: relative;
+    padding: 0;
+    width: fit-content;
+    display: block;
+    margin: 0 auto;
+  }
+  .squares {
+    display: none;
+  }
 }
 
 .categoryTitle {

diff --git a/styles/partnership.module.css b/styles/partnership.module.css
@@ -26,16 +26,17 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  margin: 2.5rem 0 1rem;
+  margin-left: 1rem;
+  height: 100vh;
 }
 
 .headerContent {
   display: flex;
-  padding: 1rem 128px;
+  padding: 0 128px;
   z-index: 4;
-  height: 512px;
   width: 100%;
   margin-top: 7vh;
+  height: 100%;
 }
 
 .headerImg {
@@ -45,16 +46,16 @@
   z-index: -6;
   width: min(900px, 70%);
   aspect-ratio: 1;
-  transform: rotate3d(10, -2, -1.4, calc(var(--scroll) * 0.1deg))
-    scale(min(calc(1 + var(--scroll) / 7000), 1.4));
+  transform: rotate3d(10, -2, -1.4, calc(var(--scroll) * 0.04deg))
+    scale(min(calc(1 + var(--scroll) / 10000), 1.4));
 }
 
 .mainTitleContainer {
-  height: 350px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
+  transform: translateY(-45px);
 }
 
 .mainTitleContainer h1 {
@@ -89,8 +90,9 @@
 
 .main {
   background-color: var(--background);
-  width: 100%;
+  width: 100vw;
   z-index: 6;
+  margin: 0;
 }
 
 .section {
@@ -113,10 +115,7 @@
   }
   .mainTitleContainer {
     width: 100vw;
-    margin: 0;
-  }
-  .headerContent {
-    padding: 1rem 40px;
+    margin: 20px;
   }
   .header {
     width: 100vw;
@@ -128,6 +127,12 @@
   }
 }
 
+@media (max-width: 800px) {
+  .headerContent {
+    padding: 0 0px;
+  }
+}
+
 .partnerSection {
   padding: 2rem 128px 2rem;
   position: relative;
@@ -138,6 +143,7 @@
   width: 100%;
   margin-top: 2rem;
   padding: 1rem;
+  flex-wrap: wrap;
 }
 
 .partnersContainer img {
@@ -166,3 +172,15 @@
   position: absolute;
   transform: translateY(-60px) translateX(70px);
 }
+
+@media screen and (max-width: 740px) {
+  .partnerSection {
+    padding: 2rem 24px 2rem;
+  }
+  .cross2 {
+    display: none;
+  }
+  .lastCrosses {
+    display: none;
+  }
+}