LumeWeb
/
lumeweb.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize styles, background positions and fluid types, fix build issues, code refactoring and cleanup

This commit is contained in:
cymon 2023-06-07 21:34:40 +00:00
parent b6f8d567ba
commit 44231a1d99
51 changed files with 446 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Donate/How/How.scss
View File

@ -1,25 +1,24 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#how { #how {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin-top: 4em; margin-top: 8em;
@include fluid-padding-lr; @include fluid-padding-lr;
padding-top: 7em; padding-top: 14em;
padding-bottom: 7em; padding-bottom: 16em;
@include fluid-font-size(1.3125rem);
&::before { &::before {
background-image: url("../../../src/assets/donate-gfx-right.png"); background-image: url("/src/assets/donate-gfx-right.png");
background-position: 85% 100%; background-position: 85% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
> div { .feature-group {
max-width: 29em; max-width: 64em;
} }
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {

2
src/components/Donate/Jumbotron/Jumbotron.astro
View File

@ -2,7 +2,7 @@
import '../../../styles/jumbotron.scss'; import '../../../styles/jumbotron.scss';
--- ---
<section id="jumbotron" class="jumbotron"> <section id="jumbotron">
<h1> <h1>
Lume is people-powered. Lume is people-powered.
</h1> </h1>

8
src/components/Donate/Legal/Legal.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#legal { #legal {
display: flex; display: flex;
@ -10,14 +10,14 @@
h2 { h2 {
margin-bottom: 1em; margin-bottom: 1em;
@include fluid-font-size(2.5rem); @include fluid-font-size(2.8125rem);
line-height: 122%; line-height: 122%;
} }
p { p {
margin-top: 1.5em; margin-top: 1.5em;
font-family: $font-family-jaldi; font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.375rem);
line-height: 157%; line-height: 157%;
color: $color-cloud; color: $color-cloud;
} }

2
src/components/Donate/Methods/Methods.astro
View File

@ -9,7 +9,7 @@ const addCurrency = async (id, title, address) => {
id: id, id: id,
title: title, title: title,
address: address, 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 }), qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }),
qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 }) qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 })
}); });

14
src/components/Donate/Methods/Methods.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#methods { #methods {
display: flex; display: flex;
@ -12,7 +12,7 @@
h2 { h2 {
margin-bottom: 1em; margin-bottom: 1em;
@include fluid-font-size(2.5rem); @include fluid-font-size(2.8125rem);
line-height: 122%; line-height: 122%;
} }
@ -53,7 +53,7 @@
h3 { h3 {
flex-grow: 1; flex-grow: 1;
font-family: $font-family-jetbrains-mono; font-family: $font-family-jetbrains-mono;
@include fluid-font-size(1.4375rem); @include fluid-font-size(1.5rem);
} }
img { img {
@ -73,7 +73,7 @@
order: 1; order: 1;
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.375rem);
word-break: break-all; word-break: break-all;
user-select: all; user-select: all;
} }
@ -134,13 +134,13 @@
p { p {
margin-top: 1em; margin-top: 1em;
@include fluid-font-size(1.0625rem); @include fluid-font-size(1.25rem);
line-height: 157%; line-height: 157%;
color: $color-cloud; color: $color-cloud;
} }
.btn-main { .btn-main {
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.5rem);
} }
#donate-bitcoin:hover { #donate-bitcoin:hover {

32
src/components/Donate/Why/Why.scss
View File

@ -1,30 +1,34 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#why { #why {
position: relative; 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 { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; bottom: 0;
width: 92.2em; left: min(0em, calc((100% - 92.2em) / 2));
max-width: 100vw; width: calc(100% - 64em - 7.5%);
height: 58.8em; min-width: 92.2em;
background-image: url("../../../assets/donate-why-bg.png"); background-image: url("/src/assets/donate-why-bg.png");
background-position: 0%; background-position: 50% 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
z-index: -1; z-index: -1;
} }
.feature-group { .feature-group {
@include fluid-font-size(1.3125rem); box-sizing: content-box;
@include fluid-position-left(43.9em, 28em); margin: 2em 7.5%;
max-width: 29em; max-width: 64em;
padding: 0.5em 0;
} }
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {
@ -34,7 +38,7 @@
ul { ul {
border-radius: 0.5em 0.5em 0 0; 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; margin: -0.3em -0.5em 0.28em;
} }

8
src/components/Home/CTO/CTO.astro
View File

@ -1,10 +1,9 @@
--- ---
import './CTO.scss'; import './CTO.scss';
import ctoAvatar from '../../../assets/cto-avatar.webp'; import avatar from '/src/assets/cto-avatar.webp';
--- ---
<section id="home-cto"> <section id="cto">
<div>
<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>
@ -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. 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 class="bio"> <div class="bio">
<img src={ctoAvatar.src} /> <img src={avatar.src} />
<div> <div>
<strong>Derrick Hammer</strong><br /> <strong>Derrick Hammer</strong><br />
CTO CTO
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>

37
src/components/Home/CTO/CTO.scss
View File

@ -1,47 +1,44 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#home-cto { #cto {
@include fluid-padding-lr;
> div {
position: relative; position: relative;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
max-width: 185.6em;
min-height: 58.8em;
margin: 0 auto; margin: 0 auto;
@include fluid-font-size(1.3125rem);
max-width: 75em;
min-height: 28em;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: min(0rem, calc((100vw - 40rem) / 2)); left: min(0em, calc((100% - 95em) / 2));
width: 100%; width: calc(100% - 64em - 7.5%);
min-width: 40rem; min-width: 95em;
background-image: url("../../../assets/geometric-bg.webp"); background-image: url("/src/assets/geometric-bg.webp");
background-position: 1%; background-position: 50% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
z-index: -1; z-index: -1;
} }
}
.feature-group { .feature-group {
max-width: 28em; box-sizing: content-box;
padding: 3.14em 0; margin: 6em 7.5%;
max-width: 64em;
} }
.bio { .bio {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-top: 1.57em; margin-top: 1.5em;
gap: 1.33em; gap: 1.2em;
font-family: $font-family-jaldi; font-family: $font-family-jaldi;
color: $color-cloud; color: $color-cloud;
@include fluid-font-size(1.5rem);
img { img {
@include fluid-width-height(5.875rem, 5.875rem); @include fluid-width-height(5.875rem, 5.875rem);
@ -55,7 +52,7 @@
} }
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {
p, .bio { p, .bio div {
background: rgba($color-blue-charcoal-2, 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;

4
src/components/Home/Grid/Grid.astro
View File

@ -1,8 +1,8 @@
--- ---
import "./Grid.scss"; import './Grid.scss';
--- ---
<section id="home-grid" class="feature-grid"> <section id="grid" class="feature-grid">
<div> <div>
<h3>Web3 Universal Storage</h3> <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> <p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>

2
src/components/Home/Grid/Grid.scss
View File

@ -1,3 +1,3 @@
#home-grid { #grid {
padding-top: 5.5em; padding-top: 5.5em;
} }

10
src/components/Home/Header/Header.astro
View File

@ -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>

22
src/components/Home/Header/Header.scss
View File

@ -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;
}
}

10
src/components/Home/Meme/Meme.astro
View File

@ -1,12 +1,12 @@
--- ---
import './Meme.scss'; import './Meme.scss';
import meme1 from '../../../assets/meme-1.png'; import meme1 from '/src/assets/meme-1.png';
import meme2 from '../../../assets/meme-2.png'; import meme2 from '/src/assets/meme-2.png';
import meme3 from '../../../assets/meme-3.png'; import meme3 from '/src/assets/meme-3.png';
import meme4 from '../../../assets/meme-4.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"> <div class="feature-group">
<h2> <h2>
What is the Web? What is the Web?

54
src/components/Home/Meme/Meme.scss
View File

@ -1,7 +1,7 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#home-meme { #meme {
display: flex; display: flex;
align-items: center; align-items: center;
@include fluid-padding-lr; @include fluid-padding-lr;
@ -10,8 +10,7 @@
gap: 10em; gap: 10em;
.feature-group { .feature-group {
@include fluid-font-size(1.3125rem); max-width: 64em;
max-width: 28em;
} }
.meme-items { .meme-items {
@ -24,9 +23,7 @@
.meme-item { .meme-item {
display: flex; display: flex;
align-items: center; align-items: center;
@include fluid-font-size(1.3125rem);
gap: 2em; gap: 2em;
max-width: 55em;
div { div {
flex-shrink: 0; flex-shrink: 0;
@ -40,7 +37,7 @@
} }
h2 { h2 {
width: 8.2em; width: 8.6em;
@include fluid-font-size(1.5625rem); @include fluid-font-size(1.5625rem);
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
@ -56,18 +53,43 @@
} }
} }
@media screen and (max-width: 47.99999rem) { @media screen and (max-width: 80rem) {
.meme-item {
div {
flex-direction: column; 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 { h2 {
width: auto; width: 4.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }

4
src/components/Home/Message/Message.astro
View File

@ -1,8 +1,8 @@
--- ---
import "./Message.scss"; import './Message.scss';
--- ---
<section id="home-message"> <section id="message">
<h2> <h2>
A message from Derrick A message from Derrick
</h2> </h2>

10
src/components/Home/Message/Message.scss
View File

@ -1,7 +1,7 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#home-message { #message {
padding: 5em 0; padding: 5em 0;
@include fluid-padding-lr; @include fluid-padding-lr;
background: $color-aquamarine; background: $color-aquamarine;
@ -22,7 +22,7 @@
p { p {
font-family: $font-family-jaldi; font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.5rem);
line-height: 157%; line-height: 137%;
} }
} }

2
src/components/Home/PoweredBy/PoweredBy.astro
View File

@ -2,7 +2,7 @@
import './PoweredBy.scss'; import './PoweredBy.scss';
--- ---
<section id="home-powered-by"> <section id="powered-by">
<h2>Powered By</h2> <h2>Powered By</h2>
<div> <div>
<a href="https://sia.tech" title="Sia" class="sia-logo"> <a href="https://sia.tech" title="Sia" class="sia-logo">

8
src/components/Home/PoweredBy/PoweredBy.scss
View File

@ -1,12 +1,12 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#home-powered-by { #powered-by {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4em; gap: 4em;
margin: 10em 0; margin: 12em 0;
@media screen and (max-width: 47.99999rem) { @media screen and (max-width: 47.99999rem) {
flex-direction: column; flex-direction: column;

2
src/components/Home/Socials/Socials.astro
View File

@ -2,7 +2,7 @@
import './Socials.scss'; import './Socials.scss';
--- ---
<section id="home-socials"> <section id="socials">
<h2>Get in touch</h2> <h2>Get in touch</h2>
<div> <div>
<a href="#" title="GitHub" class="github-logo"> <a href="#" title="GitHub" class="github-logo">

8
src/components/Home/Socials/Socials.scss
View File

@ -1,13 +1,13 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#home-socials { #socials {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 3em; gap: 3em;
margin: 10em 0 8.5em; margin: 12em 0 8em;
div { div {
display: flex; display: flex;

10
src/components/Home/Typewriter/Typewriter.astro Normal file
View File

@ -0,0 +1,10 @@
---
import './Typewriter.scss';
import TypewriterContent from './TypewriterContent.jsx';
---
<section id="typewriter">
<h1>
<TypewriterContent client:load />
</h1>
</section>

24
src/components/Home/Typewriter/Typewriter.scss Normal file
View File

@ -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;
}
}

0
src/components/Home/Header/HeaderContent.jsx → src/components/Home/Typewriter/TypewriterContent.jsx
View File

4
src/components/Home/Vision/Vision.astro
View File

@ -1,8 +1,8 @@
--- ---
import "./Vision.scss"; import './Vision.scss';
--- ---
<section id="home-vision"> <section id="vision">
<div class="feature-group"> <div class="feature-group">
<h2>Our Vision</h2> <h2>Our Vision</h2>
<h3>Make Web3 easy for everyone</h3> <h3>Make Web3 easy for everyone</h3>

28
src/components/Home/Vision/Vision.scss
View File

@ -1,21 +1,29 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#home-vision { #vision {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
height: 27.05em; min-height: 56.8em;
margin-top: 5.32em;
@include fluid-margin-lr; @include fluid-margin-lr;
@include fluid-font-size(1.3125rem);
background-image: url("../../../src/assets/video-placeholder.webp"); &::before {
background-position: 98%; 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-repeat: no-repeat;
background-size: contain; background-size: contain;
z-index: -1;
}
> div { .feature-group {
max-width: 29em; max-width: 64em;
} }
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {

4
src/components/Home/WhatIsWeb3/WhatIsWeb3.astro → src/components/Home/Web3/Web3.astro
View File

@ -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"> <div class="feature-group">
<h2> <h2>
What is the Web? What is the Web?

25
src/components/Home/WhatIsWeb3/WhatIsWeb3.scss → src/components/Home/Web3/Web3.scss
View File

@ -1,13 +1,12 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#home-whatisweb3 { #web3 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
height: 32.42em; height: 70em;
margin-top: 2.48em; margin-top: 6em;
@include fluid-font-size(1.3125rem);
&::after { &::after {
content: ""; content: "";
@ -15,10 +14,10 @@
left: 0; left: 0;
top: 50%; top: 50%;
width: 100%; width: 100%;
height: 38.9em; height: 81.7em;
max-width: 30.34em; max-width: 63.7em;
margin: -19.25em 0 0; margin: -40em 0 0;
background-image: url("../../../src/assets/img-left.webp"); background-image: url("/src/assets/img-left.webp");
background-position: left; background-position: left;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@ -27,10 +26,10 @@
} }
.feature-group { .feature-group {
@include fluid-position-left(27.8em, 28em); @include fluid-position-left(58.4em, 58em);
max-width: 28em; max-width: 64em;
h1 { h2 {
margin-top: 1em; margin-top: 1em;
} }

2
src/components/Layout/Footer/Footer.astro
View File

@ -1,6 +1,6 @@
--- ---
import "./Footer.scss"; import "./Footer.scss";
import logo from "../../../../src/assets/lume-logo.png"; import logo from "/src/assets/lume-logo.png";
--- ---
<footer> <footer>

23
src/components/Layout/Footer/Footer.scss
View File

@ -1,19 +1,20 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
footer { footer {
display: flex; display: flex;
gap: 2%; gap: 2%;
padding-top: 3.16%; padding-top: 7em;
padding-bottom: 4.61%; padding-bottom: 8em;
@include fluid-padding-lr; @include fluid-padding-lr;
font-family: $font-family-jaldi; font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem); @include fluid-font-size(0.625rem);
background: $color-blue-charcoal; background: $color-blue-charcoal;
> div { > div {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
@include fluid-font-size(1.375rem);
&:first-child { &:first-child {
flex-grow: 1.5 !important; flex-grow: 1.5 !important;
@ -100,23 +101,27 @@ footer {
@media screen and (max-width: 47.99999rem) { @media screen and (max-width: 47.99999rem) {
footer { footer {
flex-direction: column; flex-direction: column;
padding-top: 1.25rem; padding-top: 1.5rem;
padding-bottom: 5rem; padding-bottom: 5rem;
text-align: center; text-align: center;
font-size: 1.3125rem;
> div { > div {
margin-top: 2.5rem; margin-top: 2rem;
font-size: 1.25rem;
} }
> div:first-child { > div:first-child {
margin-top: 5rem; margin-top: 4rem;
order: 2; order: 2;
} }
img { img {
width: 8.4375rem; width: 8.4375rem;
} }
h5 {
font-size: 1.625rem;
}
} }
.footer-contact { .footer-contact {

6
src/components/Layout/JoinCommunity/JoinCommunity.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#join-community { #join-community {
display: flex; display: flex;
@ -50,7 +50,7 @@
p { p {
font-family: $font-family-jaldi; font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.5rem);
line-height: 157%; line-height: 157%;
} }

2
src/components/Layout/Navbar/Navbar.jsx
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import './Navbar.scss'; import './Navbar.scss';
import logo from '../../../../src/assets/lume-logo.png'; import logo from '/src/assets/lume-logo.png';
function Navbar({ view }) { function Navbar({ view }) {
const [nav, setNav] = useState(false); const [nav, setNav] = useState(false);

8
src/components/Layout/Navbar/Navbar.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
nav { nav {
display: flex; display: flex;
@ -13,7 +13,7 @@ nav {
flex-shrink: 0; flex-shrink: 0;
img { img {
@include fluid-width-height(11.25rem, 3.75rem); @include fluid-width-height(13.125rem, 4.375rem);
} }
} }
} }
@ -25,6 +25,7 @@ menu {
li > a { li > a {
display: block; display: block;
padding: 0.55em 0.9em; padding: 0.55em 0.9em;
@include fluid-font-size(1.375rem);
text-decoration: underline; text-decoration: underline;
text-decoration-color: transparent; text-decoration-color: transparent;
transition: text-decoration-color $transition-duration; transition: text-decoration-color $transition-duration;
@ -36,6 +37,7 @@ menu {
.download-btn { .download-btn {
margin-left: 0.9em; margin-left: 0.9em;
@include fluid-font-size(1.375rem);
text-decoration: none; text-decoration: none;
} }
} }

2
src/components/Vision/Community/Community.astro
View File

@ -2,7 +2,7 @@
import './Community.scss'; import './Community.scss';
--- ---
<section id="vision-community"> <section id="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>

18
src/components/Vision/Community/Community.scss
View File

@ -1,14 +1,12 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#vision-community { #community {
position: relative; position: relative;
background-image: url("../../../assets/community-power-bg.png"); background-image: url("/src/assets/community-power-bg.png");
margin-top: 7.8125rem; background-size: max(157.5em, 100%);
background-size: max(75rem, 100%);
background-position: right; background-position: right;
padding-top: max(29.25rem, 39.02%); padding-top: max(61.4525em, 39.0175%);
@include fluid-font-size(1.3125rem);
.feature-group { .feature-group {
position: absolute; position: absolute;
@ -18,15 +16,13 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@include fluid-margin-lr; @include fluid-margin-lr;
max-width: 27em; max-width: 64em;
} }
@media screen and (max-width: 80rem) {
p { p {
background: rgba($color-blue-charcoal, 0.65); background: rgba($color-blue-charcoal, 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;
} }
}
} }

2
src/components/Vision/Grid/Grid.astro
View File

@ -2,7 +2,7 @@
import './Grid.scss'; import './Grid.scss';
--- ---
<section id="vision-grid" class="feature-grid"> <section id="grid" class="feature-grid">
<div> <div>
<h2>Freedom. Privacy. Ownership.</h2> <h2>Freedom. Privacy. Ownership.</h2>
</div> </div>

6
src/components/Vision/Grid/Grid.scss
View File

@ -1,7 +1,7 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#vision-grid { #grid {
padding-top: 2.05em; padding-top: 2.05em;
padding-bottom: 2.05em; padding-bottom: 2.05em;

2
src/components/Vision/Jumbotron/Jumbotron.astro
View File

@ -2,7 +2,7 @@
import '../../../styles/jumbotron.scss'; import '../../../styles/jumbotron.scss';
--- ---
<section id="vision-jumbotron" class="jumbotron"> <section id="jumbotron">
<h1> <h1>
Easy Web3 access, storage, publishing, and payment for content creation. Easy Web3 access, storage, publishing, and payment for content creation.
</h1> </h1>

2
src/components/Vision/People/People.astro
View File

@ -2,7 +2,7 @@
import './People.scss'; import './People.scss';
--- ---
<section id="vision-people"> <section id="people">
<div class="feature-group"> <div class="feature-group">
<h2>Community-Powered</h2> <h2>Community-Powered</h2>
<h3>All about the people, no VC here.</h3> <h3>All about the people, no VC here.</h3>

27
src/components/Vision/People/People.scss
View File

@ -1,35 +1,34 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#vision-people { #people {
position: relative; position: relative;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
max-width: 185.6em;
min-height: 78.4em;
margin: 0 auto; margin: 0 auto;
@include fluid-font-size(1.3125rem);
max-width: 88em;
min-height: 28em;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: min(0rem, calc((100vw - 40rem) / 2)); left: min(0em, calc((100% - 95em) / 2));
width: 100%; width: calc(100% - 64em - 7.5%);
min-width: 40rem; min-width: 95em;
background-image: url("../../../assets/double-brand-bg.png"); background-image: url("/src/assets/double-brand-bg.png");
background-position: 0; background-position: 50% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
z-index: -1; z-index: -1;
} }
.feature-group { .feature-group {
max-width: 28em; box-sizing: content-box;
padding: 4.14em 0; padding: 9em 7.5%;
@include fluid-margin-lr; max-width: 64em;
} }
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {

2
src/components/What/Astronaut/Astronaut.astro
View File

@ -2,7 +2,7 @@
import './Astronaut.scss'; import './Astronaut.scss';
--- ---
<section id="what-astronaut"> <section id="astronaut">
<div class="feature-group"> <div class="feature-group">
<h2>Community-Powered</h2> <h2>Community-Powered</h2>
<h3>Re-defining Web3, for the good of all</h3> <h3>Re-defining Web3, for the good of all</h3>

43
src/components/What/Astronaut/Astronaut.scss
View File

@ -1,38 +1,37 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/mixins.scss";
@import "../../../styles/vars.scss"; @import "/src/styles/vars.scss";
#what-astronaut { #astronaut {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 36.72em; min-height: 71.1em;
@include fluid-font-size(1.3125rem); background: $color-blue-charcoal;
background-image: url("../../../assets/astronaut.png");
background-position: 100%;
background-repeat: no-repeat;
background-size: contain;
&::before { &::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: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
z-index: 1;
} }
> div { .feature-group {
@include fluid-margin-lr; @include fluid-margin-lr;
max-width: 30em; max-width: 64em;
padding: 3.14em 0; padding: 6em 0;
z-index: 1; 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;
}
}
} }

30
src/components/What/Building/Building.scss
View File

@ -1,10 +1,8 @@
@import "../../../styles/mixins.scss"; @import "/src/styles/vars.scss";
@import "../../../styles/vars.scss";
#building { #building {
&::before { &::before {
bottom: -12%; bottom: -50%;
} }
> div { > div {
@ -12,21 +10,20 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
max-width: 88em; max-width: 185.6em;
min-height: 28em; min-height: 58.8em;
margin: 0 auto; margin: 0 auto;
@include fluid-font-size(1.3125rem);
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 4%; top: 2.3em;
bottom: 0; bottom: -2.3em;
left: min(0rem, calc((100vw - 40rem) / 2)); left: min(0em, calc((100% - 77.56em) / 2));
width: 100%; width: calc(100% - 64em - 7.5%);
min-width: 40rem; min-width: 77.56em;
background-image: url("../../../assets/double-brand-bg.png"); background-image: url("/src/assets/double-brand-bg.png");
background-position: 0; background-position: 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
z-index: -1; z-index: -1;
@ -34,9 +31,8 @@
} }
.feature-group { .feature-group {
max-width: 28em; max-width: 64em;
padding: 7em 0 5em; margin: 7em 7.5% 5em;
@include fluid-margin-lr;
} }
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {

2
src/components/What/Grid/Grid.astro
View File

@ -2,7 +2,7 @@
import './Grid.scss'; import './Grid.scss';
--- ---
<section id="what-grid" class="feature-grid"> <section id="grid" class="feature-grid">
<div> <div>
<h3>Build Your Site, Censorship Free</h3> <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> <p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>

3
src/components/What/Grid/Grid.scss
View File

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

2
src/components/What/Jumbotron/Jumbotron.astro
View File

@ -2,7 +2,7 @@
import '../../../styles/jumbotron.scss'; import '../../../styles/jumbotron.scss';
--- ---
<section id="what-jumbotron" class="jumbotron"> <section id="jumbotron">
<h1> <h1>
A new web that is fair and accessible to all, where each user can have a say in its infrastructure. A new web that is fair and accessible to all, where each user can have a say in its infrastructure.
</h1> </h1>

2
src/env.d.ts vendored
View File

@ -1 +1 @@
/// <reference types="astro/client" /> /// <reference types="@astrojs/image/client" />

2
src/layouts/Layout.astro
View File

@ -17,7 +17,7 @@ const { view, title } = Astro.props;
<head> <head>
<title>{title}</title> <title>{title}</title>
<meta charset="utf-8" /> <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="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" /> <meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
</head> </head>

22
src/pages/index.astro
View File

@ -1,23 +1,23 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import CTO from '../components/Home/CTO/CTO.astro'; import Typewriter from '../components/Home/Typewriter/Typewriter.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 Vision from '../components/Home/Vision/Vision.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"> <Layout view="home" title="Lume Web - Web3 for the masses">
<Header /> <Typewriter />
<Vision /> <Vision />
<WhatIsWeb3 /> <Web3 />
<PoweredBy /> <PoweredBy />
<Meme /> <Meme />
<Grids /> <Grid />
<Socials /> <Socials />
<CTO /> <CTO />
<Message /> <Message />

129
src/styles/global.scss
View File

@ -1,5 +1,5 @@
@import "mixins.scss"; @import "./mixins.scss";
@import "vars.scss"; @import "./vars.scss";
@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400"); @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 { &:hover {
color: $color-white; color: $color-white;
background: transparent; background: $color-blue-charcoal;
}
}
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;
} }
} }
@ -110,6 +59,7 @@ main.donate {
h2 { h2 {
margin-bottom: 1em; margin-bottom: 1em;
@include fluid-font-size(1.5625rem); @include fluid-font-size(1.5625rem);
font-weight: 700;
line-height: 100%; line-height: 100%;
text-transform: uppercase; text-transform: uppercase;
color: $color-aquamarine; color: $color-aquamarine;
@ -122,13 +72,13 @@ main.donate {
} }
h2, h3 { h2, h3 {
font-weight: 700;
text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65); 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; font-family: $font-family-jaldi;
line-height: 167%; line-height: 148%;
color: $color-cloud; color: $color-cloud;
transition: background $transition-duration; transition: background $transition-duration;
} }
@ -139,10 +89,12 @@ main.donate {
ul { ul {
list-style-type: disc; list-style-type: disc;
margin-left: 1.5em; margin-left: 1em;
} }
.btn-main { .btn-main {
font-family: $font-family-jaldi;
@include fluid-font-size(1.5rem);
margin-top: 1.57em; margin-top: 1.57em;
} }
} }
@ -150,13 +102,13 @@ main.donate {
.feature-grid { .feature-grid {
display: grid; display: grid;
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
grid-auto-rows: 1fr;
gap: 0.9em; gap: 0.9em;
@include fluid-padding-lr; @include fluid-padding-lr;
@include fluid-font-size(1.25rem); @include fluid-font-size(1.25rem);
@media screen and (min-width: 48rem) { @media screen and (min-width: 48rem) {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
} }
@media screen and (min-width: 64rem) { @media screen and (min-width: 64rem) {
@ -180,14 +132,14 @@ main.donate {
} }
h3 { h3 {
@include fluid-font-size(1.875rem); @include fluid-font-size(2rem);
line-height: 103.33%; line-height: 109%;
} }
p { p {
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.375rem);
margin-top: 0.67em; margin-top: 0.67em;
line-height: 123.81%; line-height: 124%;
color: $color-cloud; color: $color-cloud;
} }
} }
@ -225,3 +177,54 @@ main.donate {
z-index: -1; 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;
}
}

8
src/styles/jumbotron.scss
View File

@ -1,15 +1,17 @@
@import "./mixins.scss"; @import "./mixins.scss";
@import "./vars.scss"; @import "./vars.scss";
.jumbotron { #jumbotron {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 18.78em; margin: 12.5em 7.5% 15em;
margin: 12.5em 7.5% 0;
h1 { h1 {
display: flex;
align-items: center;
max-width: 21em; max-width: 21em;
height: 2.74em;
font-family: $font-family-ibm-plex-sans-devanagari; font-family: $font-family-ibm-plex-sans-devanagari;
@include fluid-font-size-s(3.6875rem); @include fluid-font-size-s(3.6875rem);
line-height: 137%; line-height: 137%;

99
src/styles/mixins.scss
View File

@ -1,7 +1,7 @@
@use "sass:math"; @use "sass:math";
$min-vw: 80rem; $min-vw: 56rem;
$max-vw: 384rem; $max-vw: 476rem; // 336rem, 616rem
$screen-min: 24rem; // 384px $screen-min: 24rem; // 384px
$screen-sm: 48rem; // 768px $screen-sm: 48rem; // 768px
@ -13,30 +13,9 @@ $screen-default: 96rem; // 1536px
@return math.div($value, ($value * 0 + 1)); @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) { @mixin fluid-font-size($font-size) {
$min-font-size: calc($font-size / 1.2); $min-font-size: calc($font-size * 0.75);
$max-font-size: calc($font-size * 2); $max-font-size: calc($font-size * 2.5);
$u1: unit($min-vw); $u1: unit($min-vw);
$u2: unit($max-vw); $u2: unit($max-vw);
@ -58,9 +37,9 @@ $screen-default: 96rem; // 1536px
} }
@mixin fluid-font-size-s($font-size) { @mixin fluid-font-size-s($font-size) {
$min-font-size: calc($font-size / 4.8); $min-font-size: calc($font-size * 0.5);
$medium-font-size: calc($font-size / 1.2); $medium-font-size: calc($font-size * 0.75);
$max-font-size: calc($font-size * 2); $max-font-size: calc($font-size * 2.5);
$u1: unit($min-vw); $u1: unit($min-vw);
$u2: unit($max-vw); $u2: unit($max-vw);
@ -71,7 +50,35 @@ $screen-default: 96rem; // 1536px
font-size: $min-font-size; font-size: $min-font-size;
@media screen and (min-width: 20rem) { @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) { @media screen and (min-width: $min-vw) {
@ -86,11 +93,11 @@ $screen-default: 96rem; // 1536px
} }
@mixin fluid-width-height($width, $height) { @mixin fluid-width-height($width, $height) {
$min-width: calc($width / 1.2); $min-width: calc($width * 0.75);
$max-width: calc($width * 2); $max-width: calc($width * 2.5);
$min-height: calc($height / 1.2); $min-height: calc($height * 0.75);
$max-height: calc($height * 2); $max-height: calc($height * 2.5);
$u1: unit($min-vw); $u1: unit($min-vw);
$u2: unit($max-vw); $u2: unit($max-vw);
@ -116,8 +123,8 @@ $screen-default: 96rem; // 1536px
} }
@mixin fluid-width($width) { @mixin fluid-width($width) {
$min-width: calc($width / 1.2); $min-width: calc($width * 0.75);
$max-width: calc($width * 2); $max-width: calc($width * 2.5);
$u1: unit($min-vw); $u1: unit($min-vw);
$u2: unit($max-vw); $u2: unit($max-vw);
@ -139,8 +146,8 @@ $screen-default: 96rem; // 1536px
} }
@mixin fluid-height($height) { @mixin fluid-height($height) {
$min-height: calc($height / 1.2); $min-height: calc($height * 0.75);
$max-height: calc($height * 2); $max-height: calc($height * 2.5);
$u1: unit($min-vw); $u1: unit($min-vw);
$u2: unit($max-vw); $u2: unit($max-vw);
@ -162,11 +169,11 @@ $screen-default: 96rem; // 1536px
} }
@mixin fluid-max-width-height($width, $height) { @mixin fluid-max-width-height($width, $height) {
$min-width: calc($width / 1.2); $min-width: calc($width * 0.75);
$max-width: calc($width * 2); $max-width: calc($width * 2.5);
$min-height: calc($height / 1.2); $min-height: calc($height * 0.75);
$max-height: calc($height * 2); $max-height: calc($height * 2.5);
$u1: unit($min-vw); $u1: unit($min-vw);
$u2: unit($max-vw); $u2: unit($max-vw);
@ -195,7 +202,7 @@ $screen-default: 96rem; // 1536px
$min-vw: 48rem; $min-vw: 48rem;
$max-vw: 96rem; $max-vw: 96rem;
$min-margin: 3.75%; $min-margin: 7.5%;
$max-margin: 7.5%; $max-margin: 7.5%;
& { & {
@ -219,7 +226,7 @@ $screen-default: 96rem; // 1536px
$min-vw: 48rem; $min-vw: 48rem;
$max-vw: 96rem; $max-vw: 96rem;
$min-padding: 3.75%; $min-padding: 7.5%;
$max-padding: 7.5%; $max-padding: 7.5%;
& { & {
@ -242,7 +249,7 @@ $screen-default: 96rem; // 1536px
$min-vw: 48rem; $min-vw: 48rem;
$max-vw: 96rem; $max-vw: 96rem;
$min-margin: 3.75%; $min-margin: 7.5%;
$max-margin: 7.5%; $max-margin: 7.5%;
& { & {
@ -262,8 +269,8 @@ $screen-default: 96rem; // 1536px
} }
@mixin fluid-margin-lr-rem($margin) { @mixin fluid-margin-lr-rem($margin) {
$min-margin: calc($margin / 1.2); $min-margin: calc($margin * 0.75);
$max-margin: calc($margin * 2); $max-margin: calc($margin * 2.5);
$u1: unit($min-vw); $u1: unit($min-vw);
$u2: unit($max-vw); $u2: unit($max-vw);