grid fix

src/components/P1/Footer/1 Footer.astro.BACKUP

@@ -0,0 +1,63 @@
+---
+import React from "react";
+import Grid from "dynamic-react-grid";
+import "./FooterStyles.css";
+---
+
+<div class="justify-center bg-[black] list-none items-start pl-[5%];">
+    <div class="flex flex-row;" style={{ padding: 15 }}>
+        <Grid row spacing={1}>
+            <Grid>
+                <h6>
+                    <div class="footer-logo"></div>
+                    <ul>
+                        <li class="footer-li">
+                            <span class="footer-email"
+                            ></span>contact@lumeweb.com
+                        </li>
+                        <li>
+                            <span class="footer-h2"
+                                >Freedom, privacy, <br />ownership.</span
+                            >
+                        </li>
+                    </ul>
+                </h6>
+            </Grid>
+            <Grid>
+                <h5 class="footer-padding">General</h5><br /><h6>
+                    <li class="footer-li">Home</li>
+                    <li class="footer-li">Get Started</li>
+                    <li class="footer-li">Documentation</li>
+                    <li class="footer-li">Projects</li>
+                </h6>
+            </Grid>
+            <Grid>
+                <h5 class="footer-padding">Community</h5><br /><h6>
+                    <li class="footer-li">GitHub</li>
+                    <li class="footer-li">Discord</li>
+                    <li class="footer-li">Twitter</li>
+                    <li class="footer-li">facebook</li>
+                </h6>
+            </Grid>
+            <Grid>
+                <h5 class="footer-padding">Other</h5><br /><h6>
+                    <li class="footer-li">BrowserUniversal</li>
+                    <li class="footer-li">Storage</li>
+                </h6>
+            </Grid>
+            <Grid>
+                <h5 class="footer-padding">Other</h5><br /><h6>
+                    <li class="footer-li">BrowserUniversal</li>
+                    <li class="footer-li">Storage</li>
+                </h6>
+            </Grid>
+            <Grid>
+                <h5 class="footer-padding">Support Us</h5><br /><h6>
+                    <li class="footer-li">Donate</li>
+                    <li class="footer-li">Download App</li>
+                    <li class="footer-li">Partnerships</li>
+                </h6>
+            </Grid>
+        </Grid>
+    </div>
+</div>

src/components/P1/Footer/1 FooterStyles.css.BACKUP.css

@@ -0,0 +1,68 @@
+.footer-logo {
+    background-image: url('../../../assets/lume-logo.webp');
+    background-repeat: no-repeat;
+    background-size: contain;
+    margin-left: 5px;
+    height: 55px;
+    min-width: 150px;
+    display: inline-block;
+    text-align: left;
+    margin-inline: 5px;
+    margin-top: 3vh;
+    z-index: 998 !important;
+}
+
+.footer-email {
+    background-image: url('../../../assets/email-icon.webp');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    padding-inline: 10px;
+    margin-inline: 10px;
+    height: 14px;
+    object-fit: cover;
+    width: 17px;
+}
+
+.footer-column {
+    justify-content: center;
+    background-color: black;
+    list-style-type: none;
+    align-items: flex-start;
+    vertical-align: center;
+    padding-inline: 1%;
+    padding-left: 5%;
+}
+
+.footer-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.footer-padding {
+    display: inline-block;
+    text-align: left;
+    font-family: var(--font-family-jaldi);
+    font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
+    margin-inline: 5px;
+    margin-top: 5vh;
+}
+
+.footer-li {
+    color: #808687;
+    font-family: var(--font-family-jaldi);
+    font-size: calc(10px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
+    font-weight: 100;
+    font-style: normal;
+    padding-left: 0;
+    line-height: 1px;
+    margin-inline: 5px;
+}
+
+.footer-h2 {
+    font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)));
+    color: var(--aquamarine);
+    line-height: 1vh;
+    z-index: 999;
+
+}

src/components/P1/Footer/Footer.astro

@@ -1,63 +1,81 @@
 ---
-import React from "react";
-import Grid from "dynamic-react-grid";
 import "./FooterStyles.css";
 ---
 
-<div class="justify-center bg-[black] list-none items-start pl-[5%];">
+<div class="footer-cards">
-    <div class="flex flex-row;" style={{ padding: 15 }}>
+    <div class="footer-card">
-        <Grid row spacing={1}>
-            <Grid>
         <h6>
             <div class="footer-logo"></div>
             <ul>
                 <li class="footer-li">
-                            <span class="footer-email"
+                    <span class="footer-email"></span>contact@lumeweb.com
-                            ></span>contact@lumeweb.com
+                </li><div class="footer-span">
-                        </li>
-                        <li>
                     <span class="footer-h2"
                         >Freedom, privacy, <br />ownership.</span
                     >
-                        </li>
+                </div>
             </ul>
         </h6>
-            </Grid>
+    </div>
-            <Grid>
+    <div class="footer-card">
-                <h5 class="footer-padding">General</h5><br /><h6>
+        <h5
+            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
+            style="padding-left: 0.25em;"
+        >
+            General
+        </h5><br /><h6>
             <li class="footer-li">Home</li>
             <li class="footer-li">Get Started</li>
             <li class="footer-li">Documentation</li>
             <li class="footer-li">Projects</li>
         </h6>
-            </Grid>
+    </div>
-            <Grid>
+    <div class="footer-card">
-                <h5 class="footer-padding">Community</h5><br /><h6>
+        <h5
+            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
+            style="padding-left: 0.25em;"
+        >
+            Community
+        </h5><br /><h6>
             <li class="footer-li">GitHub</li>
             <li class="footer-li">Discord</li>
             <li class="footer-li">Twitter</li>
             <li class="footer-li">facebook</li>
         </h6>
-            </Grid>
+    </div>
-            <Grid>
+    <div class="footer-card">
-                <h5 class="footer-padding">Other</h5><br /><h6>
+        <h5
+            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
+            style="padding-left: 0.25em;"
+        >
+            Ecosystem
+        </h5><br /><h6>
+            <li class="footer-li">Browser</li>
+            <li class="footer-li">Extension</li>
+            <li class="footer-li">Universal Storage</li>
+        </h6>
+    </div>
+    <div class="footer-card">
+        <h5
+            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
+            style="padding-left: 0.25em;"
+        >
+            Other
+        </h5><br /><h6>
             <li class="footer-li">BrowserUniversal</li>
             <li class="footer-li">Storage</li>
         </h6>
-            </Grid>
+    </div>
-            <Grid>
+    <div class="footer-card">
-                <h5 class="footer-padding">Other</h5><br /><h6>
+        <h5
-                    <li class="footer-li">BrowserUniversal</li>
+            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
-                    <li class="footer-li">Storage</li>
+            style="padding-left: 0.25em;"
-                </h6>
+        >
-            </Grid>
+            Support Us
-            <Grid>
+        </h5><br /><h6>
-                <h5 class="footer-padding">Support Us</h5><br /><h6>
             <li class="footer-li">Donate</li>
             <li class="footer-li">Download App</li>
             <li class="footer-li">Partnerships</li>
         </h6>
-            </Grid>
-        </Grid>
     </div>
 </div>

src/components/P1/Footer/FooterStyles.css

@@ -1,51 +1,6 @@
-.footer-logo {
+.footer-card {
-    background-image: url('../../../assets/lume-logo.webp');
+    height: auto;
-    background-repeat: no-repeat;
+    background-color: #020E10;
-    background-size: contain;
-    margin-left: 5px;
-    height: 55px;
-    min-width: 150px;
-    display: inline-block;
-    text-align: left;
-    margin-inline: 5px;
-    margin-top: 3vh;
-    z-index: 998 !important;
-}
-
-.footer-email {
-    background-image: url('../../../assets/email-icon.webp');
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-    padding-inline: 10px;
-    margin-inline: 10px;
-    height: 14px;
-    object-fit: cover;
-    width: 17px;
-}
-
-.footer-column {
-    justify-content: center;
-    background-color: black;
-    list-style-type: none;
-    align-items: flex-start;
-    vertical-align: center;
-    padding-inline: 1%;
-    padding-left: 5%;
-}
-
-.footer-container {
-    display: flex;
-    flex-direction: row;
-}
-
-.footer-padding {
-    display: inline-block;
-    text-align: left;
-    font-family: var(--font-family-jaldi);
-    font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
-    margin-inline: 5px;
-    margin-top: 5vh;
 }
 
 .footer-li {
@@ -57,12 +12,70 @@
     padding-left: 0;
     line-height: 1px;
     margin-inline: 5px;
+    list-style-type: none;
+}
+
+.footer-cards {
+    margin: 0 auto;
+    display: grid;
+    gap: 1rem;
+    padding: 5% 11.5%;
+    background-color: #020E10;
+    height: auto;
+}
+
+@media (min-width: 600px) {
+    .footer-cards {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1rem;
+    }
+}
+
+@media (min-width: 900px) {
+    .footer-cards {
+        grid-template-columns: repeat(6, 1fr);
+    }
+}
+
+.footer-logo {
+    background-image: url(../../../assets/lume-logo.webp);
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 55px;
+    min-width: 100px;
+    display: inline-block;
+    text-align: left;
+    z-index: 998 !important;
+}
+
+.footer-email {
+    background-image: url(../../../assets/email-icon.webp);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: left;
+    padding-inline: 10px;
+    height: 14px;
+    object-fit: cover;
+    width: 17px;
 }
 
 .footer-h2 {
-    font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)));
+    font-size: calc(15px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
     color: var(--aquamarine);
     line-height: 1vh;
     z-index: 999;
-
+    margin-top: 5em;
+}
+
+.footer-padding {
+    display: inline-block;
+    text-align: left;
+    font-family: var(--font-family-jaldi);
+    font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
+    margin-inline: -5px;
+    margin-top: 5vh;
+}
+
+.footer-span {
+    margin-top: 1em;
 }

src/components/P1/Grid/Grid.astro

@@ -2,8 +2,10 @@
 import "./GridStyles.css";
 ---
 
-<div class="grid-grid">
+<div class="cards">
-    <div class="top-left bordered">
+    <div
+        class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
+    >
         <h5
             class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
         >
@@ -15,7 +17,9 @@ import "./GridStyles.css";
             cloud. Enjoy portability to any device or platform you wish.
         </h6>
     </div>
-    <div class="top-mid bordered">
+    <div
+        class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
+    >
         <h5
             class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
         >
@@ -27,7 +31,9 @@ import "./GridStyles.css";
             Web3 internet on Opera, Vivaldi, Edge, and Firefox.
         </h6>
     </div>
-    <div class="top-right bordered">
+    <div
+        class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
+    >
         <h5
             class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
         >
@@ -39,7 +45,9 @@ import "./GridStyles.css";
             like you are on the Web2 internet.
         </h6>
     </div>
-    <div class="bot-left bordered">
+    <div
+        class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
+    >
         <h5
             class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
         >
@@ -51,7 +59,9 @@ import "./GridStyles.css";
             cloud. Enjoy portability to any device or platform you wish.
         </h6>
     </div>
-    <div class="bot-mid bordered">
+    <div
+        class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
+    >
         <h5
             class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
         >
@@ -63,7 +73,9 @@ import "./GridStyles.css";
             Web3 internet on Opera, Vivaldi, Edge, and Firefox.
         </h6>
     </div>
-    <div class="bot-right bordered">
+    <div
+        class="text-[white] h-[314.89px] p-8 bg-[color:var(--blue-charcoal)] transition-[0.3s] m-[0.5em] rounded-[5px] border-2 border-solid border-transparent hover:border-[color:var(--aquamarine)] hover:transition-[0.1s] hover:rounded-[5px] hover:border-2 hover:border-solid flex justify-center flex-col"
+    >
         <h5
             class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
         >

src/components/P1/Grid/GridStyles.css

@@ -1,56 +1,18 @@
-.grid-grid {
+.cards {
+    max-width: 1200px;
+    margin: 10vh auto;
     display: grid;
-    grid:
+    gap: 1rem;
-        "top-left top-mid top-right" 5% "bot-left bot-mid bot-right" 5% / 25% 25% 25%;
-    gap: 44.5% 0.5%;
-    margin-block: 15vh;
-    grid-auto-flow: row;
-    justify-content: center;
-    align-content: center;
-    justify-items: center;
-    align-items: center;
 }
 
-.top-left {
+@media (width >=600px) {
-    grid-area: top-left;
+    .cards {
-    padding: 30px;
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
 
-.top-mid {
+@media (width >=900px) {
-    grid-area: top-mid;
+    .cards {
-    padding: 30px;
+        grid-template-columns: repeat(3, 1fr);
-}
+    }
-
-.top-right {
-    grid-area: top-right;
-    padding: 30px;
-}
-
-.bot-left {
-    grid-area: bot-left;
-    padding: 30px;
-}
-
-.bot-mid {
-    grid-area: bot-mid;
-    padding: 30px;
-}
-
-.bot-right {
-    grid-area: bot-right;
-    padding: 30px;
-}
-
-.bordered {
-    border: 2px solid transparent;
-    border-radius: 5px;
-    background-color: var(--blue-charcoal);
-    transition: 0.3s;
-    margin: 0.5em;
-}
-
-.bordered:hover {
-    border: 2px solid var(--aquamarine);
-    border-radius: 5px;
-    transition: 0.1s;
 }

src/components/P1/Message/MessageStyles.css

@@ -6,8 +6,7 @@
     gap: 7px;
     min-height: 237px;
     padding: 5% 12%;
-    width: 120%;
+    width: 100%;
-    margin-left: -1em;
 }
 
 .message-header {