diff --git a/src/assets/donate-bg.png b/src/assets/donate-bg.png new file mode 100644 index 0000000..d2e4690 Binary files /dev/null and b/src/assets/donate-bg.png differ diff --git a/src/components/Donate/How/How.scss b/src/components/Donate/How/How.scss index 420d5fd..4fb9996 100644 --- a/src/components/Donate/How/How.scss +++ b/src/components/Donate/How/How.scss @@ -1,5 +1,5 @@ -@import "../../../styles/colors.scss"; @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #donate-how { display: flex; @@ -22,9 +22,9 @@ max-width: 29em; } - @media screen and (width < 80rem) { + @media screen and (max-width: 80rem) { p { - background: rgba($body-bg-darker, 0.65); + background: rgba($color-blue-charcoal, 0.65); border-radius: 0.5em; padding: 0.3em 0.5em; margin: -0.3em -0.5em; diff --git a/src/components/Donate/Legal/Legal.scss b/src/components/Donate/Legal/Legal.scss index 81029e0..91bf56a 100644 --- a/src/components/Donate/Legal/Legal.scss +++ b/src/components/Donate/Legal/Legal.scss @@ -1,4 +1,5 @@ @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #donate-legal { display: flex; @@ -15,10 +16,10 @@ p { margin-top: 1.5em; - font-family: var(--font-family-jaldi); + font-family: $font-family-jaldi; @include fluid-font-size(1.3125rem); line-height: 157%; - color: var(--cloud); + color: $color-cloud; } strong { diff --git a/src/components/Donate/Methods/Methods.scss b/src/components/Donate/Methods/Methods.scss index 2cc6b11..15a7eef 100644 --- a/src/components/Donate/Methods/Methods.scss +++ b/src/components/Donate/Methods/Methods.scss @@ -1,5 +1,5 @@ -@import "../../../styles/colors.scss"; @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #donate-methods { display: flex; @@ -21,7 +21,7 @@ gap: 0.9em; @include fluid-font-size(1.25rem); - @media screen and (width >= 48rem) { + @media screen and (min-width: 48rem) { grid-template-columns: repeat(2, 1fr); } @@ -30,13 +30,13 @@ flex-direction: column; justify-content: center; padding: 2.95em 1.95em; - background: $body-bg-darker; + background: $color-blue-charcoal; border: 0.05em solid transparent; border-radius: 0.5em; transition: border-color 200ms; &:hover { - border-color: var(--aquamarine); + border-color: $color-aquamarine; } > div { @@ -57,9 +57,9 @@ p { margin-top: 1.5em; - font-family: var(--font-family-jaldi); + font-family: $font-family-jaldi; @include fluid-font-size(1.0625rem); line-height: 157%; - color: var(--cloud); + color: $color-cloud; } } diff --git a/src/components/Donate/Why/Why.scss b/src/components/Donate/Why/Why.scss index fc0e54d..0f3113f 100644 --- a/src/components/Donate/Why/Why.scss +++ b/src/components/Donate/Why/Why.scss @@ -1,29 +1,5 @@ -@import "../../../styles/colors.scss"; @import "../../../styles/mixins.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; - } - } -} +@import "../../../styles/vars.scss"; #donate-why { position: relative; @@ -35,25 +11,35 @@ top: 0; left: 0; width: 92.2em; - max-width: 100vw; + max-width: 200vw; height: 58.8em; background-image: url("../../../assets/donate-why-bg.png"); background-position: 0%; background-repeat: no-repeat; background-size: contain; + z-index: -1; } - > div { + .feature-group { @include fluid-font-size(1.3125rem); - @include fluid-margin; + @include fluid-position-left(43.9em, 28em); max-width: 29em; 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 { - background: rgba($body-bg, 0.65); - border-radius: 0 0.5em 0.5em 0; + border-radius: 0 0 0.5em 0.5em; padding: 0.3em 0.5em; margin: -0.3em -0.5em; } diff --git a/src/components/Home/CTO/CTO.scss b/src/components/Home/CTO/CTO.scss index dd13e8f..18432ee 100644 --- a/src/components/Home/CTO/CTO.scss +++ b/src/components/Home/CTO/CTO.scss @@ -1,11 +1,11 @@ -@import "../../../styles/colors.scss"; @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #home-cto { min-height: 28em; @include fluid-font-size(1.3125rem); background-image: url("../../../assets/geometric-bg.webp"); - background-position: 99% 100%; + background-position: 99%; background-repeat: no-repeat; background-size: contain; @@ -16,12 +16,12 @@ } .bio { - display: flex; + display: inline-flex; align-items: center; margin-top: 1.57em; gap: 1.33em; - font-family: var(--font-family-jaldi); - color: var(--cloud); + font-family: $font-family-jaldi; + color: $color-cloud; img { @include fluid-width-height(5.875rem, 5.875rem); @@ -30,16 +30,20 @@ strong { @include fluid-font-size(1.625rem); line-height: 133%; - color: var(--white); + color: $color-white; } } - @media screen and (width < 80rem) { - p { - background: rgba($body-bg, 0.65); + @media screen and (max-width: 80rem) { + p, .bio { + background: rgba($color-body-bg, 0.65); border-radius: 0 0.5em 0.5em 0; padding: 0.3em 0.5em; margin: -0.3em -0.5em; } + + .bio { + margin-top: 1.27em; + } } } diff --git a/src/components/Home/Header/Header.scss b/src/components/Home/Header/Header.scss index 3c26902..e934e24 100644 --- a/src/components/Home/Header/Header.scss +++ b/src/components/Home/Header/Header.scss @@ -1,4 +1,5 @@ @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #home-header { display: flex; @@ -14,4 +15,8 @@ letter-spacing: -0.06em; text-align: center; } + + .highlight { + color: $color-aquamarine; + } } diff --git a/src/components/Home/Header/HeaderContent.jsx b/src/components/Home/Header/HeaderContent.jsx index 1ba1f9e..1826c3a 100644 --- a/src/components/Home/Header/HeaderContent.jsx +++ b/src/components/Home/Header/HeaderContent.jsx @@ -1,27 +1,26 @@ import Typewriter from "typewriter-effect"; const HeaderContent = () => { - var headerStrings = [ - `Access to the web
for the masses`, `An open web for business`, `Web3 for the masses`, `Web3 for you` - ], - randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)]; - function lastWord(words) { - var n = words.split(" "); - return n[n.length - 1]; - } - var lastIndex = randomString.lastIndexOf(" "); - return ( - _` }} onInit={ - (typewriter) => { - typewriter.changeDelay(50).typeString(`${ - randomString.substring(0, lastIndex) - }` + ' ').start(); - typewriter.typeString(`${ - lastWord(randomString) - }`) - } - }/> - ); + var + headerStrings = [ + 'Access to the web
for the masses', + 'An open web for business', + 'Web3 for the masses', + 'Web3 for you' + ], + randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)], + words = randomString.split(' '); + + return ( + _' }} onInit={ (typewriter) => { + typewriter + .changeDelay(50) + .typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ') + .start(); + typewriter + .typeString('' + words[words.length - 1] + '') + } }/> + ); }; export default HeaderContent; diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss index 1675bf7..559760a 100644 --- a/src/components/Home/Meme/Meme.scss +++ b/src/components/Home/Meme/Meme.scss @@ -1,4 +1,5 @@ @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #home-meme { display: flex; @@ -32,19 +33,19 @@ @include fluid-font-size(1.5625rem); font-weight: 700; text-align: center; - color: var(--aquamarine); + color: $color-aquamarine; text-transform: uppercase; } p { - font-family: var(--font-family-jaldi); + font-family: $font-family-jaldi; @include fluid-font-size(1.3125rem); line-height: 123.81%; - color: var(--cloud); + color: $color-cloud; } } - @media screen and (width < 48rem) { + @media screen and (max-width: 47.99999rem) { .meme-item { div { flex-direction: column; diff --git a/src/components/Home/Message/Message.scss b/src/components/Home/Message/Message.scss index 365d70e..c34630b 100644 --- a/src/components/Home/Message/Message.scss +++ b/src/components/Home/Message/Message.scss @@ -1,13 +1,14 @@ @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #home-message { padding-top: 3.16%; padding-bottom: 3.16%; @include fluid-padding-lr; - background: var(--aquamarine); - color: var(--blue-charcoal); + background: $color-aquamarine; + color: $color-blue-charcoal-2; - @media screen and (width < 48rem) { + @media screen and (max-width: 47.99999rem) { text-align: center; } @@ -21,7 +22,7 @@ } p { - font-family: var(--font-family-jaldi); + font-family: $font-family-jaldi; @include fluid-font-size(1.3125rem); line-height: 157%; } diff --git a/src/components/Home/PoweredBy/PoweredBy.scss b/src/components/Home/PoweredBy/PoweredBy.scss index 9419081..41f6ef5 100644 --- a/src/components/Home/PoweredBy/PoweredBy.scss +++ b/src/components/Home/PoweredBy/PoweredBy.scss @@ -1,4 +1,5 @@ @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #home-powered-by { display: flex; @@ -8,7 +9,7 @@ margin: 5em 0; @include fluid-font-size(1.25rem); - @media screen and (width < 48rem) { + @media screen and (max-width: 47.99999rem) { flex-direction: column; gap: 1em; } @@ -24,9 +25,9 @@ font-weight: 700; line-height: 100%; text-transform: uppercase; - color: var(--aquamarine); + color: $color-aquamarine; - @media screen and (width >= 48rem) { + @media screen and (min-width: 48rem) { margin-top: 0.75em; } } diff --git a/src/components/Home/Socials/Socials.scss b/src/components/Home/Socials/Socials.scss index c0115e9..c817f07 100644 --- a/src/components/Home/Socials/Socials.scss +++ b/src/components/Home/Socials/Socials.scss @@ -1,4 +1,5 @@ @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #home-socials { display: flex; @@ -21,7 +22,7 @@ font-weight: 700; line-height: 100%; text-transform: uppercase; - color: var(--aquamarine); + color: $color-aquamarine; } .github-logo { diff --git a/src/components/Home/Vision/Vision.scss b/src/components/Home/Vision/Vision.scss index 0751d57..055ba4b 100644 --- a/src/components/Home/Vision/Vision.scss +++ b/src/components/Home/Vision/Vision.scss @@ -1,5 +1,5 @@ -@import "../../../styles/colors.scss"; @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #home-vision { display: flex; @@ -18,9 +18,9 @@ max-width: 29em; } - @media screen and (width < 80rem) { + @media screen and (max-width: 80rem) { p { - background: rgba($body-bg, 0.65); + background: rgba($color-body-bg, 0.65); border-radius: 0.5em; padding: 0.3em 0.5em; margin: -0.3em -0.5em; diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss index 2ab8262..0be4a09 100644 --- a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss +++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss @@ -1,29 +1,5 @@ -@import "../../../styles/colors.scss"; @import "../../../styles/mixins.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; - } - } -} +@import "../../../styles/vars.scss"; #home-whatisweb3 { display: flex; @@ -49,7 +25,7 @@ } .feature-group { - @include fluid-margin; + @include fluid-position-left(27.8em, 28em); max-width: 28em; z-index: 1; @@ -57,9 +33,9 @@ margin-top: 1em; } - @media screen and (width < 80rem) { + @media screen and (max-width: 80rem) { p { - background: rgba(2, 13, 17, 0.65); + background: rgba($color-blue-charcoal, 0.65); border-radius: 0.5em; padding: 0.3em 0.5em; margin: -0.3em -0.5em; diff --git a/src/components/Layout/Footer/Footer.scss b/src/components/Layout/Footer/Footer.scss index 8a4e417..ae95fdf 100644 --- a/src/components/Layout/Footer/Footer.scss +++ b/src/components/Layout/Footer/Footer.scss @@ -1,5 +1,5 @@ @import "../../../styles/mixins.scss"; -@import "../../../styles/colors.scss"; +@import "../../../styles/vars.scss"; footer { display: flex; @@ -7,9 +7,9 @@ footer { padding-top: 3.16%; padding-bottom: 4.61%; @include fluid-padding-lr; - font-family: var(--font-family-jaldi); + font-family: $font-family-jaldi; @include fluid-font-size(1.3125rem); - background: $body-bg-darker; + background: $color-blue-charcoal; > div { flex-basis: 0; @@ -27,7 +27,7 @@ footer { } a:hover { - color: var(--white); + color: $color-white; } h5 { @@ -39,7 +39,7 @@ footer { li { line-height: 138%; - color: var(--cloud); + color: $color-cloud; list-style-type: none; white-space: nowrap; } @@ -53,7 +53,7 @@ footer { .footer-contact { margin: auto 0; - color: var(--cloud); + color: $color-cloud; a { display: inline-flex; @@ -71,13 +71,13 @@ footer { .footer-phrase { margin: auto 0 0; - font-family: var(--font-family-jetbrains-mono); + font-family: $font-family-jetbrains-mono; font-weight: bold; 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 { flex-wrap: wrap; @@ -100,7 +100,7 @@ footer { } } -@media screen and (width < 48rem) { +@media screen and (max-width: 47.99999rem) { footer { flex-direction: column; padding-top: 1.25rem; diff --git a/src/components/Layout/JoinCommunity/JoinCommunity.scss b/src/components/Layout/JoinCommunity/JoinCommunity.scss index d98f2bd..40aa39b 100644 --- a/src/components/Layout/JoinCommunity/JoinCommunity.scss +++ b/src/components/Layout/JoinCommunity/JoinCommunity.scss @@ -1,13 +1,14 @@ @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #join-community { padding-top: 3.16%; padding-bottom: 3.16%; @include fluid-padding-lr; - background: var(--aquamarine); - color: var(--blue-charcoal); + background: $color-aquamarine; + color: $color-blue-charcoal-2; - @media screen and (width < 48rem) { + @media screen and (max-width: 48rem) { text-align: center; } @@ -21,7 +22,7 @@ } p { - font-family: var(--font-family-jaldi); + font-family: $font-family-jaldi; @include fluid-font-size(1.3125rem); line-height: 157%; } diff --git a/src/components/Layout/Navbar/Navbar.jsx b/src/components/Layout/Navbar/Navbar.jsx index 4ab8af8..6865a3e 100644 --- a/src/components/Layout/Navbar/Navbar.jsx +++ b/src/components/Layout/Navbar/Navbar.jsx @@ -1,18 +1,38 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useCallback, useEffect } from 'react'; import './Navbar.scss'; import logo from '../../../../src/assets/lume-logo.png'; function Navbar({ view }) { 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(() => { let resizeTimeout; const onResize = () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { - if(nav && window.innerWidth >= 768) { - setNav(false); + if(nav && window.innerWidth >= 900) { + toggleNav(); } }, 25); }; @@ -29,7 +49,7 @@ function Navbar({ view }) { Lume - +
  • Home
    • diff --git a/src/components/Layout/Navbar/Navbar.scss b/src/components/Layout/Navbar/Navbar.scss index 32e69ef..625b329 100644 --- a/src/components/Layout/Navbar/Navbar.scss +++ b/src/components/Layout/Navbar/Navbar.scss @@ -1,4 +1,5 @@ @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; nav { display: flex; @@ -36,36 +37,51 @@ menu { font-size: 2rem; cursor: pointer; z-index: 1; - margin: 0 2.125rem; + margin: 0 3.75% 0 2rem; } -@media screen and (width < 48rem) { +@media screen and (max-width: 56rem) { + nav { + position: sticky; + top: 0; + background: rgba($color-body-bg, 0.85); + z-index: 1; + } + menu { display: flex; align-items: flex-start; flex-direction: column; - position: absolute; - top: -100vh; - right: 3%; - padding: 1rem; - font-size: 1.25rem; - background: var(--blue-charcoal); - border: 1px solid red; - border-radius: 0.5rem; - transition: top 250ms; - z-index: 1; + position: fixed; + top: 0; + right: min(20rem, -100vw); + bottom: 0; + padding: 7.5em 7.5% 1em; + background: rgba($color-body-bg, 0.85); + transition: right 200ms; + overflow-y: auto; &.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 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; + font-size: 1.25rem; + padding-left: 0.8em; } .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; } } + +@keyframes bg-opacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 0.85; + } +} diff --git a/src/components/Vision/CommunityPower/CommunityPower.scss b/src/components/Vision/CommunityPower/CommunityPower.scss index fe62fc7..be8c6c0 100644 --- a/src/components/Vision/CommunityPower/CommunityPower.scss +++ b/src/components/Vision/CommunityPower/CommunityPower.scss @@ -1,5 +1,5 @@ @import "../../../styles/mixins.scss"; -@import "../../../styles/colors.scss"; +@import "../../../styles/vars.scss"; #vision-community-power { position: relative; @@ -21,9 +21,9 @@ max-width: 27em; } - @media screen and (width < 80rem) { + @media screen and (max-width: 80rem) { p { - background: rgba($body-bg-darker, 0.65); + background: rgba($color-blue-charcoal, 0.65); border-radius: 0.5em; padding: 0.3em 0.5em; margin: -0.3em -0.5em; diff --git a/src/components/Vision/Grid/Grid.scss b/src/components/Vision/Grid/Grid.scss index 20b7eba..471424e 100644 --- a/src/components/Vision/Grid/Grid.scss +++ b/src/components/Vision/Grid/Grid.scss @@ -1,4 +1,5 @@ @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #vision-grid { padding-top: 2.05em; @@ -10,10 +11,10 @@ } h2 { - font-family: var(--font-family-jetbrains-mono); + font-family: $font-family-jetbrains-mono; @include fluid-font-size(2.75rem); font-weight: 700; line-height: 129.55%; - color: var(--aquamarine); + color: $color-aquamarine; } } diff --git a/src/components/What/Astronaut/Astronaut.scss b/src/components/What/Astronaut/Astronaut.scss index 3ddc136..e05e33a 100644 --- a/src/components/What/Astronaut/Astronaut.scss +++ b/src/components/What/Astronaut/Astronaut.scss @@ -1,5 +1,5 @@ -@import "../../../styles/colors.scss"; @import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; #what-astronaut { position: relative; @@ -28,9 +28,9 @@ z-index: 1; } - @media screen and (width < 80rem) { + @media screen and (max-width: 80rem) { p { - background: rgba($body-bg-darker, 0.65); + 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; diff --git a/src/styles/colors.scss b/src/styles/colors.scss deleted file mode 100644 index dc7c00a..0000000 --- a/src/styles/colors.scss +++ /dev/null @@ -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); diff --git a/src/styles/global.scss b/src/styles/global.scss index b7c1a20..2361140 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,5 +1,5 @@ -@import "colors.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"); @@ -7,24 +7,11 @@ @tailwind components; @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 { display: flex; flex-direction: column; - height: 100%; min-width: 20rem; + min-height: 100%; scroll-behavior: smooth; } @@ -33,9 +20,14 @@ body { display: flex; flex-direction: column; font-family: "JetBrains Mono", sans-serif; - background: $body-bg; - color: #fff; + background: $color-body-bg; + color: $color-white; overflow-x: hidden; + overflow-y: scroll; + + &.scroll-lock { + overflow-y: hidden; + } } main { @@ -49,15 +41,15 @@ a { .btn-main { display: inline-block; - color: var(--black); - background: var(--aquamarine); - border: 0.05em solid var(--aquamarine); + color: $color-black; + background: $color-aquamarine; + border: 0.05em solid $color-aquamarine; padding: 0.5em 0.8em; border-radius: 0.25em; transition: color 200ms, background 200ms; &:hover { - color: var(--white); + color: $color-white; background: transparent; } } @@ -72,7 +64,7 @@ main.vision { left: 50%; margin-left: max(-51.55em, -50vw); z-index: -1; - background: url(../assets/vision-bg.png); + background: url("../assets/vision-bg.png"); background-size: contain; background-position: center; background-repeat: no-repeat; @@ -85,11 +77,28 @@ main.what { position: absolute; width: max(min(151.3em, 100vw), 32em); height: max(min(122.4em, 100vw), 56em); - top: -20em; + top: -2em; left: 50%; margin-left: max(-75.65em, -50vw); 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-position: center; background-repeat: no-repeat; @@ -102,7 +111,7 @@ main.what { @include fluid-font-size(1.5625rem); line-height: 100%; text-transform: uppercase; - color: var(--aquamarine); + color: $color-aquamarine; } h3 { @@ -113,13 +122,13 @@ main.what { h2, h3 { 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 { - font-family: var(--font-family-jaldi); + font-family: $font-family-jaldi; line-height: 167%; - color: var(--cloud); + color: $color-cloud; transition: background 200ms; } @@ -142,11 +151,11 @@ main.what { @include fluid-padding-lr; @include fluid-font-size(1.25rem); - @media screen and (width >= 48rem) { + @media screen and (min-width: 48rem) { grid-template-columns: repeat(2, 1fr); } - @media screen and (width >= 64rem) { + @media screen and (min-width: 64rem) { grid-template-columns: repeat(3, 1fr); } @@ -155,14 +164,14 @@ main.what { flex-direction: column; justify-content: center; padding: 2.95em 1.95em; - background: $body-bg-darker; + background: $color-blue-charcoal; border: 0.05em solid transparent; border-radius: 0.5em; - font-family: var(--font-family-jaldi); + font-family: $font-family-jaldi; transition: border-color 200ms; &:hover { - border-color: var(--aquamarine); + border-color: $color-aquamarine; } } @@ -175,7 +184,7 @@ main.what { @include fluid-font-size(1.3125rem); margin-top: 0.67em; line-height: 123.81%; - color: var(--cloud); + color: $color-cloud; } } @@ -190,7 +199,7 @@ main.what { bottom: 0; left: -5%; margin: 2% 0; - background: $body-bg-darker; + background: $color-blue-charcoal; transform: matrix(1, -0.04, 0.04, 1, 0, 0); z-index: -1; } @@ -207,7 +216,7 @@ main.what { bottom: 0; left: -5%; margin: 2% 0; - background: $body-bg-darker; + background: $color-blue-charcoal; transform: matrix(1, 0.04, -0.04, 1, 0, 0); z-index: -1; } diff --git a/src/styles/jumbotron.scss b/src/styles/jumbotron.scss index 8f2874c..a253ef5 100644 --- a/src/styles/jumbotron.scss +++ b/src/styles/jumbotron.scss @@ -1,5 +1,5 @@ @import "./mixins.scss"; -@import "./colors.scss"; +@import "./vars.scss"; .jumbotron { display: flex; @@ -10,11 +10,11 @@ h1 { 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); line-height: 137%; letter-spacing: -0.06em; 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); } } diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index ab9e4b0..16d316a 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -46,11 +46,11 @@ $screen-default: 96rem; // 1536px & { 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)})); } - @media screen and (width >= $max-vw) { + @media screen and (min-width: $max-vw) { font-size: $max-font-size; } } @@ -70,15 +70,15 @@ $screen-default: 96rem; // 1536px & { 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))); } - @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)})); } - @media screen and (width >= $max-vw) { + @media screen and (min-width: $max-vw) { font-size: $max-font-size; } } @@ -102,12 +102,12 @@ $screen-default: 96rem; // 1536px width: $min-width; 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)})); 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; height: $max-height; } @@ -127,11 +127,11 @@ $screen-default: 96rem; // 1536px & { 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)})); } - @media screen and (width >= $max-vw) { + @media screen and (min-width: $max-vw) { width: $max-width; } } @@ -150,17 +150,41 @@ $screen-default: 96rem; // 1536px & { 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)})); } - @media screen and (width >= $max-vw) { + @media screen and (min-width: $max-vw) { 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 { $min-vw: 48rem; $max-vw: 96rem; @@ -172,12 +196,12 @@ $screen-default: 96rem; // 1536px padding-left: $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-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-right: $max-padding; } @@ -195,12 +219,12 @@ $screen-default: 96rem; // 1536px margin-left: $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-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-right: $max-margin; } diff --git a/src/styles/vars.scss b/src/styles/vars.scss new file mode 100644 index 0000000..7fa72cc --- /dev/null +++ b/src/styles/vars.scss @@ -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";