diff --git a/website/content/donate.md b/website/content/donate.md index cf376ec7..82875657 100644 --- a/website/content/donate.md +++ b/website/content/donate.md @@ -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"] +++
@@ -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.* - - -
- -
-
- -
- -

Donate without fees

- ---- - -To ensure **100% of your contribution benefits Graphite**, or to pick a **custom** monthly donation, please support through **GitHub Sponsors**: - -Sponsor through GitHub - -
+

+Donate: GitHub Sponsors +Donate: without an account +

@@ -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. @@ -123,13 +106,10 @@ Or click a membership level below to pay directly (no account needed). A small f -
+
Or make a one-time donation -
-
- [Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
@@ -187,7 +167,9 @@ Please [get in touch](/contact) if you'd like a custom arrangement or want to pa
-
+
+ +Or make a one-time donation [Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk) diff --git a/website/sass/page/donate.scss b/website/sass/page/donate.scss index 6dda5a15..d2529a8d 100644 --- a/website/sass/page/donate.scss +++ b/website/sass/page/donate.scss @@ -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 {