grid fix
This commit is contained in:
parent
41afba6daf
commit
152f22ee27
Binary file not shown.
Binary file not shown.
|
@ -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>
|
|
@ -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;
|
||||
|
||||
}
|
|
@ -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="flex flex-row;" style={{ padding: 15 }}>
|
||||
<Grid row spacing={1}>
|
||||
<Grid>
|
||||
<div class="footer-cards">
|
||||
<div class="footer-card">
|
||||
<h6>
|
||||
<div class="footer-logo"></div>
|
||||
<ul>
|
||||
<li class="footer-li">
|
||||
<span class="footer-email"
|
||||
></span>contact@lumeweb.com
|
||||
</li>
|
||||
<li>
|
||||
<span class="footer-email"></span>contact@lumeweb.com
|
||||
</li><div class="footer-span">
|
||||
<span class="footer-h2"
|
||||
>Freedom, privacy, <br />ownership.</span
|
||||
>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</h6>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<h5 class="footer-padding">General</h5><br /><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;"
|
||||
>
|
||||
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>
|
||||
</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;"
|
||||
>
|
||||
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>
|
||||
</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;"
|
||||
>
|
||||
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>
|
||||
<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>
|
||||
</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;"
|
||||
>
|
||||
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>
|
||||
|
|
|
@ -1,51 +1,6 @@
|
|||
.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-card {
|
||||
height: auto;
|
||||
background-color: #020E10;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
|
@ -2,8 +2,10 @@
|
|||
import "./GridStyles.css";
|
||||
---
|
||||
|
||||
<div class="grid-grid">
|
||||
<div class="top-left bordered">
|
||||
<div class="cards">
|
||||
<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;"
|
||||
>
|
||||
|
|
|
@ -1,56 +1,18 @@
|
|||
.grid-grid {
|
||||
.cards {
|
||||
max-width: 1200px;
|
||||
margin: 10vh auto;
|
||||
display: grid;
|
||||
grid:
|
||||
"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;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
grid-area: top-left;
|
||||
padding: 30px;
|
||||
@media (width >=600px) {
|
||||
.cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.top-mid {
|
||||
grid-area: top-mid;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
@media (width >=900px) {
|
||||
.cards {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
|
@ -6,8 +6,7 @@
|
|||
gap: 7px;
|
||||
min-height: 237px;
|
||||
padding: 5% 12%;
|
||||
width: 120%;
|
||||
margin-left: -1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
|
|
Loading…
Reference in New Issue