diff --git a/src/assets/bitcoin-logo.png b/src/assets/bitcoin-logo.png new file mode 100644 index 0000000..82c612f Binary files /dev/null and b/src/assets/bitcoin-logo.png differ diff --git a/src/assets/donate-gfx-right.png b/src/assets/donate-gfx-right.png new file mode 100644 index 0000000..e8f208d Binary files /dev/null and b/src/assets/donate-gfx-right.png differ diff --git a/src/assets/donate-why-bg.png b/src/assets/donate-why-bg.png new file mode 100644 index 0000000..df3a535 Binary files /dev/null and b/src/assets/donate-why-bg.png differ diff --git a/src/assets/ethereum-logo.png b/src/assets/ethereum-logo.png new file mode 100644 index 0000000..e26c490 Binary files /dev/null and b/src/assets/ethereum-logo.png differ diff --git a/src/assets/litecoin-logo.png b/src/assets/litecoin-logo.png new file mode 100644 index 0000000..30013b2 Binary files /dev/null and b/src/assets/litecoin-logo.png differ diff --git a/src/assets/monero-logo.png b/src/assets/monero-logo.png new file mode 100644 index 0000000..2a70796 Binary files /dev/null and b/src/assets/monero-logo.png differ diff --git a/src/assets/patreon-logo.png b/src/assets/patreon-logo.png new file mode 100644 index 0000000..3d6ede9 Binary files /dev/null and b/src/assets/patreon-logo.png differ diff --git a/src/assets/paypal-logo.png b/src/assets/paypal-logo.png new file mode 100644 index 0000000..25273bb Binary files /dev/null and b/src/assets/paypal-logo.png differ diff --git a/src/components/Donate/How/How.astro b/src/components/Donate/How/How.astro new file mode 100644 index 0000000..c899f3f --- /dev/null +++ b/src/components/Donate/How/How.astro @@ -0,0 +1,16 @@ +--- +import './How.scss'; +--- + + diff --git a/src/components/Donate/How/How.scss b/src/components/Donate/How/How.scss new file mode 100644 index 0000000..420d5fd --- /dev/null +++ b/src/components/Donate/How/How.scss @@ -0,0 +1,33 @@ +@import "../../../styles/colors.scss"; +@import "../../../styles/mixins.scss"; + +#donate-how { + display: flex; + flex-direction: column; + justify-content: center; + margin-top: 4em; + @include fluid-padding-lr; + padding-top: 7em; + padding-bottom: 7em; + @include fluid-font-size(1.3125rem); + + &::before { + background-image: url("../../../src/assets/donate-gfx-right.png"); + background-position: 85% 100%; + background-repeat: no-repeat; + background-size: contain; + } + + > div { + max-width: 29em; + } + + @media screen and (width < 80rem) { + p { + background: rgba($body-bg-darker, 0.65); + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin: -0.3em -0.5em; + } + } +} diff --git a/src/components/Donate/Jumbotron/Jumbotron.astro b/src/components/Donate/Jumbotron/Jumbotron.astro new file mode 100644 index 0000000..989541a --- /dev/null +++ b/src/components/Donate/Jumbotron/Jumbotron.astro @@ -0,0 +1,9 @@ +--- +import '../../../styles/jumbotron.scss'; +--- + + diff --git a/src/components/Donate/Legal/Legal.astro b/src/components/Donate/Legal/Legal.astro new file mode 100644 index 0000000..d7ce43f --- /dev/null +++ b/src/components/Donate/Legal/Legal.astro @@ -0,0 +1,18 @@ +--- +import './Legal.scss'; +--- + + diff --git a/src/components/Donate/Legal/Legal.scss b/src/components/Donate/Legal/Legal.scss new file mode 100644 index 0000000..81029e0 --- /dev/null +++ b/src/components/Donate/Legal/Legal.scss @@ -0,0 +1,31 @@ +@import "../../../styles/mixins.scss"; + +#donate-legal { + display: flex; + flex-direction: column; + justify-content: center; + padding: 11em 0 9em; + @include fluid-padding-lr; + + h2 { + margin-bottom: 1em; + @include fluid-font-size(2.5rem); + line-height: 122%; + } + + p { + margin-top: 1.5em; + font-family: var(--font-family-jaldi); + @include fluid-font-size(1.3125rem); + line-height: 157%; + color: var(--cloud); + } + + strong { + @include fluid-font-size(1.625rem); + } + + &::before { + bottom: -12%; + } +} diff --git a/src/components/Donate/Methods/Methods.astro b/src/components/Donate/Methods/Methods.astro new file mode 100644 index 0000000..7bb6fa9 --- /dev/null +++ b/src/components/Donate/Methods/Methods.astro @@ -0,0 +1,56 @@ +--- +import './Methods.scss'; +import bitcoinLogo from '../../../../src/assets/bitcoin-logo.png'; +import litecoinLogo from '../../../../src/assets/litecoin-logo.png'; +import moneroLogo from '../../../../src/assets/monero-logo.png'; +import ethereumLogo from '../../../../src/assets/ethereum-logo.png'; +import paypalLogo from '../../../../src/assets/paypal-logo.png'; +import patreonLogo from '../../../../src/assets/patreon-logo.png'; +--- + + diff --git a/src/components/Donate/Methods/Methods.scss b/src/components/Donate/Methods/Methods.scss new file mode 100644 index 0000000..2cc6b11 --- /dev/null +++ b/src/components/Donate/Methods/Methods.scss @@ -0,0 +1,65 @@ +@import "../../../styles/colors.scss"; +@import "../../../styles/mixins.scss"; + +#donate-methods { + display: flex; + flex-direction: column; + justify-content: center; + padding: 9em 0 14em; + @include fluid-padding-lr; + + h2 { + margin-bottom: 1em; + @include fluid-font-size(2.5rem); + line-height: 122%; + } + + .method-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-auto-rows: 1fr; + gap: 0.9em; + @include fluid-font-size(1.25rem); + + @media screen and (width >= 48rem) { + grid-template-columns: repeat(2, 1fr); + } + + > div { + display: flex; + flex-direction: column; + justify-content: center; + padding: 2.95em 1.95em; + background: $body-bg-darker; + border: 0.05em solid transparent; + border-radius: 0.5em; + transition: border-color 200ms; + + &:hover { + border-color: var(--aquamarine); + } + + > div { + display: flex; + align-items: center; + gap: 1em; + } + } + + img { + @include fluid-width-height(3.4375rem, 3.4375rem); + } + + h3 { + @include fluid-font-size(1.4375rem); + } + } + + p { + margin-top: 1.5em; + font-family: var(--font-family-jaldi); + @include fluid-font-size(1.0625rem); + line-height: 157%; + color: var(--cloud); + } +} diff --git a/src/components/Donate/Why/Why.astro b/src/components/Donate/Why/Why.astro new file mode 100644 index 0000000..3beb159 --- /dev/null +++ b/src/components/Donate/Why/Why.astro @@ -0,0 +1,24 @@ +--- +import './Why.scss'; +--- + + diff --git a/src/components/Donate/Why/Why.scss b/src/components/Donate/Why/Why.scss new file mode 100644 index 0000000..fc0e54d --- /dev/null +++ b/src/components/Donate/Why/Why.scss @@ -0,0 +1,61 @@ +@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; + } + } +} + +#donate-why { + position: relative; + margin: 9em 0; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 92.2em; + max-width: 100vw; + height: 58.8em; + background-image: url("../../../assets/donate-why-bg.png"); + background-position: 0%; + background-repeat: no-repeat; + background-size: contain; + } + + > div { + @include fluid-font-size(1.3125rem); + @include fluid-margin; + max-width: 29em; + padding: 0.5em 0; + } + + @media screen and (width < 80rem) { + p { + background: rgba($body-bg, 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/Meme/Meme.astro b/src/components/Home/Meme/Meme.astro index d3b2d93..6c75c21 100644 --- a/src/components/Home/Meme/Meme.astro +++ b/src/components/Home/Meme/Meme.astro @@ -7,9 +7,11 @@ import meme4 from '../../../assets/meme-4.png'; ---
-
-

TITLE

-

Building a new world for your data

+
+
+ Web 1 +

Web1

+

Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, @@ -17,22 +19,40 @@ import meme4 from '../../../assets/meme-4.png'; masses.

-
-
- Web 1 - Web1 -
+
- Web2 +

Web2

+

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

+
+
- Crypto & Defi +

Crypto & Defi

+

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

+
+
- Web3 +

Web3

+

+ 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/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss index b599fd7..1675bf7 100644 --- a/src/components/Home/Meme/Meme.scss +++ b/src/components/Home/Meme/Meme.scss @@ -2,48 +2,61 @@ #home-meme { display: flex; - justify-content: center; + flex-direction: column; align-items: center; - padding: 8% 12%; - @include fluid-font-size(1.3125rem); -} + @include fluid-padding-lr; + padding-top: 12em; + padding-bottom: 12em; + gap: 2em; -.meme-text { - width: 60%; - margin-right: 5%; - flex-shrink: 0; -} + .meme-item { + display: flex; + align-items: center; + @include fluid-font-size(1.3125rem); + gap: 2.5em; + max-width: 55em; -.meme-grid { - display: grid; - grid-template-columns: 50% 50%; - gap: 1rem; - max-width: 22em; + div { + flex-shrink: 0; + display: flex; + align-items: center; + gap: 2.5em; + } - img { - margin-bottom: 0.5em; + img { + @include fluid-width-height(15.4375rem, 13.625rem); + } + + h2 { + width: 4.5em; + @include fluid-font-size(1.5625rem); + font-weight: 700; + text-align: center; + color: var(--aquamarine); + text-transform: uppercase; + } + + p { + font-family: var(--font-family-jaldi); + @include fluid-font-size(1.3125rem); + line-height: 123.81%; + color: var(--cloud); + } } - > div { - @include fluid-font-size(1.5625rem); - font-weight: 700; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: var(--aquamarine); - } -} - -@media screen and (width < 48rem) { - #home-meme { - flex-direction: column; - padding: 20% 8%; - text-align: center; - } - - .meme-text { - width: auto; - margin: 0 0 10%; + @media screen and (width < 48rem) { + .meme-item { + div { + flex-direction: column; + gap: 0.5em; + } + + h2 { + width: auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } } } diff --git a/src/components/Footer/Footer.astro b/src/components/Layout/Footer/Footer.astro similarity index 96% rename from src/components/Footer/Footer.astro rename to src/components/Layout/Footer/Footer.astro index 4e8dcb0..124cb6c 100644 --- a/src/components/Footer/Footer.astro +++ b/src/components/Layout/Footer/Footer.astro @@ -1,6 +1,6 @@ --- import "./Footer.scss"; -import logo from "../../../src/assets/lume-logo.png"; +import logo from "../../../../src/assets/lume-logo.png"; ---