feat: create two remaining components, optimize layout and existing components (wip)

This commit is contained in:
cymon 2023-06-05 22:44:30 +00:00
parent 20a99a65d8
commit b6f8d567ba
29 changed files with 238 additions and 56 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 181 KiB

View File

@ -33,7 +33,7 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL
<div> <div>
<h2>Donate Cryptocurrency</h2> <h2>Donate Cryptocurrency</h2>
<div class="method-grid"> <div class="method-grid">
{currencies.map(async currency => ( {currencies.map(currency => (
<div id={'donate-' + currency.id}> <div id={'donate-' + currency.id}>
<div> <div>
<Fragment set:html={currency.svgLogo.default} /> <Fragment set:html={currency.svgLogo.default} />

View File

@ -71,6 +71,7 @@
div { div {
order: 1; order: 1;
flex-grow: 1;
position: relative; position: relative;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
word-break: break-all; word-break: break-all;
@ -112,12 +113,12 @@
top: 0; top: 0;
right: -0.5em; right: -0.5em;
padding: 0 0.5em; padding: 0 0.5em;
background: $color-blue-charcoal; background: rgba($color-blue-charcoal, 0.75);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
color: $color-white; color: $color-white;
border-radius: 0.5em 0 0 0.5em; border-radius: 0.5em 0 0 0.5em;
animation: $transition-duration overlay-opacity forwards; animation: $transition-duration hint-opacity forwards;
transition: color $transition-duration; transition: color $transition-duration;
} }
} }
@ -274,3 +275,13 @@
opacity: 0.75; opacity: 0.75;
} }
} }
@keyframes hint-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

View File

@ -29,7 +29,7 @@
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {
ul, p { ul, p {
background: rgba($color-body-bg, 0.65); background: rgba($color-blue-charcoal-2, 0.65);
} }
ul { ul {

View File

@ -4,17 +4,19 @@ import ctoAvatar from '../../../assets/cto-avatar.webp';
--- ---
<section id="home-cto"> <section id="home-cto">
<div class="feature-group"> <div>
<h2>Community-Powered</h2> <div class="feature-group">
<h3>Building a new world for your data</h3> <h2>Community-Powered</h2>
<p> <h3>Building a new world for your data</h3>
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>
</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.
<div class="bio"> </p>
<img src={ctoAvatar.src} /> <div class="bio">
<div> <img src={ctoAvatar.src} />
<strong>Derrick Hammer</strong><br /> <div>
CTO <strong>Derrick Hammer</strong><br />
CTO
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -2,15 +2,35 @@
@import "../../../styles/vars.scss"; @import "../../../styles/vars.scss";
#home-cto { #home-cto {
min-height: 28em; @include fluid-padding-lr;
@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 { > div {
@include fluid-margin-lr; position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0 auto;
@include fluid-font-size(1.3125rem);
max-width: 75em;
min-height: 28em;
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: min(0rem, calc((100vw - 40rem) / 2));
width: 100%;
min-width: 40rem;
background-image: url("../../../assets/geometric-bg.webp");
background-position: 1%;
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
}
.feature-group {
max-width: 28em; max-width: 28em;
padding: 3.14em 0; padding: 3.14em 0;
} }
@ -36,7 +56,7 @@
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {
p, .bio { p, .bio {
background: rgba($color-body-bg, 0.65); background: rgba($color-blue-charcoal-2, 0.65);
border-radius: 0 0.5em 0.5em 0; border-radius: 0 0.5em 0.5em 0;
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
margin: -0.3em -0.5em; margin: -0.3em -0.5em;

View File

@ -36,7 +36,7 @@
color: $color-alto; color: $color-alto;
&:hover { &:hover {
color: $color-aquamarine; color: $color-white;
} }
} }

View File

@ -28,23 +28,23 @@
color: $color-alto; color: $color-alto;
&:hover { &:hover {
color: $color-aquamarine; color: $color-white;
} }
} }
.github-logo svg { .github-logo svg {
@include fluid-width(4.375rem); @include fluid-width(3.5rem);
} }
.discord-logo svg { .discord-logo svg {
@include fluid-width(4.375rem); @include fluid-width(3.5rem);
} }
.twitter-logo svg { .twitter-logo svg {
@include fluid-width(4.375rem); @include fluid-width(3.5rem);
} }
.facebook-logo svg { .facebook-logo svg {
@include fluid-width(4.375rem); @include fluid-width(3.5rem);
} }
} }

View File

@ -20,7 +20,7 @@
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {
p { p {
background: rgba($color-body-bg, 0.65); background: rgba($color-blue-charcoal-2, 0.65);
border-radius: 0.5em; border-radius: 0.5em;
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
margin: -0.3em -0.5em; margin: -0.3em -0.5em;

View File

@ -3,7 +3,6 @@ import "./WhatIsWeb3.scss";
--- ---
<section id="home-whatisweb3" class="tilted-bg"> <section id="home-whatisweb3" class="tilted-bg">
<div class="background"></div>
<div class="feature-group"> <div class="feature-group">
<h2> <h2>
What is the Web? What is the Web?
@ -15,7 +14,7 @@ import "./WhatIsWeb3.scss";
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. 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> </p>
<div> <div>
<a href="#" class="btn-main">Learn More</a> <a href="/what-is-web3" class="btn-main">Learn More</a>
</div> </div>
</div> </div>
</section> </section>

View File

@ -9,7 +9,8 @@
margin-top: 2.48em; margin-top: 2.48em;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
.background { &::after {
content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: 50%; top: 50%;
@ -22,12 +23,12 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
pointer-events: none; pointer-events: none;
z-index: -1;
} }
.feature-group { .feature-group {
@include fluid-position-left(27.8em, 28em); @include fluid-position-left(27.8em, 28em);
max-width: 28em; max-width: 28em;
z-index: 1;
h1 { h1 {
margin-top: 1em; margin-top: 1em;

View File

@ -31,10 +31,10 @@ footer {
} }
h5 { h5 {
@include fluid-font-size(1.875rem); @include fluid-font-size(1.75rem);
line-height: 100%; line-height: 100%;
white-space: nowrap; white-space: nowrap;
margin: 0.25em 0; margin: 0.3em 0;
} }
li { li {

View File

@ -56,6 +56,11 @@
a { a {
display: block; display: block;
color: #0B3F48;
&:hover {
color: inherit;
}
} }
.github-logo svg { .github-logo svg {

View File

@ -51,16 +51,16 @@ function Navbar({ view }) {
</div> </div>
<menu className={nav ? 'active' : undefined} onClick={onMenuClick}> <menu className={nav ? 'active' : undefined} onClick={onMenuClick}>
<li> <li>
<a href="/" className={view === 'home' ? 'underline' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a> <a href="/" className={view === 'home' ? 'current' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
</li> </li>
<li> <li>
<a href="/vision" className={view === 'vision' ? 'underline' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a> <a href="/vision" className={view === 'vision' ? 'current' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a>
</li> </li>
<li> <li>
<a href="/what-is-web3" className={view === 'what' ? 'underline' : undefined} aria-current={view === 'what' ? 'page' : undefined}>What is Web3</a> <a href="/what-is-web3" className={view === 'what' ? 'current' : undefined} aria-current={view === 'what' ? 'page' : undefined}>What is Web3</a>
</li> </li>
<li> <li>
<a href="/donate" className={view === 'donate' ? 'underline' : undefined} aria-current={view === 'donate' ? 'page' : undefined}>Donate</a> <a href="/donate" className={view === 'donate' ? 'current' : undefined} aria-current={view === 'donate' ? 'page' : undefined}>Donate</a>
</li> </li>
<li> <li>
<a className="btn-main download-btn" href="#">Download Extension</a> <a className="btn-main download-btn" href="#">Download Extension</a>

View File

@ -13,7 +13,7 @@ nav {
flex-shrink: 0; flex-shrink: 0;
img { img {
@include fluid-width-height(13.125rem, 4.375rem); @include fluid-width-height(11.25rem, 3.75rem);
} }
} }
} }
@ -25,10 +25,18 @@ menu {
li > a { li > a {
display: block; display: block;
padding: 0.55em 0.9em; padding: 0.55em 0.9em;
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color $transition-duration;
&.current, &:hover, &:active {
text-decoration-color: inherit;
}
} }
.download-btn { .download-btn {
margin-left: 0.9em; margin-left: 0.9em;
text-decoration: none;
} }
} }
@ -44,8 +52,8 @@ menu {
nav { nav {
position: sticky; position: sticky;
top: 0; top: 0;
background: rgba($color-body-bg, 0.85); background: rgba($color-blue-charcoal-2, 0.85);
z-index: 1; z-index: 2;
} }
menu { menu {
@ -57,7 +65,7 @@ menu {
right: min(-20rem, -100vw); right: min(-20rem, -100vw);
bottom: 0; bottom: 0;
padding: 7.5em 7.5% 1em; padding: 7.5em 7.5% 1em;
background: rgba($color-body-bg, 0.85); background: rgba($color-blue-charcoal-2, 0.85);
transition: right $transition-duration; transition: right $transition-duration;
overflow-y: auto; overflow-y: auto;

View File

@ -1,8 +1,8 @@
--- ---
import './CommunityPower.scss'; import './Community.scss';
--- ---
<section id="vision-community-power"> <section id="vision-community">
<div class="feature-group"> <div class="feature-group">
<h2>Community-Powered</h2> <h2>Community-Powered</h2>
<h3>Building a new world for your data</h3> <h3>Building a new world for your data</h3>

View File

@ -1,7 +1,7 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "../../../styles/vars.scss";
#vision-community-power { #vision-community {
position: relative; position: relative;
background-image: url("../../../assets/community-power-bg.png"); background-image: url("../../../assets/community-power-bg.png");
margin-top: 7.8125rem; margin-top: 7.8125rem;

View File

@ -3,7 +3,7 @@
#vision-grid { #vision-grid {
padding-top: 2.05em; padding-top: 2.05em;
padding-bottom: 4.5em; padding-bottom: 2.05em;
div:first-child { div:first-child {
background: inherit; background: inherit;

View File

@ -0,0 +1,22 @@
---
import './People.scss';
---
<section id="vision-people">
<div class="feature-group">
<h2>Community-Powered</h2>
<h3>All about the people, no VC here.</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>
<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>
<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>
<a href="#" class="btn-main">Contribute to our cause</a>
</div>
</div>
</section>

View File

@ -0,0 +1,43 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#vision-people {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0 auto;
@include fluid-font-size(1.3125rem);
max-width: 88em;
min-height: 28em;
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: min(0rem, calc((100vw - 40rem) / 2));
width: 100%;
min-width: 40rem;
background-image: url("../../../assets/double-brand-bg.png");
background-position: 0;
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
.feature-group {
max-width: 28em;
padding: 4.14em 0;
@include fluid-margin-lr;
}
@media screen and (max-width: 80rem) {
p {
background: rgba($color-blue-charcoal-2, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -10,7 +10,7 @@ import './Astronaut.scss';
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. 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> </p>
<div> <div>
<a href="#" class="btn-main">Contribute to our cause</a> <a href="/donate" class="btn-main">Donate</a>
</div> </div>
</div> </div>
</section> </section>

View File

@ -5,7 +5,6 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 5rem;
min-height: 36.72em; min-height: 36.72em;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
background-image: url("../../../assets/astronaut.png"); background-image: url("../../../assets/astronaut.png");

View File

@ -0,0 +1,15 @@
---
import './Building.scss';
---
<section id="building" class="tilted-bg-r">
<div>
<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>
</div>
</section>

View File

@ -0,0 +1,50 @@
@import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#building {
&::before {
bottom: -12%;
}
> div {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
max-width: 88em;
min-height: 28em;
margin: 0 auto;
@include fluid-font-size(1.3125rem);
&::before {
content: "";
position: absolute;
top: 4%;
bottom: 0;
left: min(0rem, calc((100vw - 40rem) / 2));
width: 100%;
min-width: 40rem;
background-image: url("../../../assets/double-brand-bg.png");
background-position: 0;
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
}
.feature-group {
max-width: 28em;
padding: 7em 0 5em;
@include fluid-margin-lr;
}
@media screen and (max-width: 80rem) {
p {
background: rgba($color-blue-charcoal, 0.65);
border-radius: 0.5em;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;
}
}
}

View File

@ -1,3 +1,4 @@
#what-grid { #what-grid {
padding-top: 5.5em; padding-top: 5.5em;
padding-bottom: 4.5em;
} }

View File

@ -1,12 +1,14 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import Jumbotron from '../components/Vision/Jumbotron/Jumbotron.astro'; import Jumbotron from '../components/Vision/Jumbotron/Jumbotron.astro';
import CommunityPower from '../components/Vision/CommunityPower/CommunityPower.astro'; import Community from '../components/Vision/Community/Community.astro';
import Grid from '../components/Vision/Grid/Grid.astro'; import Grid from '../components/Vision/Grid/Grid.astro';
import People from '../components/Vision/People/People.astro';
--- ---
<Layout view="vision" title="Vision - Lume Web"> <Layout view="vision" title="Vision - Lume Web">
<Jumbotron /> <Jumbotron />
<CommunityPower /> <Community />
<Grid /> <Grid />
<People />
</Layout> </Layout>

View File

@ -2,11 +2,13 @@
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import Jumbotron from '../components/What/Jumbotron/Jumbotron.astro'; import Jumbotron from '../components/What/Jumbotron/Jumbotron.astro';
import Grid from '../components/What/Grid/Grid.astro'; import Grid from '../components/What/Grid/Grid.astro';
import Building from '../components/What/Building/Building.astro';
import Astronaut from '../components/What/Astronaut/Astronaut.astro'; import Astronaut from '../components/What/Astronaut/Astronaut.astro';
--- ---
<Layout view="what" title="What is Web3? - Lume Web"> <Layout view="what" title="What is Web3? - Lume Web">
<Jumbotron /> <Jumbotron />
<Grid /> <Grid />
<Building />
<Astronaut /> <Astronaut />
</Layout> </Layout>

View File

@ -20,7 +20,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: "JetBrains Mono", sans-serif; font-family: "JetBrains Mono", sans-serif;
background: $color-body-bg; background: $color-blue-charcoal-2;
color: $color-white; color: $color-white;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
@ -133,10 +133,13 @@ main.donate {
transition: background $transition-duration; transition: background $transition-duration;
} }
p + p, ul + p {
margin-top: 0.78em;
}
ul { ul {
list-style-type: disc; list-style-type: disc;
margin-left: 1.5em; margin-left: 1.5em;
margin-bottom: 0.78em;
} }
.btn-main { .btn-main {

View File

@ -1,8 +1,7 @@
$color-body-bg: #031418;
$color-black: #000; $color-black: #000;
$color-white: #fff; $color-white: #fff;
$color-blue-charcoal: #020e10; $color-blue-charcoal: #020e10;
$color-blue-charcoal-2: #031518; $color-blue-charcoal-2: #031418;
$color-aquamarine: #7afcbb; $color-aquamarine: #7afcbb;
$color-cloud: #c7c7c7; $color-cloud: #c7c7c7;
$color-alto: #d9d9d9; $color-alto: #d9d9d9;