padding fix

src/components/Navbar/Navbar.jsx

@@ -16,7 +16,7 @@ function Navbar() {
                 <li><a href="#vision">Vision</a></li>
                 <li><a href="#whatisweb3">What is Web3</a></li>
                 <li>Donate</li>
-                <div class='text-[color:var(--black)] text-[length:var(--font-size-s)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] min-w-[245px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid;'>
+                <div class='text-[color:var(--black)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] max-w-[195px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid;'>
                     <a class='download-btn' href="#">Download Extension</a>
                 </div>
             </ul>
@@ -29,8 +29,8 @@ function Navbar() {
                     <li onClick={toggleNav}><a href="#">Home</a></li>
                     <li onClick={toggleNav}><a href="#vision">Vision</a></li>
                     <li onClick={toggleNav}><a href="#whatisweb3">What is Web3</a></li>
-                    <li onClick={toggleNav}>Donate</li>
-                    <div class='text-[color:var(--black)] text-[length:var(--font-size-s)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] min-w-[245px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid transition-[0.5s] ml-[-0.8em] scale-[0.7] hover:scale-75;'>
+                    <li onClick={toggleNav}><a href="#donate">Donate</a></li>
+                    <div class='text-[color:var(--black)] text-[length:var(--font-size-s)] font-normal not-italic items-end bg-[color:var(--aquamarine)] flex h-[52px] min-w-[245px] transition-[0.5s] border px-[5.2px] py-3 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid transition-[0.5s] ml-[-0.8em] scale-[0.7] hover:scale-75'>
                         <a class="download-btn pl-2.5" href="#">Download Extension</a>
                     </div>
                 </ul>

src/components/P1/CTO/CTOStyles.css

@@ -52,7 +52,7 @@
     .shadowdrop {
         border-radius: 72.5px;
         box-shadow: 0px 4px 4px #00000040;
-        margin-left: 12%;
+        /* margin-left: 12%; */
         transition: 0.5s;
         justify-content: center;
     }
@@ -84,6 +84,6 @@
         align-items: flex-start;
         display: flex;
         vertical-align: center;
-        padding-inline: 15%;
+        padding-inline: 12%;
     }
 }

src/components/P1/Footer/Footer.astro

@@ -12,9 +12,7 @@ import "./FooterStyles.css";
                 >
                     <span class="footer-email"></span>contact@lumeweb.com
                 </li><div class="footer-span">
-                    <span class="footer-h2"
-                        >Freedom, privacy, <br />ownership.</span
-                    >
+                    <span class="footer-h2">Freedom, privacy, ownership.</span>
                 </div>
             </ul>
         </h6>

src/components/P1/Footer/FooterStyles.css

@@ -9,7 +9,7 @@
     margin: 0 auto;
     display: grid;
     gap: 1rem;
-    padding: 7% 14.7%;
+    padding: 10% 12%;
     background-color: #020E10;
     height: auto;
 }
@@ -51,11 +51,12 @@
 }
 
 .footer-h2 {
-    font-size: calc(15px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
+    font-size: calc(12px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
     color: var(--aquamarine);
     line-height: 1vh;
     z-index: 999;
     margin-top: 5em;
+    white-space: nowrap;
 }
 
 .footer-padding {

src/components/P1/Grid/GridStyles.css

@@ -1,5 +1,5 @@
 .cards {
-    max-width: 81%;
+    max-width: 77.5%;
     margin: 126px auto;
     display: grid;
     gap: 1rem;

src/components/P1/Header/HeaderContent.jsx

@@ -12,7 +12,9 @@ const HeaderContent = () => {
     var lastIndex = randomString.lastIndexOf(" ");
     return <div>
         <Typewriter options={
-                {cursor: "_"}
+                {cursor: `<span class="text-[color:var(--aquamarine)]">${
+                    '_'
+                }</span>`}
             }
             onInit={
                 (typewriter) => {

src/components/P1/Meme/MemeStyles.css

@@ -22,7 +22,7 @@
     align-items: center;
     overflow: hidden;
     display: flex;
-    padding-left: 6.5%;
+    /* padding-left: 6.5%; */
     height: 80vh;
     transition: 0.5s;
 }
@@ -32,7 +32,7 @@
     background-position: 100% 50%;
     background-size: contain;
     background-repeat: no-repeat;
-    margin-left: -0.8vw;
+    /* margin-left: -0.8vw; */
     height: calc(100% + 0.3vh);
     transition: 0.5s;
 }
@@ -57,7 +57,7 @@
     .meme-wrapper {
         width: 100%;
         padding-inline: 15%;
-        padding-left: 20%;
+        padding-left: 18%;
         height: 80vh;
         transition: 0.5s;
     }

src/components/P1/Message/MessageStyles.css

@@ -5,7 +5,7 @@
     flex-direction: column;
     gap: 7px;
     min-height: 237px;
-    padding: 5% 15%;
+    padding: 5% 12%;
     width: 100%;
 }
 

src/components/P1/Vision/Vision.astro

@@ -4,7 +4,7 @@ import "./VisionStyles.css";
 
 <div
     class="mt-[166px] items-start flex pb-[5vh]"
-    style="padding-bottom: 5vh; vertical-align: center; padding-inline: 15%;"
+    style="padding-bottom: 5vh; vertical-align: center; padding-inline: 11.9%;"
 >
     <div
         class="bg-[url(../../../src/assets/video-placeholder.webp)] bg-[100%_50%] bg-no-repeat bg-contain transition-[0.5s]"

src/components/P1/Whatisweb3/Whatisweb3Styles.css

@@ -1,7 +1,7 @@
 .w3-container {
     z-index: 999 !important;
     width: 100%;
-    padding-left: 50vw;
+    padding-left: 47.5vw;
     transition: 0.5s;
 }
 
@@ -10,7 +10,7 @@
     background-size: 100% 100%;
     background-repeat: no-repeat;
     left: 0%;
-    width: 80%;
+    width: 100%;
     padding-block: 11em;
     justify-content: center;
     align-items: center;
@@ -29,7 +29,7 @@
 @media screen and (width <=1050px) {
     .w3-container {
         width: 100%;
-        padding-inline: 12%;
+        padding-inline: 9%;
         z-index: 999 !important;
     }