From db993a7e13ef0e30a485cdaa15ce58a4ccedf500 Mon Sep 17 00:00:00 2001
From: Joshua <joshua.brigati@gmail.com>
Date: Tue, 6 Feb 2024 12:07:52 -0600
Subject: [PATCH] fixing a lot of the responsive design

---
 .../ Navigation/MobileNavigation.module.scss  |   2 +-
 src/index.css                                 |  12 -
 src/sections/LandingSection.tsx               | 206 ++++++++--------
 src/styles/LandingSection.module.scss         | 233 ++++++++++--------
 src/styles/Navigation.module.scss             |   2 +-
 src/styles/globals.scss                       |  31 ++-
 6 files changed, 256 insertions(+), 230 deletions(-)

diff --git a/src/components/ Navigation/MobileNavigation.module.scss b/src/components/ Navigation/MobileNavigation.module.scss
index 06d4eb2..6c52dae 100644
--- a/src/components/ Navigation/MobileNavigation.module.scss	
+++ b/src/components/ Navigation/MobileNavigation.module.scss	
@@ -1,5 +1,5 @@
 .mobile_navigation {
-  position: absolute;
+  position: relative;
   z-index: 1000;
   display: flex;
   justify-content: space-between;
diff --git a/src/index.css b/src/index.css
index ec2585e..8b13789 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/sections/LandingSection.tsx b/src/sections/LandingSection.tsx
index 739573e..c147547 100644
--- a/src/sections/LandingSection.tsx
+++ b/src/sections/LandingSection.tsx
@@ -51,97 +51,126 @@ const LandingSection = () => {
   return (
     <section className={styles.landing_section}>
       <div className={styles.container}>
-        <motion.div
-          className={styles.text_container}
-          variants={textContainerVariants}
-          initial="default"
-          whileInView="visible"
-          viewport={{ once: false }}
-        >
-          <div>
+        <div className={styles.text__section}>
+          <motion.div
+            className={styles.text_container}
+            variants={textContainerVariants}
+            initial="default"
+            whileInView="visible"
+            viewport={{ once: false }}
+          >
+            <div>
+              <motion.div
+                variants={fadeInVariants}
+                initial="initial"
+                whileInView="animate"
+                viewport={{ once: false }}
+              >
+                <h1>
+                  Collaborate.
+                </h1>
+                <h1>
+                  Reward.
+                </h1>
+                <h1>
+                  Grow.
+                </h1>
+
+              </motion.div>
+            </div>
             <motion.div
               variants={fadeInVariants}
               initial="initial"
               whileInView="animate"
               viewport={{ once: false }}
             >
-              <h1>
-                Collaborate.
-              </h1>
-              <h1>
-                Reward.
-              </h1>
-              <h1>
-                Grow.
-              </h1>
-
+              <h6>
+                Alliance allows blockchains to trade yield with each other.
+              </h6>
             </motion.div>
-          </div>
-          <motion.div
-            variants={fadeInVariants}
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: false }}
-          >
-            <h6>
-              Alliance allows blockchains to trade yield with each other.
-            </h6>
-          </motion.div>
-          {videoCutOff && (
+            {videoCutOff && (
+              <motion.div
+                variants={fadeInVariants}
+                initial="initial"
+                whileInView="animate"
+                viewport={{ once: false }}
+              >
+                <div className={styles.video__responsive}>
+                  <iframe
+                    width="560"
+                    height="315"
+                    src="https://www.youtube.com/embed/Xoe9hTzKyeo?si=gU3eAbGoL9_cWqXb"
+                    title="YouTube video player"
+                    // frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowFullScreen
+                  />
+                </div>
+              </motion.div>
+            )}
             <motion.div
               variants={fadeInVariants}
               initial="initial"
               whileInView="animate"
               viewport={{ once: false }}
             >
-              <div className={styles.video__responsive}>
-                <iframe
-                  width="560"
-                  height="315"
-                  src="https://www.youtube.com/embed/Xoe9hTzKyeo?si=gU3eAbGoL9_cWqXb"
-                  title="YouTube video player"
-                  // frameBorder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  allowFullScreen
-                />
-              </div>
+              <p>
+                Alliance is an open-source Cosmos SDK module that enables blockchains to form mutually beneficial relationships, similar to trade agreements between countries. Using Alliance, a chain can allow almost any token—including liquid staking tokens, stablecoins, liquidity provider tokens, and other Cosmos assets—to be staked on their chain to earn staking rewards. In turn for providing a portion of the chain’s staking rewards to stakers of these tokens, the chain can redistribute a percentage of these staked Alliance assets to native token stakers.
+              </p>
             </motion.div>
-          )}
-          <motion.div
-            variants={fadeInVariants}
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: false }}
-          >
-            <p>
-              Alliance is an open-source Cosmos SDK module that enables blockchains to form mutually beneficial relationships, similar to trade agreements between countries. Using Alliance, a chain can allow almost any token—including liquid staking tokens, stablecoins, liquidity provider tokens, and other Cosmos assets—to be staked on their chain to earn staking rewards. In turn for providing a portion of the chain’s staking rewards to stakers of these tokens, the chain can redistribute a percentage of these staked Alliance assets to native token stakers.
-            </p>
-          </motion.div>
-          <motion.div
-            className={styles.button_container}
-            variants={fadeInVariants}
-            initial="initial"
-            whileInView="animate"
-            viewport={{ once: false }}
-          >
-            <a
-              className={styles.button}
-              href="https://medium.com/terra-money/how-to-stake-alliance-assets-a-step-by-step-guide-8e1b263830c2"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Stake Alliance Assets
-            </a>
-            <a
-              className={styles.button}
-              href='https://docs.alliance.terra.money/guides/get-started/'
-              target="_blank"
-              rel="noopener noreferrer"
+            <motion.div
+              className={styles.button_container}
+              variants={fadeInVariants}
+              initial="initial"
+              whileInView="animate"
+              viewport={{ once: false }}
             >
-              Integrate Alliance
-            </a>
+              <a
+                className={styles.button}
+                href="https://medium.com/terra-money/how-to-stake-alliance-assets-a-step-by-step-guide-8e1b263830c2"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Stake Alliance Assets
+              </a>
+              <a
+                className={styles.button}
+                href='https://docs.alliance.terra.money/guides/get-started/'
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Integrate Alliance
+              </a>
+            </motion.div>
           </motion.div>
-        </motion.div>
+
+          <div className={cx(styles.integrations, { isMobile })}>
+            <h3>
+              Integrations & Partners
+            </h3>
+            <div className={styles.icons}>
+              {chains.map((chain, index) => (
+                <a
+                  key={index}
+                  href={chain.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.icon_only}
+                >
+                  <img
+                    src={chain.logo}
+                    alt={chain.name}
+                    style={{
+                      width: chain.sizeOverride || '28px',
+                      height: chain.sizeOverride || '28px',
+                      margin: chain.sizeOverride ? '0 -6px' : '0px',
+                    }}
+                  />
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
 
         {!videoCutOff && (
           <div className={styles.video__responsive}>
@@ -185,33 +214,6 @@ const LandingSection = () => {
         className={styles.alliance_outline}
         width={800}
       /> */}
-
-      <div className={cx(styles.integrations, { isMobile })}>
-        <h3>
-          Integrations & Partners
-        </h3>
-        <div className={styles.icons}>
-          {chains.map((chain, index) => (
-            <a
-              key={index}
-              href={chain.link}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={styles.icon_only}
-            >
-              <img
-                src={chain.logo}
-                alt={chain.name}
-                style={{
-                  width: chain.sizeOverride || '28px',
-                  height: chain.sizeOverride || '28px',
-                  margin: chain.sizeOverride ? '0 -6px' : '0px',
-                }}
-              />
-            </a>
-          ))}
-        </div>
-      </div>
     </section>
   )
 };
diff --git a/src/styles/LandingSection.module.scss b/src/styles/LandingSection.module.scss
index 0a6e5b7..2a752c2 100644
--- a/src/styles/LandingSection.module.scss
+++ b/src/styles/LandingSection.module.scss
@@ -3,22 +3,66 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  height: 100vh;
+  height: 100%;
   min-height: 700px;
   width: 100%;
-  padding: 0 5vmax;
+  padding: 24px 5vmax;
   text-align: center;
   position: relative;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  min-height: calc(100vh - 55px);
 
   .container {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    // align-items: center;
+    align-items: stretch;
     justify-content: space-between;
     width: 100%;
     gap: 96px;
+    flex: 1;
+
+    .text__section {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+      gap: 72px;
+
+      .text_container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 28px;
+        max-width: 600px;
+        min-width: 500px;
+        z-index: 100;
+        flex: 1;
+
+        h1 {
+          font-size: 72px;
+          text-align: start;
+          font-weight: 600;
+          font-family: 'Poppins';
+          color: #F6F7FA
+        }
+        h6 {
+          font-size: 18px;
+          text-align: start;
+          font-weight: 600;
+          color: #F6F7FA;
+          letter-spacing: 0.05px;
+          line-height: 140%;
+        }
+        p {
+          font-size: 14px;
+          color: #8f929e;
+          text-align: start;
+          font-weight: 500;
+          letter-spacing: 0.05px;
+          line-height: 140%;
+        }
+      }
+    }
 
     .video__responsive {
       position: relative;
@@ -28,14 +72,14 @@
       display: flex;
       justify-content: flex-end;
       align-items: flex-start;
-      margin-top: 148px;
-      flex: 2;
+      flex: 1;
       max-width: 800px;
+      margin: auto;
 
       iframe {
+        margin-top: -96px;
         border: 2px solid var(--border-color);
         border-radius: 8px;
-        // filter: drop-shadow(0px 20px 20px hsl(230, 9%, 7%));
         filter: drop-shadow(0px 20px 20px hsla(230, 9%, 7%, 1));
         width: 100%;
         height: auto;
@@ -43,6 +87,12 @@
       }
     }
 
+    @media screen and (max-width: 1400px){
+      .video__responsive {
+        flex: 2;
+      }
+    }
+
     @media screen and (max-width: 1200px) {
       gap: 48px;
     }
@@ -50,13 +100,14 @@
     @media screen and (max-width: 1100px) {
       align-items: flex-start;
       flex-direction: column;
-      gap: 2rem;
+      gap: 28px;
 
       .video__responsive {
         margin-top: 0;
         justify-content: flex-start;
 
         iframe {
+          margin-top: 0;
           width: 80%;
           height: auto;
         }
@@ -64,111 +115,80 @@
     }
   }
 
-  .text_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 2.5rem;
-    max-width: 600px;
-    min-width: 500px;
-    z-index: 100;
-    flex: 1;
-
-    h1 {
-      font-size: 72px;
-      text-align: start;
-      font-weight: 600;
-      font-family: 'Poppins';
-      color: #F6F7FA
-    }
-    h6 {
-      font-size: 18px;
-      text-align: start;
-      font-weight: 600;
-      color: #F6F7FA;
-      letter-spacing: 0.05px;
-      line-height: 140%;
-    }
-    p {
-      font-size: 14px;
-      color: #8f929e;
-      text-align: start;
-      font-weight: 500;
-      letter-spacing: 0.05px;
-      line-height: 140%;
-    }
-  }
-
   @media screen and (max-width: 768px) {
-    padding: 0 5vmax;
+    padding: 0 24px;
+    min-height: calc(100vh - 48px);
 
-    .text_container {
-      h1 {
-        font-size: 58px;
-      }
-      h6 {
-        font-size: 16px;
-      }
-      p {
-        font-size: 14px;
+    .container {
+      .text__section {
+        .text_container {
+          h1 {
+            font-size: 58px;
+          }
+          h6 {
+            font-size: 16px;
+          }
+          p {
+            font-size: 14px;
+          }
+        }
       }
     }
   }
 
   @media screen and (max-height: 900px) {
-    .text_container {
-      gap: 2rem;
-      margin-top: 300px;
+    .container {
+      .video__responsive {
+        iframe {
+          margin-top: 0;
+          filter: none;
+        }
+      }
 
-      h1 {
-        font-size: 48px;
+      .text__section {
+        .text_container {
+          gap: 24px;
+
+          h1 {
+            font-size: 48px;
+          }
+        }
       }
     }
   }
 
   @media screen and (max-width: 540px) {
-    padding: 0 2vmax;
-
     .container {
-
       .video__responsive {
         margin-top: 0;
         justify-content: flex-start;
 
         iframe {
+          margin-top: 0;
           width: 100%;
           height: auto;
+          filter: none;
         }
       }
-    }
-
-    .text_container {
-      min-width: unset;
-      margin-top: 10rem;
-      gap: 1.5rem;
-
-      h1 {
-        font-size: 36px;
-      }
 
-      h6 {
-        font-size: 14px;
-      }
+      .text__section {
+        .text_container {
+          min-width: unset;
+          margin-top: 20px;
+          gap: 12px;
 
-      p {
-        font-size: 12px;
-      }
-    }
-  }
+          h1 {
+            font-size: 36px;
+          }
 
-  @media screen and (max-height: 667px) {
-    .text_container {
-      h6 {
-        font-size: 12px;
-      }
+          h6 {
+            font-size: 14px;
+          }
 
-      p {
-        font-size: 10px;
+          p {
+            font-size: 12px;
+          }
+        }
       }
     }
   }
@@ -237,7 +257,7 @@
       }
     }
     @media screen and (max-width: 767px) {
-      margin-top: 2rem;
+      margin-top: 12px;
 
       .button {
         background-image: linear-gradient(90deg,#228bbc,#002c81);
@@ -247,20 +267,19 @@
     @media screen and (max-width: 500px) {
       .button {
         min-width: 120px;
-        // padding: 12px 28px;
         padding: 10px 14px;
         font-size: 12px;
       }
     }
 
-    @media screen and (max-height: 667px) {
-      .button {
-        padding: 8px 10px;
-        font-size: 11px;
-        min-width: unset;
-      }
-      margin-top: 0;
-    }
+    // @media screen and (max-height: 667px) {
+    //   .button {
+    //     padding: 8px 10px;
+    //     font-size: 11px;
+    //     min-width: unset;
+    //   }
+    //   margin-top: 0;
+    // }
   }
 
   .alliance_outline {
@@ -451,7 +470,7 @@
   }
 
   .integrations {
-    position: absolute;
+    // position: absolute;
     bottom: 28px;
     display: flex;
     flex-direction: column;
@@ -477,8 +496,19 @@
       }
     }
 
-    @media screen and (max-height: 760px) {
-      bottom: -112px;
+    // @media screen and (max-height: 760px) {
+    //   bottom: -112px;
+    // }
+
+    @media screen and (max-width: 500px) {
+      .icons {
+        .icon_only {
+          img {
+            width: 22px !important;
+            height: 22px !important;
+          }
+        }
+      }
     }
 
     @media screen and (max-width: 300px) {
@@ -495,12 +525,11 @@
   .isMobile {
     position: relative;
     bottom: 0;
-    margin-top: 48px;
     gap: 8px;
+    margin-bottom: 12px;
 
     @media screen and (max-height: 700px) {
       gap: 4px;
-      margin-top: 28px;
     }
   }
 }
diff --git a/src/styles/Navigation.module.scss b/src/styles/Navigation.module.scss
index 7f1ad04..5429b46 100644
--- a/src/styles/Navigation.module.scss
+++ b/src/styles/Navigation.module.scss
@@ -1,5 +1,5 @@
 .navigation {
-  position: absolute;
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 7f6a590..912c30d 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -26,35 +26,42 @@
   // --input-bg: #1F1F2C;
 }
 
+html {
+  box-sizing: border-box;
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  line-height: 120%;
-  color: var(--font-color);
-  font-family: "Gotham";
+
   ::-webkit-scrollbar {
     display: none;
   }
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 html,
 body {
-  max-width: 100vw;
-  font-size: 14px;
-  font-family: "Gotham", sans-serif;
-  height: 100%;
   scroll-behavior: smooth;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
+  max-width: 100vw;
+  overflow-x: hidden;
 }
 
 body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: "tnum";
   color: var(--font-color);
   background: var(--bg);
-  overflow: hidden;
+  font-size: 14px;
+  font-family: "Gotham", sans-serif;
+  overflow-y: hidden;
 }
 
 a {