refactor: update donate content

This commit is contained in:
Derrick Hammer 2023-06-17 22:57:29 -04:00
parent 7d184fb7af
commit 7883bdc36a
4 changed files with 259 additions and 250 deletions

View File

@ -3,14 +3,15 @@ import './How.scss';
--- ---
<section id="how" class="tilted-bg-r"> <section id="how" class="tilted-bg-r">
<div class="feature-group"> <div class="feature-group">
<h2>How should I donate?</h2> <h2>How should I donate?</h2>
<h3>Donate via Gitcoin during funding rounds</h3> <h3>Donate via Gitcoin during funding rounds</h3>
<p> <div>
This is because they will match you up to 150%. Currently, this is on the dates: June 7, 2022 June 22, 2022 <a href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education" class="btn-main">Gitcoin</a>
</p> </div>
<div> <p>
<a href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education" class="btn-main">Gitcoin</a> 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.
</p>
</div> </div>
</div>
</section> </section>

View File

@ -17,6 +17,11 @@
.feature-group { .feature-group {
max-width: 64em; max-width: 64em;
} }
p{
font-size: 1.9em;
font-style: italic;
padding-top: 1em;
}
@media screen and (max-width: 80rem) { @media screen and (max-width: 80rem) {
p { p {

View File

@ -91,9 +91,6 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL
</div> </div>
</div> </div>
</div> </div>
<p>
**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.**
</p>
<p> <p>
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! 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!
</p> </p>
@ -147,4 +144,4 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL
} }
}); });
</script> </script>
</section> </section>

View File

@ -2,285 +2,291 @@
@import "/src/styles/vars.scss"; @import "/src/styles/vars.scss";
#methods { #methods {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin: 2em 7.5% 6em; margin: 2em 7.5% 6em;
padding-top: 3em; padding-top: 3em;
font-family: $font-family-jaldi; font-family: $font-family-jaldi;
h2 { h2 {
margin-bottom: 1em; margin-bottom: 1em;
@include fluid-font-size(2.8125rem); @include fluid-font-size(2.8125rem);
line-height: 122%; 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);
} }
> div { > div {
display: flex; p {
flex-direction: column; font-style: italic;
padding: 4em 4em 1em; }
background: $color-blue-charcoal; }
border: 0.1em solid transparent;
border-radius: 1em;
transition: border-color 200ms;
&:hover { .method-grid {
border-color: $color-aquamarine; display: grid;
} grid-template-columns: repeat(1, 1fr);
> div:first-child {
display: flex;
align-items: center;
gap: 2em; gap: 2em;
margin-bottom: 3em; margin-bottom: 4em;
svg { @media screen and (min-width: 48rem) {
flex-shrink: 0; grid-template-columns: repeat(2, 1fr);
@include fluid-max-width-height(3.4375rem, 3.4375rem);
} }
h3 { > div {
flex-grow: 1; display: flex;
font-family: $font-family-jetbrains-mono; flex-direction: column;
@include fluid-font-size(1.5rem); 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 { .address {
@include fluid-width-height(3.4375rem, 3.4375rem); display: flex;
image-rendering: pixelated; margin-bottom: 3em;
cursor: zoom-in; 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,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>');
background: $color-cloud;
transition: background $transition-duration;
&:hover {
background: $color-white;
}
&.success {
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
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 { p {
display: flex; margin-top: 1em;
margin-bottom: 3em; @include fluid-font-size(1.25rem);
color: $color-cloud; line-height: 157%;
color: $color-cloud;
}
div { .btn-main {
order: 1; @include fluid-font-size(1.5rem);
flex-grow: 1; }
position: relative;
@include fluid-font-size(1.375rem);
word-break: break-all;
user-select: all;
}
button { #donate-bitcoin:hover {
order: 2; border-color: #f7931a;
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,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>');
background: $color-cloud;
transition: background $transition-duration;
#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 { &:hover {
background: $color-white; border-color: #0070e0;
} }
&.success { .btn-main {
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'); color: #fff;
background: $color-aquamarine; background: #0070e0;
} border-color: #0070e0;
}
button:hover + div, button.success + div { &:hover {
&::before { background: inherit;
content: ""; }
position: absolute; }
inset: -0.5em; }
padding: 0.5em;
background: $color-blue-charcoal; #donate-patreon {
animation: $transition-duration overlay-opacity forwards; &:hover {
border-color: #ff424d;
} }
&::after { .btn-main {
content: "Copy to Clipboard"; color: #fff;
position: absolute; background: #ff424d;
top: 0; border-color: #ff424d;
right: -0.5em;
padding: 0 0.5em; &:hover {
background: rgba($color-blue-charcoal, 0.75); background: inherit;
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 { #donate-liberapay {
&::after { &:hover {
content: "Copied to Clipboard"; border-color: #f6c915;
color: $color-aquamarine;
} }
}
}
}
p { .btn-main {
margin-top: 1em; color: #000;
@include fluid-font-size(1.25rem); background: #f6c915;
line-height: 157%; border-color: #f6c915;
color: $color-cloud;
}
.btn-main { &:hover {
@include fluid-font-size(1.5rem); color: inherit;
} background: inherit;
}
#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;
} }
.btn-main { #donate-github {
color: #fff; &:hover {
background: #0070e0; border-color: #fff;
border-color: #0070e0; }
&:hover { .btn-main {
background: inherit; 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 { #qr-dialog {
padding: 0; padding: 0;
&::backdrop { &::backdrop {
background: rgba($color-black, 0.85); background: rgba($color-black, 0.85);
} }
} }
@keyframes overlay-opacity { @keyframes overlay-opacity {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 0.75; opacity: 0.75;
} }
} }
@keyframes hint-opacity { @keyframes hint-opacity {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }