From 7883bdc36ab06c6cb5d85a1df6d5779f1010efe8 Mon Sep 17 00:00:00 2001 From: Derrick Hammer Date: Sat, 17 Jun 2023 22:57:29 -0400 Subject: [PATCH] refactor: update donate content --- src/components/Donate/How/How.astro | 19 +- src/components/Donate/How/How.scss | 5 + src/components/Donate/Methods/Methods.astro | 5 +- src/components/Donate/Methods/Methods.scss | 480 ++++++++++---------- 4 files changed, 259 insertions(+), 250 deletions(-) diff --git a/src/components/Donate/How/How.astro b/src/components/Donate/How/How.astro index 4e3ce63..f315671 100644 --- a/src/components/Donate/How/How.astro +++ b/src/components/Donate/How/How.astro @@ -3,14 +3,15 @@ import './How.scss'; ---
-
-

How should I donate?

-

Donate via Gitcoin during funding rounds

-

- This is because they will match you up to 150%. Currently, this is on the dates: June 7, 2022 – June 22, 2022 -

-
- Gitcoin +
+

How should I donate?

+

Donate via Gitcoin during funding rounds

+
+ Gitcoin +
+

+ When Gitcoin is doing funding rounds, donating through their website will give a matching bonus of up to + 150%. This means that your donation will have a bigger impact on the project during this time period. +

-
diff --git a/src/components/Donate/How/How.scss b/src/components/Donate/How/How.scss index fe72ce2..41f9e93 100644 --- a/src/components/Donate/How/How.scss +++ b/src/components/Donate/How/How.scss @@ -17,6 +17,11 @@ .feature-group { max-width: 64em; } + p{ + font-size: 1.9em; + font-style: italic; + padding-top: 1em; + } @media screen and (max-width: 80rem) { p { diff --git a/src/components/Donate/Methods/Methods.astro b/src/components/Donate/Methods/Methods.astro index 7e7a018..b1c29b9 100644 --- a/src/components/Donate/Methods/Methods.astro +++ b/src/components/Donate/Methods/Methods.astro @@ -91,9 +91,6 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL -

- **When Gitcoin is doing funding rounds, donating through their website will give a matching bonus of up to 150%. This means that your donation will have a bigger impact on the project during this time period.** -

If you are interested in donating through other means, please get in touch with us to discuss. If there is a cryptocurrency you wish to contribute with that we have not listed, please let me know!

@@ -147,4 +144,4 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL } }); - \ No newline at end of file + diff --git a/src/components/Donate/Methods/Methods.scss b/src/components/Donate/Methods/Methods.scss index 73ff306..09e99a5 100644 --- a/src/components/Donate/Methods/Methods.scss +++ b/src/components/Donate/Methods/Methods.scss @@ -2,285 +2,291 @@ @import "/src/styles/vars.scss"; #methods { - display: flex; - flex-direction: column; - justify-content: center; - margin: 2em 7.5% 6em; - padding-top: 3em; - font-family: $font-family-jaldi; + display: flex; + flex-direction: column; + justify-content: center; + margin: 2em 7.5% 6em; + padding-top: 3em; + font-family: $font-family-jaldi; - h2 { - margin-bottom: 1em; - @include fluid-font-size(2.8125rem); - line-height: 122%; - } - - .method-grid { - display: grid; - grid-template-columns: repeat(1, 1fr); - gap: 2em; - margin-bottom: 4em; - - @media screen and (min-width: 48rem) { - grid-template-columns: repeat(2, 1fr); + h2 { + margin-bottom: 1em; + @include fluid-font-size(2.8125rem); + line-height: 122%; } > div { - display: flex; - flex-direction: column; - padding: 4em 4em 1em; - background: $color-blue-charcoal; - border: 0.1em solid transparent; - border-radius: 1em; - transition: border-color 200ms; + p { + font-style: italic; + } + } - &:hover { - border-color: $color-aquamarine; - } - - > div:first-child { - display: flex; - align-items: center; + .method-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); gap: 2em; - margin-bottom: 3em; + margin-bottom: 4em; - svg { - flex-shrink: 0; - @include fluid-max-width-height(3.4375rem, 3.4375rem); + @media screen and (min-width: 48rem) { + grid-template-columns: repeat(2, 1fr); } - h3 { - flex-grow: 1; - font-family: $font-family-jetbrains-mono; - @include fluid-font-size(1.5rem); + > div { + display: flex; + flex-direction: column; + padding: 4em 4em 1em; + background: $color-blue-charcoal; + border: 0.1em solid transparent; + border-radius: 1em; + transition: border-color 200ms; + + &:hover { + border-color: $color-aquamarine; + } + + > div:first-child { + display: flex; + align-items: center; + gap: 2em; + margin-bottom: 3em; + + svg { + flex-shrink: 0; + @include fluid-max-width-height(3.4375rem, 3.4375rem); + } + + h3 { + flex-grow: 1; + font-family: $font-family-jetbrains-mono; + @include fluid-font-size(1.5rem); + } + + img { + @include fluid-width-height(3.4375rem, 3.4375rem); + image-rendering: pixelated; + cursor: zoom-in; + } + } } - img { - @include fluid-width-height(3.4375rem, 3.4375rem); - image-rendering: pixelated; - cursor: zoom-in; + .address { + display: flex; + margin-bottom: 3em; + color: $color-cloud; + + div { + order: 1; + flex-grow: 1; + position: relative; + @include fluid-font-size(1.375rem); + word-break: break-all; + user-select: all; + } + + button { + order: 2; + flex-shrink: 0; + @include fluid-width-height(1.875rem, 1.875rem); + @include fluid-margin-lr-rem(0.78125rem); + mask-image: url('data:image/svg+xml,'); + background: $color-cloud; + transition: background $transition-duration; + + &:hover { + background: $color-white; + } + + &.success { + mask-image: url('data:image/svg+xml,'); + background: $color-aquamarine; + } + } + + button:hover + div, button.success + div { + &::before { + content: ""; + position: absolute; + inset: -0.5em; + padding: 0.5em; + background: $color-blue-charcoal; + animation: $transition-duration overlay-opacity forwards; + } + + &::after { + content: "Copy to Clipboard"; + position: absolute; + top: 0; + right: -0.5em; + padding: 0 0.5em; + 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 hint-opacity forwards; + transition: color $transition-duration; + } + } + + button.success + div { + &::after { + content: "Copied to Clipboard"; + color: $color-aquamarine; + } + } } - } } - .address { - display: flex; - margin-bottom: 3em; - color: $color-cloud; + p { + margin-top: 1em; + @include fluid-font-size(1.25rem); + line-height: 157%; + color: $color-cloud; + } - div { - order: 1; - flex-grow: 1; - position: relative; - @include fluid-font-size(1.375rem); - word-break: break-all; - user-select: all; - } + .btn-main { + @include fluid-font-size(1.5rem); + } - button { - order: 2; - flex-shrink: 0; - @include fluid-width-height(1.875rem, 1.875rem); - @include fluid-margin-lr-rem(0.78125rem); - mask-image: url('data:image/svg+xml,'); - background: $color-cloud; - transition: background $transition-duration; + #donate-bitcoin:hover { + border-color: #f7931a; + } + #donate-litecoin:hover { + border-color: #345d9d; + } + + #donate-ethereum:hover { + border-color: #8c8c8c; + } + + #donate-polygon:hover { + border-color: #8247e5; + } + + #donate-solana:hover { + border-color: #dc1fff; + } + + #donate-cardano:hover { + border-color: #0033ad; + } + + #donate-siacoin:hover { + border-color: #20ee82; + } + + #donate-monero:hover { + border-color: #f26822; + } + + #donate-handshake:hover { + border-color: #fff; + } + + #donate-cosmos:hover { + border-color: #6f7390; + } + + #donate-secret:hover { + border-color: #fff; + } + + #donate-algorand:hover { + border-color: #fff; + } + + #donate-paypal { &:hover { - background: $color-white; + border-color: #0070e0; } - &.success { - mask-image: url('data:image/svg+xml,'); - background: $color-aquamarine; - } - } + .btn-main { + color: #fff; + background: #0070e0; + border-color: #0070e0; - button:hover + div, button.success + div { - &::before { - content: ""; - position: absolute; - inset: -0.5em; - padding: 0.5em; - background: $color-blue-charcoal; - animation: $transition-duration overlay-opacity forwards; + &:hover { + background: inherit; + } + } + } + + #donate-patreon { + &:hover { + border-color: #ff424d; } - &::after { - content: "Copy to Clipboard"; - position: absolute; - top: 0; - right: -0.5em; - padding: 0 0.5em; - 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 hint-opacity forwards; - transition: color $transition-duration; + .btn-main { + color: #fff; + background: #ff424d; + border-color: #ff424d; + + &:hover { + background: inherit; + } } - } + } - button.success + div { - &::after { - content: "Copied to Clipboard"; - color: $color-aquamarine; + #donate-liberapay { + &:hover { + border-color: #f6c915; } - } - } - } - p { - margin-top: 1em; - @include fluid-font-size(1.25rem); - line-height: 157%; - color: $color-cloud; - } + .btn-main { + color: #000; + background: #f6c915; + border-color: #f6c915; - .btn-main { - @include fluid-font-size(1.5rem); - } - - #donate-bitcoin:hover { - border-color: #f7931a; - } - - #donate-litecoin:hover { - border-color: #345d9d; - } - - #donate-ethereum:hover { - border-color: #8c8c8c; - } - - #donate-polygon:hover { - border-color: #8247e5; - } - - #donate-solana:hover { - border-color: #dc1fff; - } - - #donate-cardano:hover { - border-color: #0033ad; - } - - #donate-siacoin:hover { - border-color: #20ee82; - } - - #donate-monero:hover { - border-color: #f26822; - } - - #donate-handshake:hover { - border-color: #fff; - } - - #donate-cosmos:hover { - border-color: #6f7390; - } - - #donate-secret:hover { - border-color: #fff; - } - - #donate-algorand:hover { - border-color: #fff; - } - - #donate-paypal { - &:hover { - border-color: #0070e0; + &:hover { + color: inherit; + background: inherit; + } + } } - .btn-main { - color: #fff; - background: #0070e0; - border-color: #0070e0; + #donate-github { + &:hover { + border-color: #fff; + } - &:hover { - background: inherit; - } + .btn-main { + color: #000; + background: #fff; + border-color: #fff; + + &:hover { + color: inherit; + background: inherit; + } + } } - } - - #donate-patreon { - &:hover { - border-color: #ff424d; - } - - .btn-main { - color: #fff; - background: #ff424d; - border-color: #ff424d; - - &:hover { - background: inherit; - } - } - } - - #donate-liberapay { - &:hover { - border-color: #f6c915; - } - - .btn-main { - color: #000; - background: #f6c915; - border-color: #f6c915; - - &:hover { - color: inherit; - background: inherit; - } - } - } - - #donate-github { - &:hover { - border-color: #fff; - } - - .btn-main { - color: #000; - background: #fff; - border-color: #fff; - - &:hover { - color: inherit; - background: inherit; - } - } - } } #qr-dialog { - padding: 0; + padding: 0; - &::backdrop { - background: rgba($color-black, 0.85); - } + &::backdrop { + background: rgba($color-black, 0.85); + } } @keyframes overlay-opacity { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 100% { - opacity: 0.75; - } + 100% { + opacity: 0.75; + } } @keyframes hint-opacity { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 100% { - opacity: 1; - } + 100% { + opacity: 1; + } }