feat: create two remaining components, optimize layout and existing components (wip)
This commit is contained in:
parent
20a99a65d8
commit
b6f8d567ba
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
color: $color-alto;
|
||||
|
||||
&:hover {
|
||||
color: $color-aquamarine;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -56,6 +56,11 @@
|
|||
|
||||
a {
|
||||
display: block;
|
||||
color: #0B3F48;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.github-logo svg {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
#vision-grid {
|
||||
padding-top: 2.05em;
|
||||
padding-bottom: 4.5em;
|
||||
padding-bottom: 2.05em;
|
||||
|
||||
div:first-child {
|
||||
background: inherit;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
#what-grid {
|
||||
padding-top: 5.5em;
|
||||
padding-bottom: 4.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue