LumeWeb
/
lumeweb.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

grid fix

This commit is contained in:
roryjshelton 2023-05-06 18:35:54 +02:00
parent 41afba6daf
commit 152f22ee27
9 changed files with 300 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/components/.DS_Store vendored
View File

Binary file not shown.

BIN
src/components/P1/.DS_Store vendored
View File

Binary file not shown.

63
src/components/P1/Footer/1 Footer.astro.BACKUP Normal file
View File

@ -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>

68
src/components/P1/Footer/1 FooterStyles.css.BACKUP.css Normal file
View File

@ -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;
}

132
src/components/P1/Footer/Footer.astro
View File

@ -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>
<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 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><div class="footer-span">
<span class="footer-h2"
>Freedom, privacy, <br />ownership.</span
>
</div>
</ul>
</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>
</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>
</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>
</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>
</div>
</div>

113
src/components/P1/Footer/FooterStyles.css
View File

@ -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;
}

26
src/components/P1/Grid/Grid.astro
View File

@ -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;"
>

62
src/components/P1/Grid/GridStyles.css
View File

@ -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);
}
}

3
src/components/P1/Message/MessageStyles.css
View File

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