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>
|
<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} />
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
color: $color-alto;
|
color: $color-alto;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color-aquamarine;
|
color: $color-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -56,6 +56,11 @@
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
|
color: #0B3F48;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.github-logo svg {
|
.github-logo svg {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
@ -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;
|
|
@ -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;
|
||||||
|
|
|
@ -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.
|
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>
|
||||||
|
|
|
@ -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");
|
||||||
|
|
|
@ -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 {
|
#what-grid {
|
||||||
padding-top: 5.5em;
|
padding-top: 5.5em;
|
||||||
|
padding-bottom: 4.5em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue