home page rework complete, continue work on further components
This commit is contained in:
parent
05eb109938
commit
076ae962a1
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 434 B |
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
|
|
@ -1,4 +1,5 @@
|
|||
@import "../../styles/mixins.scss";
|
||||
@import "../../styles/colors.scss";
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
|
|
@ -6,8 +7,9 @@ footer {
|
|||
padding-top: 3.16%;
|
||||
padding-bottom: 4.61%;
|
||||
@include fluid-padding-lr;
|
||||
font-family: var(--font-family-jaldi);
|
||||
@include fluid-font-size(1.3125rem);
|
||||
background: var(--blue-charcoal);
|
||||
background: $body-bg-darker;
|
||||
|
||||
> div {
|
||||
flex-basis: 0;
|
||||
|
|
@ -36,7 +38,6 @@ footer {
|
|||
}
|
||||
|
||||
li {
|
||||
font-family: var(--font-family-jaldi);
|
||||
line-height: 138%;
|
||||
color: var(--cloud);
|
||||
list-style-type: none;
|
||||
|
|
@ -52,7 +53,6 @@ footer {
|
|||
|
||||
.footer-contact {
|
||||
margin: auto 0;
|
||||
font-family: var(--font-family-jaldi);
|
||||
color: var(--cloud);
|
||||
|
||||
a {
|
||||
|
|
@ -71,9 +71,10 @@ footer {
|
|||
|
||||
.footer-phrase {
|
||||
margin: auto 0 0;
|
||||
color: var(--aquamarine);
|
||||
font-family: var(--font-family-jetbrains-mono);
|
||||
font-weight: bold;
|
||||
line-height: 133%;
|
||||
color: var(--aquamarine);
|
||||
}
|
||||
|
||||
@media screen and (width >= 48rem) and (width < 64rem) {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,21 @@
|
|||
---
|
||||
import "./CTOStyles.css";
|
||||
import './CTO.scss';
|
||||
import ctoAvatar from '../../../assets/cto-avatar.webp';
|
||||
---
|
||||
|
||||
<div class="cto-container w-full transition-[0.5s];">
|
||||
<div class="cto-geometric-bg">
|
||||
<div class="cto-shadow w-full transition-[0.5s] rounded-[72.5px];">
|
||||
<span id="cto"></span>
|
||||
<div class="w-full transition-[0.5s] rounded-[72.5px];">
|
||||
<h2
|
||||
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
|
||||
>
|
||||
community-powered
|
||||
</h2>
|
||||
<h3
|
||||
class="left meme-bp text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
|
||||
>
|
||||
Building a new world <wbr /> for your data
|
||||
</h3>
|
||||
<h4
|
||||
class="left rounded-[15px] text-[calc(15px_+_(21_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] text-[length:var(--font-size-m)] font-normal not-italic max-w-[550px] leading-[35px] mt-[0.5em]"
|
||||
>
|
||||
Right now, Lume has only one full-time developer and limited
|
||||
helper staff! We need help from developers, fundraisers,
|
||||
funders, and contributors to bring the new internet to the
|
||||
masses.
|
||||
</h4>
|
||||
<div class="cto-mini-bio">
|
||||
<div class="cto-info">
|
||||
<h5>Derrick Hammer</h5>
|
||||
<h6>CTO</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section id="home-cto">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
<p>
|
||||
Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses.
|
||||
</p>
|
||||
<div class="bio">
|
||||
<img src={ctoAvatar.src} />
|
||||
<div>
|
||||
<strong>Derrick Hammer</strong><br />
|
||||
CTO
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
@import "../../../styles/colors.scss";
|
||||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#home-cto {
|
||||
min-height: 28em;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
background-image: url("../../../assets/geometric-bg.webp");
|
||||
background-position: 99% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
> div {
|
||||
@include fluid-margin-lr;
|
||||
max-width: 28em;
|
||||
padding: 3.14em 0;
|
||||
}
|
||||
|
||||
.bio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1.57em;
|
||||
gap: 1.33em;
|
||||
font-family: var(--font-family-jaldi);
|
||||
color: var(--cloud);
|
||||
|
||||
img {
|
||||
@include fluid-width-height(5.875rem, 5.875rem);
|
||||
}
|
||||
|
||||
strong {
|
||||
@include fluid-font-size(1.625rem);
|
||||
line-height: 133%;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width < 80rem) {
|
||||
p {
|
||||
background: rgba($body-bg, 0.65);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
.cto-geometric-bg {
|
||||
background-image: url('../../../assets/geometric-bg.webp');
|
||||
background-position: 75vh -2vh;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
height: 588px;
|
||||
width: 100%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cto-mini-bio {
|
||||
height: 96px;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../../../assets/cto-avatar.webp');
|
||||
margin-top: 3vh;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.cto-info {
|
||||
margin-left: 7em;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cto-translucent {
|
||||
background-color: #020e10ac;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
@media screen and (width >0px) and (width <=600px) {
|
||||
.cto-container {
|
||||
background-position: 100px 50px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
transition: 0.5s;
|
||||
justify-content: center;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.cto-bp {
|
||||
padding-right: 0%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.shadowdrop {
|
||||
border-radius: 72.5px;
|
||||
box-shadow: 4px 4px #00000040;
|
||||
transition: 0.5s;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cto-shadow {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
vertical-align: center;
|
||||
padding-left: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width >=601px) {
|
||||
.cto-container {
|
||||
background-position: 100px 50px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
transition: 0.5s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cto-bp {
|
||||
padding-right: 0%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.cto-shadow {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
vertical-align: center;
|
||||
padding-inline: 12%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
---
|
||||
import "./Meme.scss";
|
||||
|
||||
import './Meme.scss';
|
||||
import meme1 from '../../../assets/meme-1.png';
|
||||
import meme2 from '../../../assets/meme-2.png';
|
||||
import meme3 from '../../../assets/meme-3.png';
|
||||
import meme4 from '../../../assets/meme-4.png';
|
||||
---
|
||||
|
||||
<div id="home-meme" class="tilted-bg">
|
||||
<section id="home-meme" class="tilted-bg">
|
||||
<div class="meme-text feature-group">
|
||||
<h2>TITLE</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
|
|
@ -36,4 +35,4 @@ import meme4 from '../../../assets/meme-4.png';
|
|||
Web3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -18,23 +18,24 @@
|
|||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
gap: 1rem;
|
||||
max-width: 31.25rem;
|
||||
max-width: 22em;
|
||||
|
||||
img {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
> div {
|
||||
color: var(--aquamarine);
|
||||
font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)) / 2.5);
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--aquamarine);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <=900px) {
|
||||
@media screen and (width < 48rem) {
|
||||
#home-meme {
|
||||
flex-direction: column;
|
||||
padding: 20% 8%;
|
||||
|
|
|
|||
|
|
@ -25,4 +25,4 @@
|
|||
@include fluid-font-size(1.3125rem);
|
||||
line-height: 157%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import "./PoweredBy.scss";
|
||||
import siaLogo from "../../../assets/sia-logo.webp";
|
||||
import hnsLogo from "../../../assets/hsn-logo.webp";
|
||||
import osiLogo from "../../../assets/osi-logo.webp";
|
||||
import './PoweredBy.scss';
|
||||
import siaLogo from '../../../assets/sia-logo.webp';
|
||||
import hnsLogo from '../../../assets/hsn-logo.webp';
|
||||
import osiLogo from '../../../assets/osi-logo.webp';
|
||||
---
|
||||
|
||||
<section id="home-powered-by">
|
||||
|
|
@ -12,4 +12,4 @@ import osiLogo from "../../../assets/osi-logo.webp";
|
|||
<img src={hnsLogo.src} class="hns-logo" />
|
||||
<img src={osiLogo.src} class="osi-logo" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,17 @@
|
|||
---
|
||||
import "./SocialsStyles.css";
|
||||
import './Socials.scss';
|
||||
import githubLogo from '../../../assets/github-logo.webp';
|
||||
import discordLogo from '../../../assets/discord-logo.webp';
|
||||
import twitterLogo from '../../../assets/twitter-logo.webp';
|
||||
import facebookLogo from '../../../assets/facebook-logo.webp';
|
||||
---
|
||||
|
||||
<div class="grid place-items-center overflow-hidden h-auto my-[115px]">
|
||||
<div>
|
||||
<h2
|
||||
class="centered grid place-items-center overflow-hidden h-auto mt-[35px] mb-[1.5vh] text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
|
||||
>
|
||||
get in touch
|
||||
</h2>
|
||||
<div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
|
||||
<div class="flex ml-[-5%] pb-[8vh]">
|
||||
<div class="github"></div>
|
||||
<div class="discord"></div>
|
||||
<div class="twitter"></div>
|
||||
<div class="fb"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section id="home-socials">
|
||||
<h2>Get in touch</h2>
|
||||
<div>
|
||||
<img src={githubLogo.src} class="github-logo" />
|
||||
<img src={discordLogo.src} class="discord-logo" />
|
||||
<img src={twitterLogo.src} class="twitter-logo" />
|
||||
<img src={facebookLogo.src} class="facebook-logo" />
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#home-socials {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.5em;
|
||||
margin: 5em 0 4.25em;
|
||||
@include fluid-font-size(1.25rem);
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5em;
|
||||
padding: 0.375em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: var(--aquamarine);
|
||||
}
|
||||
|
||||
.github-logo {
|
||||
@include fluid-width-height(4.375rem, 4.375rem);
|
||||
}
|
||||
|
||||
.discord-logo {
|
||||
@include fluid-width-height(4.3125rem, 4.375rem);
|
||||
}
|
||||
|
||||
.twitter-logo {
|
||||
@include fluid-width-height(4.375rem, 4.375rem);
|
||||
}
|
||||
|
||||
.facebook-logo {
|
||||
@include fluid-width-height(3.75rem, 3.75rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.socials-wrapper {
|
||||
display: flex;
|
||||
margin-left: -5%;
|
||||
padding-bottom: 5vh;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.github {
|
||||
background-image: url('../../../assets/github-logo.webp');
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 48.3px;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.discord {
|
||||
background-image: url('../../../assets/discord-logo.webp');
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 48.3px;
|
||||
width: 48.3px;
|
||||
margin-top: 0.4vh;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.twitter {
|
||||
background-image: url('../../../assets/twitter-logo.webp');
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 48.3px;
|
||||
width: 55px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.fb {
|
||||
background-image: url('../../../assets/fb-logo.webp');
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 0.5vh;
|
||||
height: 42px;
|
||||
width: 50px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
import "./Vision.scss";
|
||||
---
|
||||
|
||||
<section id="home-vision" class="feature-group">
|
||||
<div>
|
||||
<section id="home-vision">
|
||||
<div class="feature-group">
|
||||
<h2>Our Vision</h2>
|
||||
<h3>Make Web3 easy for everyone</h3>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@
|
|||
@media screen and (width < 80rem) {
|
||||
p {
|
||||
background: rgba($body-bg, 0.65);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.5em 0.5em;
|
||||
margin: -0.5em -0.5em;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@ import "./WhatIsWeb3.scss";
|
|||
---
|
||||
|
||||
<section id="home-whatisweb3" class="tilted-bg">
|
||||
<div class="background"></div>
|
||||
<div class="feature-group">
|
||||
<h2>
|
||||
What is the Web?
|
||||
</h2>
|
||||
<h3>
|
||||
Why Web3 matters
|
||||
</h3>
|
||||
<p>
|
||||
Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition from Web2 to Web3, which matters for privacy and security.
|
||||
</p>
|
||||
<div>
|
||||
<a href="#" class="btn-main">Learn More</a>
|
||||
</div>
|
||||
<div class="background"></div>
|
||||
<div class="feature-group">
|
||||
<h2>
|
||||
What is the Web?
|
||||
</h2>
|
||||
<h3>
|
||||
Why Web3 matters
|
||||
</h3>
|
||||
<p>
|
||||
Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition from Web2 to Web3, which matters for privacy and security.
|
||||
</p>
|
||||
<div>
|
||||
<a href="#" class="btn-main">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
width: 100%;
|
||||
height: 38.9em;
|
||||
max-width: 30.34em;
|
||||
margin: -19em 0 0;
|
||||
margin: -19.25em 0 0;
|
||||
background-image: url("../../../src/assets/img-left.webp");
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -60,9 +60,9 @@
|
|||
@media screen and (width < 80rem) {
|
||||
p {
|
||||
background: rgba(2, 13, 17, 0.65);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.5em 0.5em;
|
||||
margin: -0.5em -0.5em;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
import './JoinCommunity.scss';
|
||||
---
|
||||
|
||||
<section id="join-community">
|
||||
<h2>
|
||||
Join our community, lend a hand.
|
||||
</h2>
|
||||
<p>
|
||||
Web3 gives people control over their data, privacy, and ownership.
|
||||
</p>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
@import "../../styles/mixins.scss";
|
||||
|
||||
#join-community {
|
||||
padding-top: 3.16%;
|
||||
padding-bottom: 3.16%;
|
||||
@include fluid-padding-lr;
|
||||
background: var(--aquamarine);
|
||||
color: var(--blue-charcoal);
|
||||
|
||||
@media screen and (width < 48rem) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.25em;
|
||||
@include fluid-font-size(2rem);
|
||||
font-weight: 700;
|
||||
line-height: 153%;
|
||||
text-transform: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--font-family-jaldi);
|
||||
@include fluid-font-size(1.3125rem);
|
||||
line-height: 157%;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ function Navbar({ view }) {
|
|||
const onResize = () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
if(nav && window.innerWidth > 940) {
|
||||
if(nav && window.innerWidth >= 768) {
|
||||
setNav(false);
|
||||
}
|
||||
}, 25);
|
||||
|
|
@ -37,13 +37,13 @@ function Navbar({ view }) {
|
|||
<a href="/vision" className={view === 'vision' ? 'underline' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/what-is-web3" className={view === 'what-is-web3' ? 'underline' : undefined} aria-current={view === 'what-is-web3' ? 'page' : undefined}>What is Web3</a>
|
||||
<a href="/what-is-web3" className={view === 'what' ? 'underline' : undefined} aria-current={view === 'what' ? 'page' : undefined}>What is Web3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/donate" className={view === 'donate' ? 'underline' : undefined} aria-current={view === 'donate' ? 'page' : undefined}>Donate</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className='btn-main download-btn' href="#">Download Extension</a>
|
||||
<a className="btn-main download-btn" href="#">Download Extension</a>
|
||||
</li>
|
||||
</menu>
|
||||
<button className="hamburger" onClick={toggleNav}>☰</button>
|
||||
|
|
|
|||
|
|
@ -33,13 +33,13 @@ menu {
|
|||
|
||||
.hamburger {
|
||||
display: none;
|
||||
font-size: var(--font-size-xxl);
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
margin: 0 2.125rem;
|
||||
}
|
||||
|
||||
@media screen and (width < 768px) {
|
||||
@media screen and (width < 48rem) {
|
||||
menu {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
---
|
||||
import "./CommunityPower.scss";
|
||||
import communityPower from "../../../../src/assets/community-power.png";
|
||||
import './CommunityPower.scss';
|
||||
---
|
||||
|
||||
<section id="community-power">
|
||||
<div class="community-power-wrapper">
|
||||
<div class="community-power-description"></div>
|
||||
<section id="vision-community-power">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
<p>
|
||||
Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,32 @@
|
|||
#community-power {
|
||||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/colors.scss";
|
||||
|
||||
#vision-community-power {
|
||||
position: relative;
|
||||
background-image: url("../../../assets/community-power-bg.png");
|
||||
margin-top: 7.8125rem;
|
||||
background-size: max(75rem, 100%);
|
||||
background-position: right;
|
||||
padding-top: max(29.25rem, 39.02%);
|
||||
@include fluid-font-size(1.3125rem);
|
||||
|
||||
.feature-group {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include fluid-margin-lr;
|
||||
max-width: 27em;
|
||||
}
|
||||
|
||||
@media screen and (width < 80rem) {
|
||||
p {
|
||||
background: rgba($body-bg-darker, 0.65);
|
||||
border-radius: 0.5em;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import "./Grid.scss";
|
||||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<section id="vision-grid" class="feature-grid">
|
||||
|
|
|
|||
|
|
@ -10,8 +10,10 @@
|
|||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--font-family-jetbrains-mono);
|
||||
@include fluid-font-size(2.75rem);
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
line-height: 129.55%;
|
||||
color: var(--aquamarine);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import "./Jumbotron.scss";
|
||||
import './Jumbotron.scss';
|
||||
---
|
||||
|
||||
<section id="vision-jumbotron">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/colors.scss";
|
||||
|
||||
#vision-jumbotron {
|
||||
display: flex;
|
||||
|
|
@ -9,8 +10,9 @@
|
|||
margin: 2.12em 7.5% 0;
|
||||
font-family: var(--font-family-ibm-plex-sans-devanagari);
|
||||
@include fluid-font-size-s(3.6875rem);
|
||||
line-height: 137.29%;
|
||||
line-height: 137%;
|
||||
letter-spacing: -0.06em;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import './Astronaut.scss';
|
||||
---
|
||||
|
||||
<section id="what-astronaut">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Re-defining Web3, for the good of all</h3>
|
||||
<p>
|
||||
Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses. Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses.
|
||||
</p>
|
||||
<div>
|
||||
<a href="#" class="btn-main">Contribute to our cause</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
@import "../../../styles/colors.scss";
|
||||
@import "../../../styles/mixins.scss";
|
||||
|
||||
#what-astronaut {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5rem;
|
||||
min-height: 36.72em;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
background-image: url("../../../assets/astronaut.png");
|
||||
background-position: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
> div {
|
||||
@include fluid-margin-lr;
|
||||
max-width: 30em;
|
||||
padding: 3.14em 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (width < 80rem) {
|
||||
p {
|
||||
background: rgba($body-bg-darker, 0.65);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<section id="what-grid" class="feature-grid">
|
||||
<div>
|
||||
<h3>Build Your Site, Censorship Free</h3>
|
||||
<p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Universal Storage</h3>
|
||||
<p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Gateway</h3>
|
||||
<p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Build Your Site, Censorship Free</h3>
|
||||
<p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Universal Storage</h3>
|
||||
<p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Gateway</h3>
|
||||
<p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
#what-grid {
|
||||
padding-top: 5.5em;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import './Jumbotron.scss';
|
||||
---
|
||||
|
||||
<section id="what-jumbotron">
|
||||
<h1>
|
||||
A new web that is fair and accessible to all, where each user can have a say in its infrastructure.
|
||||
</h1>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/colors.scss";
|
||||
|
||||
#what-jumbotron {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
h1 {
|
||||
max-width: 21em;
|
||||
margin: 2.12em 7.5% 0;
|
||||
font-family: var(--font-family-ibm-plex-sans-devanagari);
|
||||
@include fluid-font-size-s(3.6875rem);
|
||||
line-height: 137%;
|
||||
letter-spacing: -0.06em;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
---
|
||||
import "../styles/global.scss";
|
||||
import Navbar from "../components/Navbar/Navbar.jsx";
|
||||
import Footer from "../components/Footer/Footer.astro";
|
||||
import '../styles/global.scss';
|
||||
import Navbar from '../components/Navbar/Navbar.jsx';
|
||||
import Footer from '../components/Footer/Footer.astro';
|
||||
import JoinCommunity from '../components/JoinCommunity/JoinCommunity.astro';
|
||||
|
||||
export interface Props {
|
||||
view: string;
|
||||
|
|
@ -25,6 +26,7 @@ const { view, title } = Astro.props;
|
|||
<main class={view}>
|
||||
<slot />
|
||||
</main>
|
||||
{view !== 'home' && <JoinCommunity />}
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import CTO from "../components/Home/CTO/CTO.astro";
|
||||
import Grids from "../components/Home/Grid/Grid.astro";
|
||||
import Header from "../components/Home/Header/Header.astro";
|
||||
import Meme from "../components/Home/Meme/Meme.astro";
|
||||
import Message from "../components/Home/Message/Message.astro";
|
||||
import PoweredBy from "../components/Home/PoweredBy/PoweredBy.astro";
|
||||
import Socials from "../components/Home/Socials/Socials.astro";
|
||||
import Vision from "../components/Home/Vision/Vision.astro";
|
||||
import WhatIsWeb3 from "../components/Home/WhatIsWeb3/WhatIsWeb3.astro";
|
||||
import CTO from '../components/Home/CTO/CTO.astro';
|
||||
import Grids from '../components/Home/Grid/Grid.astro';
|
||||
import Header from '../components/Home/Header/Header.astro';
|
||||
import Meme from '../components/Home/Meme/Meme.astro';
|
||||
import Message from '../components/Home/Message/Message.astro';
|
||||
import PoweredBy from '../components/Home/PoweredBy/PoweredBy.astro';
|
||||
import Socials from '../components/Home/Socials/Socials.astro';
|
||||
import Vision from '../components/Home/Vision/Vision.astro';
|
||||
import WhatIsWeb3 from '../components/Home/WhatIsWeb3/WhatIsWeb3.astro';
|
||||
---
|
||||
|
||||
<Layout view="home" title="Lume Web - Web3 for the masses">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Jumbotron from "../components/Vision/Jumbotron/Jumbotron.astro";
|
||||
import CommunityPower from "../components/Vision/CommunityPower/CommunityPower.astro";
|
||||
import Grid from "../components/Vision/Grid/Grid.astro";
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Jumbotron from '../components/Vision/Jumbotron/Jumbotron.astro';
|
||||
import CommunityPower from '../components/Vision/CommunityPower/CommunityPower.astro';
|
||||
import Grid from '../components/Vision/Grid/Grid.astro';
|
||||
---
|
||||
|
||||
<Layout view="vision" title="Vision - Lume Web">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Jumbotron from '../components/What/Jumbotron/Jumbotron.astro';
|
||||
import Grid from '../components/What/Grid/Grid.astro';
|
||||
import Astronaut from '../components/What/Astronaut/Astronaut.astro';
|
||||
---
|
||||
|
||||
<Layout view="what-is-web3" title="What is Web3? - Lume Web">
|
||||
|
||||
<Layout view="what" title="What is Web3? - Lume Web">
|
||||
<Jumbotron />
|
||||
<Grid />
|
||||
<Astronaut />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$body-bg: #031418;
|
||||
$body-bg-darker: #020d11;
|
||||
$body-bg-darker: #020e10;
|
||||
|
||||
$primary-dark: #000;
|
||||
$primary-light: #fff;
|
||||
|
|
|
|||
|
|
@ -8,22 +8,13 @@
|
|||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--primary-dark: #000;
|
||||
--primary-light: #fff;
|
||||
--black: rgba(0 0 0);
|
||||
--white: rgba(255 255 255);
|
||||
--blue-charcoal: #010e10;
|
||||
--blue-charcoal-2: rgba(3 21 24);
|
||||
--aquamarine: rgba(122 252 187);
|
||||
--cloud: rgba(199 199 199);
|
||||
--alto: rgba(217 217 217);
|
||||
--white: rgba(255 255 255);
|
||||
--font-size-s: 10.25rem; /* 20px */
|
||||
--font-size-m: 1.3125rem; /* 21px */
|
||||
--font-size-l: 1.5625rem; /* 25px */
|
||||
--font-size-xl: 1.875rem; /* 30px */
|
||||
--font-size-xxl: 2rem; /* 32px */
|
||||
--font-size-xxxl: 2.8125rem; /* 45px */
|
||||
--font-size-xxxxl: 6.25rem; /* 100px */
|
||||
--font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
|
||||
--font-family-jaldi: "Jaldi";
|
||||
--font-family-jetbrains-mono: "JetBrains Mono";
|
||||
|
|
@ -44,9 +35,11 @@ body {
|
|||
font-family: "JetBrains Mono", sans-serif;
|
||||
background: $body-bg;
|
||||
color: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
@include fluid-font-size(0.0625rem);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
@ -54,73 +47,6 @@ a {
|
|||
transition: color 200ms;
|
||||
}
|
||||
|
||||
.body-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 78px;
|
||||
}
|
||||
|
||||
.centered {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
margin-bottom: 1.5vh;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 57px;
|
||||
letter-spacing: -1.5px;
|
||||
line-height: 102px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fluid-font(1rem, 2rem); /* 16px - 32px */
|
||||
color: var(--aquamarine);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--cloud);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
max-width: 550px;
|
||||
margin-top: 0.5em;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: calc(15px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--white);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
max-width: 300;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: calc(15px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--cloud);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
max-width: 300;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1240px;
|
||||
margin: auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
display: inline-block;
|
||||
color: var(--black);
|
||||
|
|
@ -136,50 +62,37 @@ h6 {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 1050px) {
|
||||
.left {
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.h2-alignment {
|
||||
margin-left: -10em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: calc(20px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--white);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
max-width: 300;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: calc(17px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
|
||||
color: var(--cloud);
|
||||
font-family: var(--font-family-jaldi);
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
max-width: 300;
|
||||
}
|
||||
}
|
||||
|
||||
main.vision {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1031px;
|
||||
height: 733px;
|
||||
width: max(min(1031em, 100vw), 320em);
|
||||
height: max(min(733em, 100vw), 400em);
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -515.5px;
|
||||
margin-left: max(-515.5em, -50vw);
|
||||
z-index: -1;
|
||||
background: url(../assets/vision-bg.png);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
main.what {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: max(min(1513em, 100vw), 320em);
|
||||
height: max(min(1224em, 100vw), 560em);
|
||||
top: -20em;
|
||||
left: 50%;
|
||||
margin-left: max(-756.5em, -50vw);
|
||||
z-index: -1;
|
||||
background: url(../assets/what-bg.png);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -187,7 +100,6 @@ main.vision {
|
|||
h2 {
|
||||
margin-bottom: 1em;
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: var(--aquamarine);
|
||||
|
|
@ -196,10 +108,14 @@ main.vision {
|
|||
h3 {
|
||||
margin-bottom: 0.65em;
|
||||
@include fluid-font-size(2.8125rem);
|
||||
font-weight: 700;
|
||||
line-height: 109%;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
font-weight: 700;
|
||||
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--font-family-jaldi);
|
||||
line-height: 167%;
|
||||
|
|
@ -267,7 +183,7 @@ main.vision {
|
|||
top: 0;
|
||||
right: -5%;
|
||||
bottom: 0;
|
||||
left: -5%;
|
||||
left: -25%;
|
||||
margin: 2% 0;
|
||||
background: $body-bg-darker;
|
||||
transform: matrix(1, -0.04, 0.04, 1, 0, 0);
|
||||
|
|
|
|||
Loading…
Reference in New Issue