mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-07-07 15:55:00 +00:00
Improve readability of the donation page
This commit is contained in:
Keavon Chambers
parent
ab724d8b00
commit
b36521e588
2 changed files with 62 additions and 62 deletions
|
|
@ -3,8 +3,6 @@ title = "Donate"
|
|||
|
||||
[extra]
|
||||
css = ["/page/donate.css", "/component/feature-box.css"]
|
||||
# js = ["/js/fundraising.js"]
|
||||
# linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
|
||||
+++
|
||||
|
||||
<section>
|
||||
|
|
@ -14,29 +12,14 @@ css = ["/page/donate.css", "/component/feature-box.css"]
|
|||
|
||||
**Safeguard the sustainable, independent future of quality open source creative software.**
|
||||
|
||||
Graphite is entirely built and funded by the community. Your contributions directly help us level up the scope and speed of the project's development. Resources are put towards infrastructure, legal costs, swag to keep contributors happy and motivated, and outreach like exhibiting at conventions and traveling to conferences to foster industry relationships. Hiring full-time developers is the next big goal as support grows.
|
||||
Graphite is 100% built and funded by the community. Your contributions directly help us level up the scope and speed of the project's development. Resources are put towards infrastructure, legal costs, swag to keep contributors happy and motivated, and outreach like exhibiting at conventions and traveling to conferences to foster industry relationships. Hiring full-time developers is the big next step as support grows.
|
||||
|
||||
*Additionally, boosting the [Graphite Discord server](https://discord.graphite.rs) is another helpful way to contribute if you have Nitro boosts to spare.*
|
||||
Select a level of support that suits you from the choices below. Or, you can ensure **100% of your contribution benefits Graphite** and have a choice of **custom** monthly donation amounts by paying through **GitHub Sponsors**.
|
||||
|
||||
*Live donation statistics are coming soon.*
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="github-sponsors" class="feature-box-outer">
|
||||
<div class="feature-box-inner">
|
||||
|
||||
<div class="block">
|
||||
|
||||
<h1 class="feature-box-header">Donate without fees</h1>
|
||||
|
||||
---
|
||||
|
||||
To ensure **100% of your contribution benefits Graphite**, or to pick a **custom** monthly donation, please support through **GitHub Sponsors**:
|
||||
|
||||
<a href="https://github.com/sponsors/GraphiteEditor" target="_blank" class="button arrow">Sponsor through GitHub</a>
|
||||
|
||||
</div>
|
||||
<p class="call-to-action">
|
||||
<a href="https://github.com/sponsors/GraphiteEditor" target="_blank" class="button arrow">Donate: GitHub Sponsors</a>
|
||||
<a href="#supporter-memberships" class="button arrow">Donate: without an account</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -50,7 +33,7 @@ To ensure **100% of your contribution benefits Graphite**, or to pick a **custom
|
|||
|
||||
---
|
||||
|
||||
Or click a membership level below to pay directly (no account needed). A small fee (2.9% + 30¢ / month) reduces what we receive.
|
||||
Click a membership level below to pay directly (no account needed). A small fee (2.9% + 30¢ / month) reduces what we receive.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -123,13 +106,10 @@ Or click a membership level below to pay directly (no account needed). A small f
|
|||
|
||||
</div>
|
||||
|
||||
<div class="block one-time-donation">
|
||||
<div class="block">
|
||||
|
||||
<a href="https://donate.stripe.com/fZeg2j0HQ5VU6HK14d" target="_blank" class="button arrow">Or make a one-time donation</a>
|
||||
|
||||
</div>
|
||||
<div class="block manage-membership">
|
||||
|
||||
[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
|
||||
|
||||
</div>
|
||||
|
|
@ -187,7 +167,9 @@ Please [get in touch](/contact) if you'd like a custom arrangement or want to pa
|
|||
|
||||
</div>
|
||||
|
||||
<div class="block manage-membership">
|
||||
<div class="block">
|
||||
|
||||
<a href="https://donate.stripe.com/fZeg2j0HQ5VU6HK14d" target="_blank" class="button arrow">Or make a one-time donation</a>
|
||||
|
||||
[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,41 +1,58 @@
|
|||
.triptych.triptych,
|
||||
.triptych.triptych + .triptych.triptych {
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.call-to-action {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
gap: calc(var(--font-size-link) * 0.8);
|
||||
|
||||
.feature-box-narrow.feature-box-narrow.feature-box-narrow {
|
||||
min-width: 0;
|
||||
background-color: var(--color-fog);
|
||||
padding: calc(var(--feature-box-padding) / 2 * var(--variable-px));
|
||||
text-decoration: none;
|
||||
color: var(--color-navy);
|
||||
|
||||
h1 {
|
||||
// Compensates for emoji starting with some left spacing
|
||||
text-indent: -0.2em;
|
||||
.button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1em;
|
||||
font-size: calc(7 / 9 * 1em);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-box-outer + .feature-box-outer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#supporter-memberships,
|
||||
#corporate-sponsorships {
|
||||
background-color: var(--color-mustard);
|
||||
.triptych {
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.manage-membership,
|
||||
.one-time-donation,
|
||||
.feature-box-inner > .block + .block,
|
||||
.feature-box-inner > .block + .triptych {
|
||||
.triptych + .block,
|
||||
.feature-box-inner > .block + :is(.block, .triptych) {
|
||||
margin-top: calc(var(--feature-box-padding) / 2 * var(--variable-px));
|
||||
}
|
||||
|
||||
.triptych + .block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.feature-box-narrow {
|
||||
min-width: 0;
|
||||
background-color: var(--color-fog);
|
||||
padding: calc(var(--feature-box-padding) / 2 * var(--variable-px));
|
||||
text-decoration: none;
|
||||
color: var(--color-navy);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-lemon);
|
||||
}
|
||||
|
||||
h1 {
|
||||
// Compensates for emoji starting with some left spacing
|
||||
text-indent: -0.2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1em;
|
||||
font-size: calc(7 / 9 * 1em);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: var(--color-fog);
|
||||
}
|
||||
}
|
||||
|
||||
#supporter-memberships {
|
||||
|
|
@ -44,19 +61,20 @@
|
|||
|
||||
#corporate-sponsorships {
|
||||
background-color: var(--color-ale);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// .fundraising {
|
||||
// margin-top: 20px;
|
||||
// width: 100%;
|
||||
|
||||
//
|
||||
// .fundraising-bar {
|
||||
// width: 100%;
|
||||
// height: 32px;
|
||||
// border-radius: 10000px;
|
||||
// background: var(--color-fog);
|
||||
// overflow: hidden;
|
||||
|
||||
//
|
||||
// .fundraising-bar-progress {
|
||||
// width: calc(var(--fundraising-percent) - (4px * 2) - (32px - 4px * 2));
|
||||
// padding-left: calc(32px - 4px * 2);
|
||||
|
|
@ -67,7 +85,7 @@
|
|||
// transition: opacity 1s, width 2s;
|
||||
// }
|
||||
// }
|
||||
|
||||
//
|
||||
// .goal-metrics {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
|
|
@ -80,7 +98,7 @@
|
|||
// transition: opacity 1s;
|
||||
// }
|
||||
// }
|
||||
|
||||
//
|
||||
// &.fundraising.loading {
|
||||
// .goal-metrics > span,
|
||||
// .fundraising-bar .fundraising-bar-progress {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue