optimize styles, background positions and fluid types, fix build issues, code refactoring and cleanup
This commit is contained in:
parent
b6f8d567ba
commit
44231a1d99
|
|
@ -1,25 +1,24 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#how {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: 4em;
|
||||
margin-top: 8em;
|
||||
@include fluid-padding-lr;
|
||||
padding-top: 7em;
|
||||
padding-bottom: 7em;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
padding-top: 14em;
|
||||
padding-bottom: 16em;
|
||||
|
||||
&::before {
|
||||
background-image: url("../../../src/assets/donate-gfx-right.png");
|
||||
background-image: url("/src/assets/donate-gfx-right.png");
|
||||
background-position: 85% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
> div {
|
||||
max-width: 29em;
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import '../../../styles/jumbotron.scss';
|
||||
---
|
||||
|
||||
<section id="jumbotron" class="jumbotron">
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
Lume is people-powered.
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#legal {
|
||||
display: flex;
|
||||
|
|
@ -10,14 +10,14 @@
|
|||
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
@include fluid-font-size(2.5rem);
|
||||
@include fluid-font-size(2.8125rem);
|
||||
line-height: 122%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1.5em;
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
@include fluid-font-size(1.375rem);
|
||||
line-height: 157%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const addCurrency = async (id, title, address) => {
|
|||
id: id,
|
||||
title: title,
|
||||
address: address,
|
||||
svgLogo: await import('./icons/' + id + '.svg?raw'),
|
||||
svgLogo: await import(`./icons/${id}.svg?raw`),
|
||||
qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }),
|
||||
qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 })
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#methods {
|
||||
display: flex;
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
@include fluid-font-size(2.5rem);
|
||||
@include fluid-font-size(2.8125rem);
|
||||
line-height: 122%;
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
h3 {
|
||||
flex-grow: 1;
|
||||
font-family: $font-family-jetbrains-mono;
|
||||
@include fluid-font-size(1.4375rem);
|
||||
@include fluid-font-size(1.5rem);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
order: 1;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
@include fluid-font-size(1.375rem);
|
||||
word-break: break-all;
|
||||
user-select: all;
|
||||
}
|
||||
|
|
@ -134,13 +134,13 @@
|
|||
|
||||
p {
|
||||
margin-top: 1em;
|
||||
@include fluid-font-size(1.0625rem);
|
||||
@include fluid-font-size(1.25rem);
|
||||
line-height: 157%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
@include fluid-font-size(1.3125rem);
|
||||
@include fluid-font-size(1.5rem);
|
||||
}
|
||||
|
||||
#donate-bitcoin:hover {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,34 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#why {
|
||||
position: relative;
|
||||
margin: 9em 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
max-width: 185.6em;
|
||||
min-height: 58.8em;
|
||||
margin: 0 auto;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 92.2em;
|
||||
max-width: 100vw;
|
||||
height: 58.8em;
|
||||
background-image: url("../../../assets/donate-why-bg.png");
|
||||
background-position: 0%;
|
||||
bottom: 0;
|
||||
left: min(0em, calc((100% - 92.2em) / 2));
|
||||
width: calc(100% - 64em - 7.5%);
|
||||
min-width: 92.2em;
|
||||
background-image: url("/src/assets/donate-why-bg.png");
|
||||
background-position: 50% 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
@include fluid-font-size(1.3125rem);
|
||||
@include fluid-position-left(43.9em, 28em);
|
||||
max-width: 29em;
|
||||
padding: 0.5em 0;
|
||||
box-sizing: content-box;
|
||||
margin: 2em 7.5%;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
|
|
@ -34,7 +38,7 @@
|
|||
|
||||
ul {
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
padding: 0.3em 0.5em 0.3em 2em;
|
||||
padding: 0.3em 0.5em 0.3em 1.5em;
|
||||
margin: -0.3em -0.5em 0.28em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
---
|
||||
import './CTO.scss';
|
||||
import ctoAvatar from '../../../assets/cto-avatar.webp';
|
||||
import avatar from '/src/assets/cto-avatar.webp';
|
||||
---
|
||||
|
||||
<section id="home-cto">
|
||||
<div>
|
||||
<section id="cto">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
|
|
@ -12,12 +11,11 @@ import ctoAvatar from '../../../assets/cto-avatar.webp';
|
|||
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} />
|
||||
<img src={avatar.src} />
|
||||
<div>
|
||||
<strong>Derrick Hammer</strong><br />
|
||||
CTO
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,44 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#home-cto {
|
||||
@include fluid-padding-lr;
|
||||
|
||||
> div {
|
||||
#cto {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
max-width: 185.6em;
|
||||
min-height: 58.8em;
|
||||
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%;
|
||||
left: min(0em, calc((100% - 95em) / 2));
|
||||
width: calc(100% - 64em - 7.5%);
|
||||
min-width: 95em;
|
||||
background-image: url("/src/assets/geometric-bg.webp");
|
||||
background-position: 50% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
max-width: 28em;
|
||||
padding: 3.14em 0;
|
||||
box-sizing: content-box;
|
||||
margin: 6em 7.5%;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
.bio {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-top: 1.57em;
|
||||
gap: 1.33em;
|
||||
margin-top: 1.5em;
|
||||
gap: 1.2em;
|
||||
font-family: $font-family-jaldi;
|
||||
color: $color-cloud;
|
||||
@include fluid-font-size(1.5rem);
|
||||
|
||||
img {
|
||||
@include fluid-width-height(5.875rem, 5.875rem);
|
||||
|
|
@ -55,7 +52,7 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
p, .bio {
|
||||
p, .bio div {
|
||||
background: rgba($color-blue-charcoal-2, 0.65);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.3em 0.5em;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import "./Grid.scss";
|
||||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<section id="home-grid" class="feature-grid">
|
||||
<section id="grid" class="feature-grid">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
#home-grid {
|
||||
#grid {
|
||||
padding-top: 5.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
---
|
||||
import "./Header.scss";
|
||||
import HeaderContent from "./HeaderContent.jsx";
|
||||
---
|
||||
|
||||
<section id="home-header">
|
||||
<h1 class="flex flex-col justify-center">
|
||||
<HeaderContent client:load />
|
||||
</h1>
|
||||
</section>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
|
||||
#home-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7.5%;
|
||||
|
||||
h1 {
|
||||
height: 1.1em;
|
||||
margin: 1.1em 0 0.5em;
|
||||
@include fluid-font-size-s(6.25rem);
|
||||
line-height: 110%;
|
||||
letter-spacing: -0.06em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
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';
|
||||
import meme1 from '/src/assets/meme-1.png';
|
||||
import meme2 from '/src/assets/meme-2.png';
|
||||
import meme3 from '/src/assets/meme-3.png';
|
||||
import meme4 from '/src/assets/meme-4.png';
|
||||
---
|
||||
|
||||
<section id="home-meme" class="tilted-bg">
|
||||
<section id="meme" class="tilted-bg">
|
||||
<div class="feature-group">
|
||||
<h2>
|
||||
What is the Web?
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#home-meme {
|
||||
#meme {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include fluid-padding-lr;
|
||||
|
|
@ -10,8 +10,7 @@
|
|||
gap: 10em;
|
||||
|
||||
.feature-group {
|
||||
@include fluid-font-size(1.3125rem);
|
||||
max-width: 28em;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
.meme-items {
|
||||
|
|
@ -24,9 +23,7 @@
|
|||
.meme-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
gap: 2em;
|
||||
max-width: 55em;
|
||||
|
||||
div {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -40,7 +37,7 @@
|
|||
}
|
||||
|
||||
h2 {
|
||||
width: 8.2em;
|
||||
width: 8.6em;
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
|
|
@ -56,18 +53,43 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 47.99999rem) {
|
||||
.meme-item {
|
||||
div {
|
||||
@media screen and (max-width: 80rem) {
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
gap: 5em;
|
||||
|
||||
.feature-group {
|
||||
max-width: none;
|
||||
margin: 2em 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 56rem) {
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
.meme-items {
|
||||
gap: 3em;
|
||||
}
|
||||
|
||||
.meme-item {
|
||||
flex-direction: column;
|
||||
max-width: 64em;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
@include fluid-width(11.25rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 80.000001rem) and (max-width: 100rem) {
|
||||
.meme-item {
|
||||
h2 {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 4.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import "./Message.scss";
|
||||
import './Message.scss';
|
||||
---
|
||||
|
||||
<section id="home-message">
|
||||
<section id="message">
|
||||
<h2>
|
||||
A message from Derrick
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#home-message {
|
||||
#message {
|
||||
padding: 5em 0;
|
||||
@include fluid-padding-lr;
|
||||
background: $color-aquamarine;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
p {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
line-height: 157%;
|
||||
@include fluid-font-size(1.5rem);
|
||||
line-height: 137%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import './PoweredBy.scss';
|
||||
---
|
||||
|
||||
<section id="home-powered-by">
|
||||
<section id="powered-by">
|
||||
<h2>Powered By</h2>
|
||||
<div>
|
||||
<a href="https://sia.tech" title="Sia" class="sia-logo">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#home-powered-by {
|
||||
#powered-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4em;
|
||||
margin: 10em 0;
|
||||
margin: 12em 0;
|
||||
|
||||
@media screen and (max-width: 47.99999rem) {
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import './Socials.scss';
|
||||
---
|
||||
|
||||
<section id="home-socials">
|
||||
<section id="socials">
|
||||
<h2>Get in touch</h2>
|
||||
<div>
|
||||
<a href="#" title="GitHub" class="github-logo">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#home-socials {
|
||||
#socials {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3em;
|
||||
margin: 10em 0 8.5em;
|
||||
margin: 12em 0 8em;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import './Typewriter.scss';
|
||||
import TypewriterContent from './TypewriterContent.jsx';
|
||||
---
|
||||
|
||||
<section id="typewriter">
|
||||
<h1>
|
||||
<TypewriterContent client:load />
|
||||
</h1>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#typewriter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7.5%;
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.2em;
|
||||
margin: max(1.1em, 5rem) 0 max(0.9em, 7rem);
|
||||
@include fluid-font-size-xs(6.25rem);
|
||||
line-height: 110%;
|
||||
letter-spacing: -0.06em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: $color-aquamarine;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import "./Vision.scss";
|
||||
import './Vision.scss';
|
||||
---
|
||||
|
||||
<section id="home-vision">
|
||||
<section id="vision">
|
||||
<div class="feature-group">
|
||||
<h2>Our Vision</h2>
|
||||
<h3>Make Web3 easy for everyone</h3>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,29 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#home-vision {
|
||||
#vision {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 27.05em;
|
||||
margin-top: 5.32em;
|
||||
min-height: 56.8em;
|
||||
@include fluid-margin-lr;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
background-image: url("../../../src/assets/video-placeholder.webp");
|
||||
background-position: 98%;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
min-width: 68em;
|
||||
margin-left: min(0em, calc((100% - 68em) / 2));
|
||||
background-image: url("/src/assets/video-placeholder.webp");
|
||||
background-position: right top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
> div {
|
||||
max-width: 29em;
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import "./WhatIsWeb3.scss";
|
||||
import './Web3.scss';
|
||||
---
|
||||
|
||||
<section id="home-whatisweb3" class="tilted-bg">
|
||||
<section id="web3" class="tilted-bg">
|
||||
<div class="feature-group">
|
||||
<h2>
|
||||
What is the Web?
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#home-whatisweb3 {
|
||||
#web3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 32.42em;
|
||||
margin-top: 2.48em;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
height: 70em;
|
||||
margin-top: 6em;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
|
@ -15,10 +14,10 @@
|
|||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 38.9em;
|
||||
max-width: 30.34em;
|
||||
margin: -19.25em 0 0;
|
||||
background-image: url("../../../src/assets/img-left.webp");
|
||||
height: 81.7em;
|
||||
max-width: 63.7em;
|
||||
margin: -40em 0 0;
|
||||
background-image: url("/src/assets/img-left.webp");
|
||||
background-position: left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
|
@ -27,10 +26,10 @@
|
|||
}
|
||||
|
||||
.feature-group {
|
||||
@include fluid-position-left(27.8em, 28em);
|
||||
max-width: 28em;
|
||||
@include fluid-position-left(58.4em, 58em);
|
||||
max-width: 64em;
|
||||
|
||||
h1 {
|
||||
h2 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import "./Footer.scss";
|
||||
import logo from "../../../../src/assets/lume-logo.png";
|
||||
import logo from "/src/assets/lume-logo.png";
|
||||
---
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,20 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
gap: 2%;
|
||||
padding-top: 3.16%;
|
||||
padding-bottom: 4.61%;
|
||||
padding-top: 7em;
|
||||
padding-bottom: 8em;
|
||||
@include fluid-padding-lr;
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
@include fluid-font-size(0.625rem);
|
||||
background: $color-blue-charcoal;
|
||||
|
||||
> div {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
@include fluid-font-size(1.375rem);
|
||||
|
||||
&:first-child {
|
||||
flex-grow: 1.5 !important;
|
||||
|
|
@ -100,23 +101,27 @@ footer {
|
|||
@media screen and (max-width: 47.99999rem) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
padding-top: 1.25rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.3125rem;
|
||||
|
||||
> div {
|
||||
margin-top: 2.5rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
margin-top: 5rem;
|
||||
margin-top: 4rem;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 8.4375rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#join-community {
|
||||
display: flex;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
p {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
@include fluid-font-size(1.5rem);
|
||||
line-height: 157%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import './Navbar.scss';
|
||||
import logo from '../../../../src/assets/lume-logo.png';
|
||||
import logo from '/src/assets/lume-logo.png';
|
||||
|
||||
function Navbar({ view }) {
|
||||
const [nav, setNav] = useState(false);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
|
|
@ -13,7 +13,7 @@ nav {
|
|||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
@include fluid-width-height(11.25rem, 3.75rem);
|
||||
@include fluid-width-height(13.125rem, 4.375rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -25,6 +25,7 @@ menu {
|
|||
li > a {
|
||||
display: block;
|
||||
padding: 0.55em 0.9em;
|
||||
@include fluid-font-size(1.375rem);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
transition: text-decoration-color $transition-duration;
|
||||
|
|
@ -36,6 +37,7 @@ menu {
|
|||
|
||||
.download-btn {
|
||||
margin-left: 0.9em;
|
||||
@include fluid-font-size(1.375rem);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import './Community.scss';
|
||||
---
|
||||
|
||||
<section id="vision-community">
|
||||
<section id="community">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Building a new world for your data</h3>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#vision-community {
|
||||
#community {
|
||||
position: relative;
|
||||
background-image: url("../../../assets/community-power-bg.png");
|
||||
margin-top: 7.8125rem;
|
||||
background-size: max(75rem, 100%);
|
||||
background-image: url("/src/assets/community-power-bg.png");
|
||||
background-size: max(157.5em, 100%);
|
||||
background-position: right;
|
||||
padding-top: max(29.25rem, 39.02%);
|
||||
@include fluid-font-size(1.3125rem);
|
||||
padding-top: max(61.4525em, 39.0175%);
|
||||
|
||||
.feature-group {
|
||||
position: absolute;
|
||||
|
|
@ -18,15 +16,13 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include fluid-margin-lr;
|
||||
max-width: 27em;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<section id="vision-grid" class="feature-grid">
|
||||
<section id="grid" class="feature-grid">
|
||||
<div>
|
||||
<h2>Freedom. Privacy. Ownership.</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#vision-grid {
|
||||
#grid {
|
||||
padding-top: 2.05em;
|
||||
padding-bottom: 2.05em;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import '../../../styles/jumbotron.scss';
|
||||
---
|
||||
|
||||
<section id="vision-jumbotron" class="jumbotron">
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
Easy Web3 access, storage, publishing, and payment for content creation.
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import './People.scss';
|
||||
---
|
||||
|
||||
<section id="vision-people">
|
||||
<section id="people">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>All about the people, no VC here.</h3>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,34 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#vision-people {
|
||||
#people {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
max-width: 185.6em;
|
||||
min-height: 78.4em;
|
||||
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;
|
||||
left: min(0em, calc((100% - 95em) / 2));
|
||||
width: calc(100% - 64em - 7.5%);
|
||||
min-width: 95em;
|
||||
background-image: url("/src/assets/double-brand-bg.png");
|
||||
background-position: 50% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
max-width: 28em;
|
||||
padding: 4.14em 0;
|
||||
@include fluid-margin-lr;
|
||||
box-sizing: content-box;
|
||||
padding: 9em 7.5%;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import './Astronaut.scss';
|
||||
---
|
||||
|
||||
<section id="what-astronaut">
|
||||
<section id="astronaut">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Re-defining Web3, for the good of all</h3>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,37 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#what-astronaut {
|
||||
#astronaut {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
min-height: 71.1em;
|
||||
background: $color-blue-charcoal;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: min(0em, calc(100% - 100.3em) / 2);
|
||||
bottom: 0;
|
||||
width: 100.3em;
|
||||
background-image: url("/src/assets/astronaut.png");
|
||||
background-position: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
> div {
|
||||
.feature-group {
|
||||
@include fluid-margin-lr;
|
||||
max-width: 30em;
|
||||
padding: 3.14em 0;
|
||||
max-width: 64em;
|
||||
padding: 6em 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
p {
|
||||
background: rgba($color-blue-charcoal, 0.65);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
@import "../../../styles/mixins.scss";
|
||||
@import "../../../styles/vars.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#building {
|
||||
|
||||
&::before {
|
||||
bottom: -12%;
|
||||
bottom: -50%;
|
||||
}
|
||||
|
||||
> div {
|
||||
|
|
@ -12,21 +10,20 @@
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
max-width: 88em;
|
||||
min-height: 28em;
|
||||
max-width: 185.6em;
|
||||
min-height: 58.8em;
|
||||
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;
|
||||
top: 2.3em;
|
||||
bottom: -2.3em;
|
||||
left: min(0em, calc((100% - 77.56em) / 2));
|
||||
width: calc(100% - 64em - 7.5%);
|
||||
min-width: 77.56em;
|
||||
background-image: url("/src/assets/double-brand-bg.png");
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
|
|
@ -34,9 +31,8 @@
|
|||
}
|
||||
|
||||
.feature-group {
|
||||
max-width: 28em;
|
||||
padding: 7em 0 5em;
|
||||
@include fluid-margin-lr;
|
||||
max-width: 64em;
|
||||
margin: 7em 7.5% 5em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<section id="what-grid" class="feature-grid">
|
||||
<section id="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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
#what-grid {
|
||||
padding-top: 5.5em;
|
||||
#grid {
|
||||
padding-bottom: 4.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import '../../../styles/jumbotron.scss';
|
||||
---
|
||||
|
||||
<section id="what-jumbotron" class="jumbotron">
|
||||
<section id="jumbotron">
|
||||
<h1>
|
||||
A new web that is fair and accessible to all, where each user can have a say in its infrastructure.
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
/// <reference types="@astrojs/image/client" />
|
||||
|
|
@ -17,7 +17,7 @@ const { view, title } = Astro.props;
|
|||
<head>
|
||||
<title>{title}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<meta name="description" content="Lume Web - Web3 for the masses | Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox." />
|
||||
<meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
---
|
||||
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 Typewriter from '../components/Home/Typewriter/Typewriter.astro';
|
||||
import Vision from '../components/Home/Vision/Vision.astro';
|
||||
import WhatIsWeb3 from '../components/Home/WhatIsWeb3/WhatIsWeb3.astro';
|
||||
import Web3 from '../components/Home/Web3/Web3.astro';
|
||||
import PoweredBy from '../components/Home/PoweredBy/PoweredBy.astro';
|
||||
import Meme from '../components/Home/Meme/Meme.astro';
|
||||
import Grid from '../components/Home/Grid/Grid.astro';
|
||||
import Socials from '../components/Home/Socials/Socials.astro';
|
||||
import CTO from '../components/Home/CTO/CTO.astro';
|
||||
import Message from '../components/Home/Message/Message.astro';
|
||||
---
|
||||
|
||||
<Layout view="home" title="Lume Web - Web3 for the masses">
|
||||
<Header />
|
||||
<Typewriter />
|
||||
<Vision />
|
||||
<WhatIsWeb3 />
|
||||
<Web3 />
|
||||
<PoweredBy />
|
||||
<Meme />
|
||||
<Grids />
|
||||
<Grid />
|
||||
<Socials />
|
||||
<CTO />
|
||||
<Message />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "mixins.scss";
|
||||
@import "vars.scss";
|
||||
@import "./mixins.scss";
|
||||
@import "./vars.scss";
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
|
||||
|
||||
|
|
@ -51,58 +51,7 @@ a, button {
|
|||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
main.vision {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: max(min(103.1em, 100vw), 32em);
|
||||
height: max(min(73.3em, 100vw), 40em);
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: max(-51.55em, -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(151.3em, 100vw), 32em);
|
||||
height: max(min(122.4em, 100vw), 56em);
|
||||
top: -2em;
|
||||
left: 50%;
|
||||
margin-left: max(-75.65em, -50vw);
|
||||
z-index: -1;
|
||||
background: url("../assets/what-bg.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
main.donate {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: max(min(144em, 100vw), 32em);
|
||||
height: max(min(93.3em, 100vw), 56em);
|
||||
top: -3em;
|
||||
left: 50%;
|
||||
margin-left: max(-72em, -50vw);
|
||||
z-index: -1;
|
||||
background: url("../assets/donate-bg.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background: $color-blue-charcoal;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -110,6 +59,7 @@ main.donate {
|
|||
h2 {
|
||||
margin-bottom: 1em;
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
line-height: 100%;
|
||||
text-transform: uppercase;
|
||||
color: $color-aquamarine;
|
||||
|
|
@ -122,13 +72,13 @@ main.donate {
|
|||
}
|
||||
|
||||
h2, h3 {
|
||||
font-weight: 700;
|
||||
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
|
||||
}
|
||||
|
||||
p, li {
|
||||
p, ul {
|
||||
@include fluid-font-size(1.5rem);
|
||||
font-family: $font-family-jaldi;
|
||||
line-height: 167%;
|
||||
line-height: 148%;
|
||||
color: $color-cloud;
|
||||
transition: background $transition-duration;
|
||||
}
|
||||
|
|
@ -139,10 +89,12 @@ main.donate {
|
|||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
margin-left: 1.5em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.5rem);
|
||||
margin-top: 1.57em;
|
||||
}
|
||||
}
|
||||
|
|
@ -150,13 +102,13 @@ main.donate {
|
|||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
gap: 0.9em;
|
||||
@include fluid-padding-lr;
|
||||
@include fluid-font-size(1.25rem);
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64rem) {
|
||||
|
|
@ -180,14 +132,14 @@ main.donate {
|
|||
}
|
||||
|
||||
h3 {
|
||||
@include fluid-font-size(1.875rem);
|
||||
line-height: 103.33%;
|
||||
@include fluid-font-size(2rem);
|
||||
line-height: 109%;
|
||||
}
|
||||
|
||||
p {
|
||||
@include fluid-font-size(1.3125rem);
|
||||
@include fluid-font-size(1.375rem);
|
||||
margin-top: 0.67em;
|
||||
line-height: 123.81%;
|
||||
line-height: 124%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
}
|
||||
|
|
@ -225,3 +177,54 @@ main.donate {
|
|||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main.home {
|
||||
.feature-group h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
main.vision {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
left: 50%;
|
||||
width: 103.1em;
|
||||
height: 73.3em;
|
||||
transform: translate(-50%, 0);
|
||||
background: url("/src/assets/vision-bg.png");
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main.what {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
left: 50%;
|
||||
width: 151.3em;
|
||||
height: 122.4em;
|
||||
background: url("/src/assets/what-bg.png");
|
||||
background-size: contain;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
main.donate {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -3em;
|
||||
left: 50%;
|
||||
width: 144em;
|
||||
height: 93.3em;
|
||||
background: url("/src/assets/donate-bg.png");
|
||||
background-size: contain;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
@import "./mixins.scss";
|
||||
@import "./vars.scss";
|
||||
|
||||
.jumbotron {
|
||||
#jumbotron {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 18.78em;
|
||||
margin: 12.5em 7.5% 0;
|
||||
margin: 12.5em 7.5% 15em;
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 21em;
|
||||
height: 2.74em;
|
||||
font-family: $font-family-ibm-plex-sans-devanagari;
|
||||
@include fluid-font-size-s(3.6875rem);
|
||||
line-height: 137%;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@use "sass:math";
|
||||
|
||||
$min-vw: 80rem;
|
||||
$max-vw: 384rem;
|
||||
$min-vw: 56rem;
|
||||
$max-vw: 476rem; // 336rem, 616rem
|
||||
|
||||
$screen-min: 24rem; // 384px
|
||||
$screen-sm: 48rem; // 768px
|
||||
|
|
@ -13,30 +13,9 @@ $screen-default: 96rem; // 1536px
|
|||
@return math.div($value, ($value * 0 + 1));
|
||||
}
|
||||
|
||||
@mixin fluid-font($min-font-size, $max-font-size) {
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($min-font-size);
|
||||
$u4: unit($max-font-size);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
||||
& {
|
||||
font-size: $min-font-size;
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-font-size($font-size) {
|
||||
$min-font-size: calc($font-size / 1.2);
|
||||
$max-font-size: calc($font-size * 2);
|
||||
$min-font-size: calc($font-size * 0.75);
|
||||
$max-font-size: calc($font-size * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
|
|
@ -58,9 +37,9 @@ $screen-default: 96rem; // 1536px
|
|||
}
|
||||
|
||||
@mixin fluid-font-size-s($font-size) {
|
||||
$min-font-size: calc($font-size / 4.8);
|
||||
$medium-font-size: calc($font-size / 1.2);
|
||||
$max-font-size: calc($font-size * 2);
|
||||
$min-font-size: calc($font-size * 0.5);
|
||||
$medium-font-size: calc($font-size * 0.75);
|
||||
$max-font-size: calc($font-size * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
|
|
@ -71,7 +50,35 @@ $screen-default: 96rem; // 1536px
|
|||
font-size: $min-font-size;
|
||||
|
||||
@media screen and (min-width: 20rem) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($medium-font-size - $min-font-size)} * ((100vw - 20rem) / (80 - 20)));
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($medium-font-size - $min-font-size)} * ((100vw - 20rem) / (56 - 20)));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
font-size: calc(#{$medium-font-size} + #{strip-unit($max-font-size - $medium-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fluid-font-size-xs($font-size) {
|
||||
$min-font-size: calc($font-size * 0.25);
|
||||
$medium-font-size: calc($font-size * 0.75);
|
||||
$max-font-size: calc($font-size * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($font-size);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 {
|
||||
& {
|
||||
font-size: $min-font-size;
|
||||
|
||||
@media screen and (min-width: 20rem) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($medium-font-size - $min-font-size)} * ((100vw - 20rem) / (56 - 20)));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $min-vw) {
|
||||
|
|
@ -86,11 +93,11 @@ $screen-default: 96rem; // 1536px
|
|||
}
|
||||
|
||||
@mixin fluid-width-height($width, $height) {
|
||||
$min-width: calc($width / 1.2);
|
||||
$max-width: calc($width * 2);
|
||||
$min-width: calc($width * 0.75);
|
||||
$max-width: calc($width * 2.5);
|
||||
|
||||
$min-height: calc($height / 1.2);
|
||||
$max-height: calc($height * 2);
|
||||
$min-height: calc($height * 0.75);
|
||||
$max-height: calc($height * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
|
|
@ -116,8 +123,8 @@ $screen-default: 96rem; // 1536px
|
|||
}
|
||||
|
||||
@mixin fluid-width($width) {
|
||||
$min-width: calc($width / 1.2);
|
||||
$max-width: calc($width * 2);
|
||||
$min-width: calc($width * 0.75);
|
||||
$max-width: calc($width * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
|
|
@ -139,8 +146,8 @@ $screen-default: 96rem; // 1536px
|
|||
}
|
||||
|
||||
@mixin fluid-height($height) {
|
||||
$min-height: calc($height / 1.2);
|
||||
$max-height: calc($height * 2);
|
||||
$min-height: calc($height * 0.75);
|
||||
$max-height: calc($height * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
|
|
@ -162,11 +169,11 @@ $screen-default: 96rem; // 1536px
|
|||
}
|
||||
|
||||
@mixin fluid-max-width-height($width, $height) {
|
||||
$min-width: calc($width / 1.2);
|
||||
$max-width: calc($width * 2);
|
||||
$min-width: calc($width * 0.75);
|
||||
$max-width: calc($width * 2.5);
|
||||
|
||||
$min-height: calc($height / 1.2);
|
||||
$max-height: calc($height * 2);
|
||||
$min-height: calc($height * 0.75);
|
||||
$max-height: calc($height * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
|
|
@ -195,7 +202,7 @@ $screen-default: 96rem; // 1536px
|
|||
$min-vw: 48rem;
|
||||
$max-vw: 96rem;
|
||||
|
||||
$min-margin: 3.75%;
|
||||
$min-margin: 7.5%;
|
||||
$max-margin: 7.5%;
|
||||
|
||||
& {
|
||||
|
|
@ -219,7 +226,7 @@ $screen-default: 96rem; // 1536px
|
|||
$min-vw: 48rem;
|
||||
$max-vw: 96rem;
|
||||
|
||||
$min-padding: 3.75%;
|
||||
$min-padding: 7.5%;
|
||||
$max-padding: 7.5%;
|
||||
|
||||
& {
|
||||
|
|
@ -242,7 +249,7 @@ $screen-default: 96rem; // 1536px
|
|||
$min-vw: 48rem;
|
||||
$max-vw: 96rem;
|
||||
|
||||
$min-margin: 3.75%;
|
||||
$min-margin: 7.5%;
|
||||
$max-margin: 7.5%;
|
||||
|
||||
& {
|
||||
|
|
@ -262,8 +269,8 @@ $screen-default: 96rem; // 1536px
|
|||
}
|
||||
|
||||
@mixin fluid-margin-lr-rem($margin) {
|
||||
$min-margin: calc($margin / 1.2);
|
||||
$max-margin: calc($margin * 2);
|
||||
$min-margin: calc($margin * 0.75);
|
||||
$max-margin: calc($margin * 2.5);
|
||||
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
|
|
|
|||
Loading…
Reference in New Issue