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

feat: mobile menu, css cleanup, component details

This commit is contained in:
cymon 2023-05-31 22:30:45 +00:00
parent b86e45511e
commit 0c6391e3a1
26 changed files with 280 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/donate-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

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

@ -1,5 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#donate-how { #donate-how {
display: flex; display: flex;
@ -22,9 +22,9 @@
max-width: 29em; max-width: 29em;
} }
@media screen and (width < 80rem) { @media screen and (max-width: 80rem) {
p { p {
background: rgba($body-bg-darker, 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;

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

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#donate-legal { #donate-legal {
display: flex; display: flex;
@ -15,10 +16,10 @@
p { p {
margin-top: 1.5em; margin-top: 1.5em;
font-family: var(--font-family-jaldi); font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
line-height: 157%; line-height: 157%;
color: var(--cloud); color: $color-cloud;
} }
strong { strong {

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

@ -1,5 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#donate-methods { #donate-methods {
display: flex; display: flex;
@ -21,7 +21,7 @@
gap: 0.9em; gap: 0.9em;
@include fluid-font-size(1.25rem); @include fluid-font-size(1.25rem);
@media screen and (width >= 48rem) { @media screen and (min-width: 48rem) {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@ -30,13 +30,13 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 2.95em 1.95em; padding: 2.95em 1.95em;
background: $body-bg-darker; background: $color-blue-charcoal;
border: 0.05em solid transparent; border: 0.05em solid transparent;
border-radius: 0.5em; border-radius: 0.5em;
transition: border-color 200ms; transition: border-color 200ms;
&:hover { &:hover {
border-color: var(--aquamarine); border-color: $color-aquamarine;
} }
> div { > div {
@ -57,9 +57,9 @@
p { p {
margin-top: 1.5em; margin-top: 1.5em;
font-family: var(--font-family-jaldi); font-family: $font-family-jaldi;
@include fluid-font-size(1.0625rem); @include fluid-font-size(1.0625rem);
line-height: 157%; line-height: 157%;
color: var(--cloud); color: $color-cloud;
} }
} }

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

@ -1,29 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
@mixin fluid-margin {
$min-vw: 48rem;
$max-vw: 96rem;
$min-margin: 3.75%;
$max-margin: 7.5%;
& {
margin-left: min(calc(43.9em + $min-margin), max($min-margin, calc(100vw - 28em - $min-margin)));
margin-right: $min-margin;
@media screen and (width >= $min-vw) {
$margin: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
margin-left: min(calc(43.9em + $margin), max($margin, calc(100vw - 28em - $margin)));
margin-right: $margin;
}
@media screen and (width >= $max-vw) {
margin-left: min(calc(43.9em + $max-margin), max($max-margin, calc(100vw - 28em - $max-margin)));
margin-right: $max-margin;
}
}
}
#donate-why { #donate-why {
position: relative; position: relative;
@ -35,25 +11,35 @@
top: 0; top: 0;
left: 0; left: 0;
width: 92.2em; width: 92.2em;
max-width: 100vw; max-width: 200vw;
height: 58.8em; height: 58.8em;
background-image: url("../../../assets/donate-why-bg.png"); background-image: url("../../../assets/donate-why-bg.png");
background-position: 0%; background-position: 0%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
z-index: -1;
} }
> div { .feature-group {
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
@include fluid-margin; @include fluid-position-left(43.9em, 28em);
max-width: 29em; max-width: 29em;
padding: 0.5em 0; padding: 0.5em 0;
} }
@media screen and (width < 80rem) { @media screen and (max-width: 80rem) {
ul, p {
background: rgba($color-body-bg, 0.65);
}
ul {
border-radius: 0.5em 0.5em 0 0;
padding: 0.3em 0.5em 0.3em 2em;
margin: -0.3em -0.5em 0.28em;
}
p { p {
background: rgba($body-bg, 0.65); border-radius: 0 0 0.5em 0.5em;
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;
} }

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

@ -1,11 +1,11 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-cto { #home-cto {
min-height: 28em; min-height: 28em;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
background-image: url("../../../assets/geometric-bg.webp"); background-image: url("../../../assets/geometric-bg.webp");
background-position: 99% 100%; background-position: 99%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@ -16,12 +16,12 @@
} }
.bio { .bio {
display: flex; display: inline-flex;
align-items: center; align-items: center;
margin-top: 1.57em; margin-top: 1.57em;
gap: 1.33em; gap: 1.33em;
font-family: var(--font-family-jaldi); font-family: $font-family-jaldi;
color: var(--cloud); color: $color-cloud;
img { img {
@include fluid-width-height(5.875rem, 5.875rem); @include fluid-width-height(5.875rem, 5.875rem);
@ -30,16 +30,20 @@
strong { strong {
@include fluid-font-size(1.625rem); @include fluid-font-size(1.625rem);
line-height: 133%; line-height: 133%;
color: var(--white); color: $color-white;
} }
} }
@media screen and (width < 80rem) { @media screen and (max-width: 80rem) {
p { p, .bio {
background: rgba($body-bg, 0.65); background: rgba($color-body-bg, 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;
} }
.bio {
margin-top: 1.27em;
}
} }
} }

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

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-header { #home-header {
display: flex; display: flex;
@ -14,4 +15,8 @@
letter-spacing: -0.06em; letter-spacing: -0.06em;
text-align: center; text-align: center;
} }
.highlight {
color: $color-aquamarine;
}
} }

35
src/components/Home/Header/HeaderContent.jsx
View File

@ -1,26 +1,25 @@
import Typewriter from "typewriter-effect"; import Typewriter from "typewriter-effect";
const HeaderContent = () => { const HeaderContent = () => {
var headerStrings = [ var
`Access to the web <br /> for the masses`, `An open web for business`, `Web3 for the masses`, `Web3 for you` headerStrings = [
'Access to the web <br /> for the masses',
'An open web for business',
'Web3 for the masses',
'Web3 for you'
], ],
randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)]; randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)],
function lastWord(words) { words = randomString.split(' ');
var n = words.split(" ");
return n[n.length - 1];
}
var lastIndex = randomString.lastIndexOf(" ");
return ( return (
<Typewriter options={{ cursor: `<span class="text-[color:var(--aquamarine)]">_</span>` }} onInit={ <Typewriter options={{ cursor: '<span class="highlight">_</span>' }} onInit={ (typewriter) => {
(typewriter) => { typewriter
typewriter.changeDelay(50).typeString(`${ .changeDelay(50)
randomString.substring(0, lastIndex) .typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ')
}` + ' ').start(); .start();
typewriter.typeString(`<span class="text-[color:var(--aquamarine)]">${ typewriter
lastWord(randomString) .typeString('<span class="highlight">' + words[words.length - 1] + '</span>')
}</span>`) } }/>
}
}/>
); );
}; };

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

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-meme { #home-meme {
display: flex; display: flex;
@ -32,19 +33,19 @@
@include fluid-font-size(1.5625rem); @include fluid-font-size(1.5625rem);
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
color: var(--aquamarine); color: $color-aquamarine;
text-transform: uppercase; text-transform: uppercase;
} }
p { p {
font-family: var(--font-family-jaldi); font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
line-height: 123.81%; line-height: 123.81%;
color: var(--cloud); color: $color-cloud;
} }
} }
@media screen and (width < 48rem) { @media screen and (max-width: 47.99999rem) {
.meme-item { .meme-item {
div { div {
flex-direction: column; flex-direction: column;

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

@ -1,13 +1,14 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-message { #home-message {
padding-top: 3.16%; padding-top: 3.16%;
padding-bottom: 3.16%; padding-bottom: 3.16%;
@include fluid-padding-lr; @include fluid-padding-lr;
background: var(--aquamarine); background: $color-aquamarine;
color: var(--blue-charcoal); color: $color-blue-charcoal-2;
@media screen and (width < 48rem) { @media screen and (max-width: 47.99999rem) {
text-align: center; text-align: center;
} }
@ -21,7 +22,7 @@
} }
p { p {
font-family: var(--font-family-jaldi); font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
line-height: 157%; line-height: 157%;
} }

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

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-powered-by { #home-powered-by {
display: flex; display: flex;
@ -8,7 +9,7 @@
margin: 5em 0; margin: 5em 0;
@include fluid-font-size(1.25rem); @include fluid-font-size(1.25rem);
@media screen and (width < 48rem) { @media screen and (max-width: 47.99999rem) {
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
} }
@ -24,9 +25,9 @@
font-weight: 700; font-weight: 700;
line-height: 100%; line-height: 100%;
text-transform: uppercase; text-transform: uppercase;
color: var(--aquamarine); color: $color-aquamarine;
@media screen and (width >= 48rem) { @media screen and (min-width: 48rem) {
margin-top: 0.75em; margin-top: 0.75em;
} }
} }

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

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-socials { #home-socials {
display: flex; display: flex;
@ -21,7 +22,7 @@
font-weight: 700; font-weight: 700;
line-height: 100%; line-height: 100%;
text-transform: uppercase; text-transform: uppercase;
color: var(--aquamarine); color: $color-aquamarine;
} }
.github-logo { .github-logo {

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

@ -1,5 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#home-vision { #home-vision {
display: flex; display: flex;
@ -18,9 +18,9 @@
max-width: 29em; max-width: 29em;
} }
@media screen and (width < 80rem) { @media screen and (max-width: 80rem) {
p { p {
background: rgba($body-bg, 0.65); background: rgba($color-body-bg, 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;

32
src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
View File

@ -1,29 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
@mixin fluid-margin {
$min-vw: 48rem;
$max-vw: 96rem;
$min-margin: 3.75%;
$max-margin: 7.5%;
& {
margin-left: min(27.8em, max($min-margin, calc(100vw - 28em - $min-margin)));
margin-right: $min-margin;
@media screen and (width >= $min-vw) {
$margin: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
margin-left: min(calc(27.8em + $margin), max($margin, calc(100vw - 28em - $margin)));
margin-right: $margin;
}
@media screen and (width >= $max-vw) {
margin-left: min(calc(27.8em + $max-margin), max($max-margin, calc(100vw - 28em - $max-margin)));
margin-right: $max-margin;
}
}
}
#home-whatisweb3 { #home-whatisweb3 {
display: flex; display: flex;
@ -49,7 +25,7 @@
} }
.feature-group { .feature-group {
@include fluid-margin; @include fluid-position-left(27.8em, 28em);
max-width: 28em; max-width: 28em;
z-index: 1; z-index: 1;
@ -57,9 +33,9 @@
margin-top: 1em; margin-top: 1em;
} }
@media screen and (width < 80rem) { @media screen and (max-width: 80rem) {
p { p {
background: rgba(2, 13, 17, 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;

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

@ -1,5 +1,5 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss"; @import "../../../styles/vars.scss";
footer { footer {
display: flex; display: flex;
@ -7,9 +7,9 @@ footer {
padding-top: 3.16%; padding-top: 3.16%;
padding-bottom: 4.61%; padding-bottom: 4.61%;
@include fluid-padding-lr; @include fluid-padding-lr;
font-family: var(--font-family-jaldi); font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
background: $body-bg-darker; background: $color-blue-charcoal;
> div { > div {
flex-basis: 0; flex-basis: 0;
@ -27,7 +27,7 @@ footer {
} }
a:hover { a:hover {
color: var(--white); color: $color-white;
} }
h5 { h5 {
@ -39,7 +39,7 @@ footer {
li { li {
line-height: 138%; line-height: 138%;
color: var(--cloud); color: $color-cloud;
list-style-type: none; list-style-type: none;
white-space: nowrap; white-space: nowrap;
} }
@ -53,7 +53,7 @@ footer {
.footer-contact { .footer-contact {
margin: auto 0; margin: auto 0;
color: var(--cloud); color: $color-cloud;
a { a {
display: inline-flex; display: inline-flex;
@ -71,13 +71,13 @@ footer {
.footer-phrase { .footer-phrase {
margin: auto 0 0; margin: auto 0 0;
font-family: var(--font-family-jetbrains-mono); font-family: $font-family-jetbrains-mono;
font-weight: bold; font-weight: bold;
line-height: 133%; line-height: 133%;
color: var(--aquamarine); color: $color-aquamarine;
} }
@media screen and (width >= 48rem) and (width < 64rem) { @media screen and (min-width: 48rem) and (max-width: 64rem) {
footer { footer {
flex-wrap: wrap; flex-wrap: wrap;
@ -100,7 +100,7 @@ footer {
} }
} }
@media screen and (width < 48rem) { @media screen and (max-width: 47.99999rem) {
footer { footer {
flex-direction: column; flex-direction: column;
padding-top: 1.25rem; padding-top: 1.25rem;

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

@ -1,13 +1,14 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#join-community { #join-community {
padding-top: 3.16%; padding-top: 3.16%;
padding-bottom: 3.16%; padding-bottom: 3.16%;
@include fluid-padding-lr; @include fluid-padding-lr;
background: var(--aquamarine); background: $color-aquamarine;
color: var(--blue-charcoal); color: $color-blue-charcoal-2;
@media screen and (width < 48rem) { @media screen and (max-width: 48rem) {
text-align: center; text-align: center;
} }
@ -21,7 +22,7 @@
} }
p { p {
font-family: var(--font-family-jaldi); font-family: $font-family-jaldi;
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
line-height: 157%; line-height: 157%;
} }

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

@ -1,18 +1,38 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useCallback, 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);
const toggleNav = () => setNav(!nav);
const toggleNav = () => {
if(nav) {
document.body.classList.remove("scroll-lock");
setNav(false);
} else {
document.body.classList.add("scroll-lock");
setNav(true);
}
}
const onMenuClick = function(event) {
if(!nav) {
return;
}
if(event.pageX < event.target.offsetLeft) {
// click outside of menu
toggleNav();
}
}
useEffect(() => { useEffect(() => {
let resizeTimeout; let resizeTimeout;
const onResize = () => { const onResize = () => {
clearTimeout(resizeTimeout); clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => { resizeTimeout = setTimeout(() => {
if(nav && window.innerWidth >= 768) { if(nav && window.innerWidth >= 900) {
setNav(false); toggleNav();
} }
}, 25); }, 25);
}; };
@ -29,7 +49,7 @@ function Navbar({ view }) {
<img src={logo.src} alt="Lume" /> <img src={logo.src} alt="Lume" />
</a> </a>
</div> </div>
<menu className={nav ? 'active' : undefined}> <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' ? 'underline' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
</li> </li>

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

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
nav { nav {
display: flex; display: flex;
@ -36,36 +37,51 @@ menu {
font-size: 2rem; font-size: 2rem;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
margin: 0 2.125rem; margin: 0 3.75% 0 2rem;
}
@media screen and (max-width: 56rem) {
nav {
position: sticky;
top: 0;
background: rgba($color-body-bg, 0.85);
z-index: 1;
} }
@media screen and (width < 48rem) {
menu { menu {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
position: absolute; position: fixed;
top: -100vh; top: 0;
right: 3%; right: min(20rem, -100vw);
padding: 1rem; bottom: 0;
font-size: 1.25rem; padding: 7.5em 7.5% 1em;
background: var(--blue-charcoal); background: rgba($color-body-bg, 0.85);
border: 1px solid red; transition: right 200ms;
border-radius: 0.5rem; overflow-y: auto;
transition: top 250ms;
z-index: 1;
&.active { &.active {
top: 1.4rem; right: 0;
&::before {
content: "";
position: fixed;
inset: 0;
background: $color-black;
animation: 200ms bg-opacity forwards;
z-index: -1;
}
} }
li > a { li > a {
padding-top: 0.5rem; font-size: 1.25rem;
padding-bottom: 0.5rem; padding-left: 0.8em;
} }
.download-btn { .download-btn {
margin: 0.5rem 0 0 0; font-size: 1.25rem;
margin: 1.1em 0 0 0;
} }
} }
@ -73,3 +89,13 @@ menu {
display: block; display: block;
} }
} }
@keyframes bg-opacity {
0% {
opacity: 0;
}
100% {
opacity: 0.85;
}
}

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

@ -1,5 +1,5 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/colors.scss"; @import "../../../styles/vars.scss";
#vision-community-power { #vision-community-power {
position: relative; position: relative;
@ -21,9 +21,9 @@
max-width: 27em; max-width: 27em;
} }
@media screen and (width < 80rem) { @media screen and (max-width: 80rem) {
p { p {
background: rgba($body-bg-darker, 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;

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

@ -1,4 +1,5 @@
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#vision-grid { #vision-grid {
padding-top: 2.05em; padding-top: 2.05em;
@ -10,10 +11,10 @@
} }
h2 { h2 {
font-family: var(--font-family-jetbrains-mono); font-family: $font-family-jetbrains-mono;
@include fluid-font-size(2.75rem); @include fluid-font-size(2.75rem);
font-weight: 700; font-weight: 700;
line-height: 129.55%; line-height: 129.55%;
color: var(--aquamarine); color: $color-aquamarine;
} }
} }

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

@ -1,5 +1,5 @@
@import "../../../styles/colors.scss";
@import "../../../styles/mixins.scss"; @import "../../../styles/mixins.scss";
@import "../../../styles/vars.scss";
#what-astronaut { #what-astronaut {
position: relative; position: relative;
@ -28,9 +28,9 @@
z-index: 1; z-index: 1;
} }
@media screen and (width < 80rem) { @media screen and (max-width: 80rem) {
p { p {
background: rgba($body-bg-darker, 0.65); background: rgba($color-blue-charcoal, 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;

12
src/styles/colors.scss
View File

@ -1,12 +0,0 @@
$body-bg: #031418;
$body-bg-darker: #020e10;
$primary-dark: #000;
$primary-light: #fff;
$black: rgba(0 0 0);
$blue-charcoal: #010e10;
$blue-charcoal-2: rgba(3 21 24);
$aquamarine: rgba(122 252 187);
$cloud: rgba(199 199 199);
$alto: rgba(217 217 217);
$white: rgba(255 255 255);

81
src/styles/global.scss
View File

@ -1,5 +1,5 @@
@import "colors.scss";
@import "mixins.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"); @import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
@ -7,24 +7,11 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
--black: rgba(0 0 0);
--white: rgba(255 255 255);
--blue-charcoal: #010e10;
--blue-charcoal-2: rgba(3 21 24);
--aquamarine: rgba(122 252 187);
--cloud: rgba(199 199 199);
--alto: rgba(217 217 217);
--font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
--font-family-jaldi: "Jaldi";
--font-family-jetbrains-mono: "JetBrains Mono";
}
html { html {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
min-width: 20rem; min-width: 20rem;
min-height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -33,9 +20,14 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: "JetBrains Mono", sans-serif; font-family: "JetBrains Mono", sans-serif;
background: $body-bg; background: $color-body-bg;
color: #fff; color: $color-white;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll;
&.scroll-lock {
overflow-y: hidden;
}
} }
main { main {
@ -49,15 +41,15 @@ a {
.btn-main { .btn-main {
display: inline-block; display: inline-block;
color: var(--black); color: $color-black;
background: var(--aquamarine); background: $color-aquamarine;
border: 0.05em solid var(--aquamarine); border: 0.05em solid $color-aquamarine;
padding: 0.5em 0.8em; padding: 0.5em 0.8em;
border-radius: 0.25em; border-radius: 0.25em;
transition: color 200ms, background 200ms; transition: color 200ms, background 200ms;
&:hover { &:hover {
color: var(--white); color: $color-white;
background: transparent; background: transparent;
} }
} }
@ -72,7 +64,7 @@ main.vision {
left: 50%; left: 50%;
margin-left: max(-51.55em, -50vw); margin-left: max(-51.55em, -50vw);
z-index: -1; z-index: -1;
background: url(../assets/vision-bg.png); background: url("../assets/vision-bg.png");
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -85,11 +77,28 @@ main.what {
position: absolute; position: absolute;
width: max(min(151.3em, 100vw), 32em); width: max(min(151.3em, 100vw), 32em);
height: max(min(122.4em, 100vw), 56em); height: max(min(122.4em, 100vw), 56em);
top: -20em; top: -2em;
left: 50%; left: 50%;
margin-left: max(-75.65em, -50vw); margin-left: max(-75.65em, -50vw);
z-index: -1; z-index: -1;
background: url(../assets/what-bg.png); 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-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -102,7 +111,7 @@ main.what {
@include fluid-font-size(1.5625rem); @include fluid-font-size(1.5625rem);
line-height: 100%; line-height: 100%;
text-transform: uppercase; text-transform: uppercase;
color: var(--aquamarine); color: $color-aquamarine;
} }
h3 { h3 {
@ -113,13 +122,13 @@ main.what {
h2, h3 { h2, h3 {
font-weight: 700; font-weight: 700;
text-shadow: 1px 1px 2px rgba($body-bg-darker, 0.65); text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
} }
p, li { p, li {
font-family: var(--font-family-jaldi); font-family: $font-family-jaldi;
line-height: 167%; line-height: 167%;
color: var(--cloud); color: $color-cloud;
transition: background 200ms; transition: background 200ms;
} }
@ -142,11 +151,11 @@ main.what {
@include fluid-padding-lr; @include fluid-padding-lr;
@include fluid-font-size(1.25rem); @include fluid-font-size(1.25rem);
@media screen and (width >= 48rem) { @media screen and (min-width: 48rem) {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@media screen and (width >= 64rem) { @media screen and (min-width: 64rem) {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
@ -155,14 +164,14 @@ main.what {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 2.95em 1.95em; padding: 2.95em 1.95em;
background: $body-bg-darker; background: $color-blue-charcoal;
border: 0.05em solid transparent; border: 0.05em solid transparent;
border-radius: 0.5em; border-radius: 0.5em;
font-family: var(--font-family-jaldi); font-family: $font-family-jaldi;
transition: border-color 200ms; transition: border-color 200ms;
&:hover { &:hover {
border-color: var(--aquamarine); border-color: $color-aquamarine;
} }
} }
@ -175,7 +184,7 @@ main.what {
@include fluid-font-size(1.3125rem); @include fluid-font-size(1.3125rem);
margin-top: 0.67em; margin-top: 0.67em;
line-height: 123.81%; line-height: 123.81%;
color: var(--cloud); color: $color-cloud;
} }
} }
@ -190,7 +199,7 @@ main.what {
bottom: 0; bottom: 0;
left: -5%; left: -5%;
margin: 2% 0; margin: 2% 0;
background: $body-bg-darker; background: $color-blue-charcoal;
transform: matrix(1, -0.04, 0.04, 1, 0, 0); transform: matrix(1, -0.04, 0.04, 1, 0, 0);
z-index: -1; z-index: -1;
} }
@ -207,7 +216,7 @@ main.what {
bottom: 0; bottom: 0;
left: -5%; left: -5%;
margin: 2% 0; margin: 2% 0;
background: $body-bg-darker; background: $color-blue-charcoal;
transform: matrix(1, 0.04, -0.04, 1, 0, 0); transform: matrix(1, 0.04, -0.04, 1, 0, 0);
z-index: -1; z-index: -1;
} }

6
src/styles/jumbotron.scss
View File

@ -1,5 +1,5 @@
@import "./mixins.scss"; @import "./mixins.scss";
@import "./colors.scss"; @import "./vars.scss";
.jumbotron { .jumbotron {
display: flex; display: flex;
@ -10,11 +10,11 @@
h1 { h1 {
max-width: 21em; max-width: 21em;
font-family: var(--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%;
letter-spacing: -0.06em; letter-spacing: -0.06em;
text-align: center; text-align: center;
text-shadow: 0.017em 0.017em 0.034em rgba($body-bg-darker, 0.65); text-shadow: 0.017em 0.017em 0.034em rgba($color-blue-charcoal, 0.65);
} }
} }

54
src/styles/mixins.scss
View File

@ -46,11 +46,11 @@ $screen-default: 96rem; // 1536px
& { & {
font-size: $min-font-size; font-size: $min-font-size;
@media screen and (width >= $min-vw) { @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)})); 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 (width >= $max-vw) { @media screen and (min-width: $max-vw) {
font-size: $max-font-size; font-size: $max-font-size;
} }
} }
@ -70,15 +70,15 @@ $screen-default: 96rem; // 1536px
& { & {
font-size: $min-font-size; font-size: $min-font-size;
@media screen and (width >= 20rem) and (width < $min-vw) { @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) / (80 - 20)));
} }
@media screen and (width >= $min-vw) { @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)})); 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 (width >= $max-vw) { @media screen and (min-width: $max-vw) {
font-size: $max-font-size; font-size: $max-font-size;
} }
} }
@ -102,12 +102,12 @@ $screen-default: 96rem; // 1536px
width: $min-width; width: $min-width;
height: $min-height; height: $min-height;
@media screen and (width >= $min-vw) { @media screen and (min-width: $min-vw) {
width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
} }
@media screen and (width >= $max-vw) { @media screen and (min-width: $max-vw) {
width: $max-width; width: $max-width;
height: $max-height; height: $max-height;
} }
@ -127,11 +127,11 @@ $screen-default: 96rem; // 1536px
& { & {
width: $min-width; width: $min-width;
@media screen and (width >= $min-vw) { @media screen and (min-width: $min-vw) {
width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); width: calc(#{$min-width} + #{strip-unit($max-width - $min-width)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
} }
@media screen and (width >= $max-vw) { @media screen and (min-width: $max-vw) {
width: $max-width; width: $max-width;
} }
} }
@ -150,17 +150,41 @@ $screen-default: 96rem; // 1536px
& { & {
height: $min-height; height: $min-height;
@media screen and (width >= $min-vw) { @media screen and (min-width: $min-vw) {
height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); height: calc(#{$min-height} + #{strip-unit($max-height - $min-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
} }
@media screen and (width >= $max-vw) { @media screen and (min-width: $max-vw) {
height: $max-height; height: $max-height;
} }
} }
} }
} }
@mixin fluid-position-left($offset, $width) {
$min-vw: 48rem;
$max-vw: 96rem;
$min-margin: 3.75%;
$max-margin: 7.5%;
& {
margin-left: min(calc($offset + $min-margin), max($min-margin, calc(100vw - $width - $min-margin)));
margin-right: $min-margin;
@media screen and (min-width: $min-vw) {
$margin: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
margin-left: min(calc($offset + $margin), max($margin, calc(100vw - $width - $margin)));
margin-right: $margin;
}
@media screen and (min-width: $max-vw) {
margin-left: min(calc($offset + $max-margin), max($max-margin, calc(100vw - $width - $max-margin)));
margin-right: $max-margin;
}
}
}
@mixin fluid-padding-lr { @mixin fluid-padding-lr {
$min-vw: 48rem; $min-vw: 48rem;
$max-vw: 96rem; $max-vw: 96rem;
@ -172,12 +196,12 @@ $screen-default: 96rem; // 1536px
padding-left: $min-padding; padding-left: $min-padding;
padding-right: $min-padding; padding-right: $min-padding;
@media screen and (width >= $min-vw) { @media screen and (min-width: $min-vw) {
padding-left: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); padding-left: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
padding-right: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); padding-right: calc(#{$min-padding} + #{strip-unit($max-padding - $min-padding)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
} }
@media screen and (width >= $max-vw) { @media screen and (min-width: $max-vw) {
padding-left: $max-padding; padding-left: $max-padding;
padding-right: $max-padding; padding-right: $max-padding;
} }
@ -195,12 +219,12 @@ $screen-default: 96rem; // 1536px
margin-left: $min-margin; margin-left: $min-margin;
margin-right: $min-margin; margin-right: $min-margin;
@media screen and (width >= $min-vw) { @media screen and (min-width: $min-vw) {
margin-left: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); margin-left: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
margin-right: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); margin-right: calc(#{$min-margin} + #{strip-unit($max-margin - $min-margin)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
} }
@media screen and (width >= $max-vw) { @media screen and (min-width: $max-vw) {
margin-left: $max-margin; margin-left: $max-margin;
margin-right: $max-margin; margin-right: $max-margin;
} }

12
src/styles/vars.scss Normal file
View File

@ -0,0 +1,12 @@
$color-body-bg: #031418;
$color-black: #000;
$color-white: #fff;
$color-blue-charcoal: #020e10;
$color-blue-charcoal-2: #031518;
$color-aquamarine: rgba(122 252 187);
$color-cloud: rgba(199 199 199);
$color-alto: rgba(217 217 217);
$font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
$font-family-jaldi: "Jaldi";
$font-family-jetbrains-mono: "JetBrains Mono";