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>
<h2>Donate Cryptocurrency</h2>
<div class="method-grid">
{currencies.map(async currency => (
{currencies.map(currency => (
<div id={'donate-' + currency.id}>
<div>
<Fragment set:html={currency.svgLogo.default} />

View File

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

View File

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

View File

@ -4,6 +4,7 @@ import ctoAvatar from '../../../assets/cto-avatar.webp';
---
<section id="home-cto">
<div>
<div class="feature-group">
<h2>Community-Powered</h2>
<h3>Building a new world for your data</h3>
@ -18,4 +19,5 @@ import ctoAvatar from '../../../assets/cto-avatar.webp';
</div>
</div>
</div>
</div>
</section>

View File

@ -2,15 +2,35 @@
@import "../../../styles/vars.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;
@include fluid-padding-lr;
> 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;
padding: 3.14em 0;
}
@ -36,7 +56,7 @@
@media screen and (max-width: 80rem) {
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;
padding: 0.3em 0.5em;
margin: -0.3em -0.5em;

View File

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

View File

@ -28,23 +28,23 @@
color: $color-alto;
&:hover {
color: $color-aquamarine;
color: $color-white;
}
}
.github-logo svg {
@include fluid-width(4.375rem);
@include fluid-width(3.5rem);
}
.discord-logo svg {
@include fluid-width(4.375rem);
@include fluid-width(3.5rem);
}
.twitter-logo svg {
@include fluid-width(4.375rem);
@include fluid-width(3.5rem);
}
.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) {
p {
background: rgba($color-body-bg, 0.65);
background: rgba($color-blue-charcoal-2, 0.65);
border-radius: 0.5em;
padding: 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">
<div class="background"></div>
<div class="feature-group">
<h2>
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.
</p>
<div>
<a href="#" class="btn-main">Learn More</a>
<a href="/what-is-web3" class="btn-main">Learn More</a>
</div>
</div>
</section>

View File

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

View File

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

View File

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

View File

@ -51,16 +51,16 @@ function Navbar({ view }) {
</div>
<menu className={nav ? 'active' : undefined} onClick={onMenuClick}>
<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>
<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>
<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>
<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>
<a className="btn-main download-btn" href="#">Download Extension</a>

View File

@ -13,7 +13,7 @@ nav {
flex-shrink: 0;
img {
@include fluid-width-height(13.125rem, 4.375rem);
@include fluid-width-height(11.25rem, 3.75rem);
}
}
}
@ -25,10 +25,18 @@ menu {
li > a {
display: block;
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 {
margin-left: 0.9em;
text-decoration: none;
}
}
@ -44,8 +52,8 @@ menu {
nav {
position: sticky;
top: 0;
background: rgba($color-body-bg, 0.85);
z-index: 1;
background: rgba($color-blue-charcoal-2, 0.85);
z-index: 2;
}
menu {
@ -57,7 +65,7 @@ menu {
right: min(-20rem, -100vw);
bottom: 0;
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;
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">
<h2>Community-Powered</h2>
<h3>Building a new world for your data</h3>

View File

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

View File

@ -3,7 +3,7 @@
#vision-grid {
padding-top: 2.05em;
padding-bottom: 4.5em;
padding-bottom: 2.05em;
div:first-child {
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.
</p>
<div>
<a href="#" class="btn-main">Contribute to our cause</a>
<a href="/donate" class="btn-main">Donate</a>
</div>
</div>
</section>

View File

@ -5,7 +5,6 @@
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");

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 {
padding-top: 5.5em;
padding-bottom: 4.5em;
}

View File

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

View File

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

View File

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

View File

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