diff --git a/src/assets/double-brand-bg.png b/src/assets/double-brand-bg.png new file mode 100644 index 0000000..0bd5f34 Binary files /dev/null and b/src/assets/double-brand-bg.png differ diff --git a/src/components/Donate/Methods/Methods.astro b/src/components/Donate/Methods/Methods.astro index be2543b..15bc3a7 100644 --- a/src/components/Donate/Methods/Methods.astro +++ b/src/components/Donate/Methods/Methods.astro @@ -33,7 +33,7 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL

Donate Cryptocurrency

- {currencies.map(async currency => ( + {currencies.map(currency => (
diff --git a/src/components/Donate/Methods/Methods.scss b/src/components/Donate/Methods/Methods.scss index d714ae7..9aba4ef 100644 --- a/src/components/Donate/Methods/Methods.scss +++ b/src/components/Donate/Methods/Methods.scss @@ -71,6 +71,7 @@ div { order: 1; + flex-grow: 1; position: relative; @include fluid-font-size(1.3125rem); word-break: break-all; @@ -112,12 +113,12 @@ top: 0; right: -0.5em; padding: 0 0.5em; - background: $color-blue-charcoal; + background: rgba($color-blue-charcoal, 0.75); text-align: center; white-space: nowrap; color: $color-white; border-radius: 0.5em 0 0 0.5em; - animation: $transition-duration overlay-opacity forwards; + animation: $transition-duration hint-opacity forwards; transition: color $transition-duration; } } @@ -274,3 +275,13 @@ opacity: 0.75; } } + +@keyframes hint-opacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} diff --git a/src/components/Donate/Why/Why.scss b/src/components/Donate/Why/Why.scss index 7133c1f..cbcc3dc 100644 --- a/src/components/Donate/Why/Why.scss +++ b/src/components/Donate/Why/Why.scss @@ -29,7 +29,7 @@ @media screen and (max-width: 80rem) { ul, p { - background: rgba($color-body-bg, 0.65); + background: rgba($color-blue-charcoal-2, 0.65); } ul { diff --git a/src/components/Home/CTO/CTO.astro b/src/components/Home/CTO/CTO.astro index 68b25fb..0299154 100644 --- a/src/components/Home/CTO/CTO.astro +++ b/src/components/Home/CTO/CTO.astro @@ -4,17 +4,19 @@ import ctoAvatar from '../../../assets/cto-avatar.webp'; ---
-
-

Community-Powered

-

Building a new world for your data

-

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

-
- -
- Derrick Hammer
- CTO +
+
+

Community-Powered

+

Building a new world for your data

+

+ 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. +

+
+ +
+ Derrick Hammer
+ CTO +
diff --git a/src/components/Home/CTO/CTO.scss b/src/components/Home/CTO/CTO.scss index 7cdd538..0e529a0 100644 --- a/src/components/Home/CTO/CTO.scss +++ b/src/components/Home/CTO/CTO.scss @@ -2,15 +2,35 @@ @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-repeat: no-repeat; - background-size: contain; + @include fluid-padding-lr; > div { - @include fluid-margin-lr; + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + margin: 0 auto; + @include fluid-font-size(1.3125rem); + max-width: 75em; + min-height: 28em; + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: min(0rem, calc((100vw - 40rem) / 2)); + width: 100%; + min-width: 40rem; + background-image: url("../../../assets/geometric-bg.webp"); + background-position: 1%; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + } + + .feature-group { max-width: 28em; padding: 3.14em 0; } @@ -36,7 +56,7 @@ @media screen and (max-width: 80rem) { p, .bio { - background: rgba($color-body-bg, 0.65); + background: rgba($color-blue-charcoal-2, 0.65); border-radius: 0 0.5em 0.5em 0; padding: 0.3em 0.5em; margin: -0.3em -0.5em; diff --git a/src/components/Home/PoweredBy/PoweredBy.scss b/src/components/Home/PoweredBy/PoweredBy.scss index 6447287..55bc054 100644 --- a/src/components/Home/PoweredBy/PoweredBy.scss +++ b/src/components/Home/PoweredBy/PoweredBy.scss @@ -36,7 +36,7 @@ color: $color-alto; &:hover { - color: $color-aquamarine; + color: $color-white; } } diff --git a/src/components/Home/Socials/Socials.scss b/src/components/Home/Socials/Socials.scss index 834884a..5b63c1d 100644 --- a/src/components/Home/Socials/Socials.scss +++ b/src/components/Home/Socials/Socials.scss @@ -28,23 +28,23 @@ color: $color-alto; &:hover { - color: $color-aquamarine; + color: $color-white; } } .github-logo svg { - @include fluid-width(4.375rem); + @include fluid-width(3.5rem); } .discord-logo svg { - @include fluid-width(4.375rem); + @include fluid-width(3.5rem); } .twitter-logo svg { - @include fluid-width(4.375rem); + @include fluid-width(3.5rem); } .facebook-logo svg { - @include fluid-width(4.375rem); + @include fluid-width(3.5rem); } } diff --git a/src/components/Home/Vision/Vision.scss b/src/components/Home/Vision/Vision.scss index 055ba4b..1101cfd 100644 --- a/src/components/Home/Vision/Vision.scss +++ b/src/components/Home/Vision/Vision.scss @@ -20,7 +20,7 @@ @media screen and (max-width: 80rem) { p { - background: rgba($color-body-bg, 0.65); + background: rgba($color-blue-charcoal-2, 0.65); border-radius: 0.5em; padding: 0.3em 0.5em; margin: -0.3em -0.5em; diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro index dc2bc17..10937fe 100644 --- a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro +++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro @@ -3,7 +3,6 @@ import "./WhatIsWeb3.scss"; ---
-

What is the Web? @@ -15,7 +14,7 @@ import "./WhatIsWeb3.scss"; Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition from Web2 to Web3, which matters for privacy and security.

diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss index 0be4a09..9f09294 100644 --- a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss +++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss @@ -9,7 +9,8 @@ margin-top: 2.48em; @include fluid-font-size(1.3125rem); - .background { + &::after { + content: ""; position: absolute; left: 0; top: 50%; @@ -22,12 +23,12 @@ background-repeat: no-repeat; background-size: contain; pointer-events: none; + z-index: -1; } .feature-group { @include fluid-position-left(27.8em, 28em); max-width: 28em; - z-index: 1; h1 { margin-top: 1em; diff --git a/src/components/Layout/Footer/Footer.scss b/src/components/Layout/Footer/Footer.scss index aa50001..fef5d99 100644 --- a/src/components/Layout/Footer/Footer.scss +++ b/src/components/Layout/Footer/Footer.scss @@ -31,10 +31,10 @@ footer { } h5 { - @include fluid-font-size(1.875rem); + @include fluid-font-size(1.75rem); line-height: 100%; white-space: nowrap; - margin: 0.25em 0; + margin: 0.3em 0; } li { diff --git a/src/components/Layout/JoinCommunity/JoinCommunity.scss b/src/components/Layout/JoinCommunity/JoinCommunity.scss index 30a930d..6b44181 100644 --- a/src/components/Layout/JoinCommunity/JoinCommunity.scss +++ b/src/components/Layout/JoinCommunity/JoinCommunity.scss @@ -56,6 +56,11 @@ a { display: block; + color: #0B3F48; + + &:hover { + color: inherit; + } } .github-logo svg { diff --git a/src/components/Layout/Navbar/Navbar.jsx b/src/components/Layout/Navbar/Navbar.jsx index a54e5df..f62badf 100644 --- a/src/components/Layout/Navbar/Navbar.jsx +++ b/src/components/Layout/Navbar/Navbar.jsx @@ -51,16 +51,16 @@ function Navbar({ view }) {
  • - Home + Home
  • - Vision + Vision
  • - What is Web3 + What is Web3
  • - Donate + Donate
  • Download Extension diff --git a/src/components/Layout/Navbar/Navbar.scss b/src/components/Layout/Navbar/Navbar.scss index 2990d8d..ef120a9 100644 --- a/src/components/Layout/Navbar/Navbar.scss +++ b/src/components/Layout/Navbar/Navbar.scss @@ -13,7 +13,7 @@ nav { flex-shrink: 0; img { - @include fluid-width-height(13.125rem, 4.375rem); + @include fluid-width-height(11.25rem, 3.75rem); } } } @@ -25,10 +25,18 @@ menu { li > a { display: block; padding: 0.55em 0.9em; + text-decoration: underline; + text-decoration-color: transparent; + transition: text-decoration-color $transition-duration; + + &.current, &:hover, &:active { + text-decoration-color: inherit; + } } .download-btn { margin-left: 0.9em; + text-decoration: none; } } @@ -44,8 +52,8 @@ menu { nav { position: sticky; top: 0; - background: rgba($color-body-bg, 0.85); - z-index: 1; + background: rgba($color-blue-charcoal-2, 0.85); + z-index: 2; } menu { @@ -57,7 +65,7 @@ menu { right: min(-20rem, -100vw); bottom: 0; padding: 7.5em 7.5% 1em; - background: rgba($color-body-bg, 0.85); + background: rgba($color-blue-charcoal-2, 0.85); transition: right $transition-duration; overflow-y: auto; diff --git a/src/components/Vision/CommunityPower/CommunityPower.astro b/src/components/Vision/Community/Community.astro similarity index 83% rename from src/components/Vision/CommunityPower/CommunityPower.astro rename to src/components/Vision/Community/Community.astro index dd13b7e..9ebb8cb 100644 --- a/src/components/Vision/CommunityPower/CommunityPower.astro +++ b/src/components/Vision/Community/Community.astro @@ -1,8 +1,8 @@ --- -import './CommunityPower.scss'; +import './Community.scss'; --- -
    +

    Community-Powered

    Building a new world for your data

    diff --git a/src/components/Vision/CommunityPower/CommunityPower.scss b/src/components/Vision/Community/Community.scss similarity index 96% rename from src/components/Vision/CommunityPower/CommunityPower.scss rename to src/components/Vision/Community/Community.scss index be8c6c0..531a4c2 100644 --- a/src/components/Vision/CommunityPower/CommunityPower.scss +++ b/src/components/Vision/Community/Community.scss @@ -1,7 +1,7 @@ @import "../../../styles/mixins.scss"; @import "../../../styles/vars.scss"; -#vision-community-power { +#vision-community { position: relative; background-image: url("../../../assets/community-power-bg.png"); margin-top: 7.8125rem; diff --git a/src/components/Vision/Grid/Grid.scss b/src/components/Vision/Grid/Grid.scss index 471424e..b23b3b0 100644 --- a/src/components/Vision/Grid/Grid.scss +++ b/src/components/Vision/Grid/Grid.scss @@ -3,7 +3,7 @@ #vision-grid { padding-top: 2.05em; - padding-bottom: 4.5em; + padding-bottom: 2.05em; div:first-child { background: inherit; diff --git a/src/components/Vision/People/People.astro b/src/components/Vision/People/People.astro new file mode 100644 index 0000000..7276758 --- /dev/null +++ b/src/components/Vision/People/People.astro @@ -0,0 +1,22 @@ +--- +import './People.scss'; +--- + +
    +
    +

    Community-Powered

    +

    All about the people, no VC here.

    +

    + Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses. Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses. +

    +

    + Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses. +

    +

    + Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses. +

    + +
    +
    diff --git a/src/components/Vision/People/People.scss b/src/components/Vision/People/People.scss new file mode 100644 index 0000000..b0ef78c --- /dev/null +++ b/src/components/Vision/People/People.scss @@ -0,0 +1,43 @@ +@import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; + +#vision-people { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + margin: 0 auto; + @include fluid-font-size(1.3125rem); + max-width: 88em; + min-height: 28em; + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: min(0rem, calc((100vw - 40rem) / 2)); + width: 100%; + min-width: 40rem; + background-image: url("../../../assets/double-brand-bg.png"); + background-position: 0; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + + .feature-group { + max-width: 28em; + padding: 4.14em 0; + @include fluid-margin-lr; + } + + @media screen and (max-width: 80rem) { + p { + background: rgba($color-blue-charcoal-2, 0.65); + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + } +} diff --git a/src/components/What/Astronaut/Astronaut.astro b/src/components/What/Astronaut/Astronaut.astro index 2ae9a0f..100a471 100644 --- a/src/components/What/Astronaut/Astronaut.astro +++ b/src/components/What/Astronaut/Astronaut.astro @@ -10,7 +10,7 @@ import './Astronaut.scss'; Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses. Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses.

    diff --git a/src/components/What/Astronaut/Astronaut.scss b/src/components/What/Astronaut/Astronaut.scss index e05e33a..c224244 100644 --- a/src/components/What/Astronaut/Astronaut.scss +++ b/src/components/What/Astronaut/Astronaut.scss @@ -5,7 +5,6 @@ position: relative; display: flex; align-items: center; - margin-top: 5rem; min-height: 36.72em; @include fluid-font-size(1.3125rem); background-image: url("../../../assets/astronaut.png"); diff --git a/src/components/What/Building/Building.astro b/src/components/What/Building/Building.astro new file mode 100644 index 0000000..c1abf58 --- /dev/null +++ b/src/components/What/Building/Building.astro @@ -0,0 +1,15 @@ +--- +import './Building.scss'; +--- + +
    +
    +
    +

    Community-Powered

    +

    Building a new world for your data

    +

    + 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. +

    +
    +
    +
    diff --git a/src/components/What/Building/Building.scss b/src/components/What/Building/Building.scss new file mode 100644 index 0000000..fdc4dda --- /dev/null +++ b/src/components/What/Building/Building.scss @@ -0,0 +1,50 @@ +@import "../../../styles/mixins.scss"; +@import "../../../styles/vars.scss"; + +#building { + + &::before { + bottom: -12%; + } + + > div { + position: relative; + display: flex; + justify-content: flex-end; + align-items: center; + max-width: 88em; + min-height: 28em; + margin: 0 auto; + @include fluid-font-size(1.3125rem); + + &::before { + content: ""; + position: absolute; + top: 4%; + bottom: 0; + left: min(0rem, calc((100vw - 40rem) / 2)); + width: 100%; + min-width: 40rem; + background-image: url("../../../assets/double-brand-bg.png"); + background-position: 0; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; + } + } + + .feature-group { + max-width: 28em; + padding: 7em 0 5em; + @include fluid-margin-lr; + } + + @media screen and (max-width: 80rem) { + p { + background: rgba($color-blue-charcoal, 0.65); + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + } +} diff --git a/src/components/What/Grid/Grid.scss b/src/components/What/Grid/Grid.scss index e0cc179..3068a4b 100644 --- a/src/components/What/Grid/Grid.scss +++ b/src/components/What/Grid/Grid.scss @@ -1,3 +1,4 @@ #what-grid { padding-top: 5.5em; + padding-bottom: 4.5em; } diff --git a/src/pages/vision.astro b/src/pages/vision.astro index 82d3667..78f3cac 100644 --- a/src/pages/vision.astro +++ b/src/pages/vision.astro @@ -1,12 +1,14 @@ --- import Layout from '../layouts/Layout.astro'; import Jumbotron from '../components/Vision/Jumbotron/Jumbotron.astro'; -import CommunityPower from '../components/Vision/CommunityPower/CommunityPower.astro'; +import Community from '../components/Vision/Community/Community.astro'; import Grid from '../components/Vision/Grid/Grid.astro'; +import People from '../components/Vision/People/People.astro'; --- - + + diff --git a/src/pages/what-is-web3.astro b/src/pages/what-is-web3.astro index 990c711..00747e9 100644 --- a/src/pages/what-is-web3.astro +++ b/src/pages/what-is-web3.astro @@ -2,11 +2,13 @@ import Layout from '../layouts/Layout.astro'; import Jumbotron from '../components/What/Jumbotron/Jumbotron.astro'; import Grid from '../components/What/Grid/Grid.astro'; +import Building from '../components/What/Building/Building.astro'; import Astronaut from '../components/What/Astronaut/Astronaut.astro'; --- + diff --git a/src/styles/global.scss b/src/styles/global.scss index 5f6ed05..7663d02 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -20,7 +20,7 @@ body { display: flex; flex-direction: column; font-family: "JetBrains Mono", sans-serif; - background: $color-body-bg; + background: $color-blue-charcoal-2; color: $color-white; overflow-x: hidden; overflow-y: scroll; @@ -133,10 +133,13 @@ main.donate { transition: background $transition-duration; } + p + p, ul + p { + margin-top: 0.78em; + } + ul { list-style-type: disc; margin-left: 1.5em; - margin-bottom: 0.78em; } .btn-main { diff --git a/src/styles/vars.scss b/src/styles/vars.scss index c64e480..c6b13bb 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -1,8 +1,7 @@ -$color-body-bg: #031418; $color-black: #000; $color-white: #fff; $color-blue-charcoal: #020e10; -$color-blue-charcoal-2: #031518; +$color-blue-charcoal-2: #031418; $color-aquamarine: #7afcbb; $color-cloud: #c7c7c7; $color-alto: #d9d9d9;