Skip to content

Commit b36521e

Browse files
KeavonKeavon
committed
Improve readability of the donation page
1 parent ab724d8 commit b36521e

File tree

2 files changed

+61
-61
lines changed

2 files changed

+61
-61
lines changed

‎website/content/donate.md‎

Lines changed: 11 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ title = "Donate"
33

44
[extra]
55
css = ["/page/donate.css", "/component/feature-box.css"]
6-
# js = ["/js/fundraising.js"]
7-
# linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
86
+++
97

108
<section>
@@ -14,29 +12,14 @@ css = ["/page/donate.css", "/component/feature-box.css"]
1412

1513
**Safeguard the sustainable, independent future of quality open source creative software.**
1614

17-
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.
15+
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.
1816

19-
*Additionally, boosting the [Graphite Discord server](https://discord.graphite.rs) is another helpful way to contribute if you have Nitro boosts to spare.*
17+
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**.
2018

21-
*Live donation statistics are coming soon.*
22-
23-
</div>
24-
</section>
25-
26-
<section id="github-sponsors" class="feature-box-outer">
27-
<div class="feature-box-inner">
28-
29-
<div class="block">
30-
31-
<h1 class="feature-box-header">Donate without fees</h1>
32-
33-
---
34-
35-
To ensure **100% of your contribution benefits Graphite**, or to pick a **custom** monthly donation, please support through **GitHub Sponsors**:
36-
37-
<a href="https://github.com/sponsors/GraphiteEditor" target="_blank" class="button arrow">Sponsor through GitHub</a>
38-
39-
</div>
19+
<p class="call-to-action">
20+
<a href="https://github.com/sponsors/GraphiteEditor" target="_blank" class="button arrow">Donate: GitHub Sponsors</a>
21+
<a href="#supporter-memberships" class="button arrow">Donate: without an account</a>
22+
</p>
4023

4124
</div>
4225
</section>
@@ -50,7 +33,7 @@ To ensure **100% of your contribution benefits Graphite**, or to pick a **custom
5033

5134
---
5235

53-
Or click a membership level below to pay directly (no account needed). A small fee (2.9% + 30¢ / month) reduces what we receive.
36+
Click a membership level below to pay directly (no account needed). A small fee (2.9% + 30¢ / month) reduces what we receive.
5437

5538
</div>
5639

@@ -123,13 +106,10 @@ Or click a membership level below to pay directly (no account needed). A small f
123106

124107
</div>
125108

126-
<div class="block one-time-donation">
109+
<div class="block">
127110

128111
<a href="https://donate.stripe.com/fZeg2j0HQ5VU6HK14d" target="_blank" class="button arrow">Or make a one-time donation</a>
129112

130-
</div>
131-
<div class="block manage-membership">
132-
133113
[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
134114

135115
</div>
@@ -187,7 +167,9 @@ Please [get in touch](/contact) if you'd like a custom arrangement or want to pa
187167

188168
</div>
189169

190-
<div class="block manage-membership">
170+
<div class="block">
171+
172+
<a href="https://donate.stripe.com/fZeg2j0HQ5VU6HK14d" target="_blank" class="button arrow">Or make a one-time donation</a>
191173

192174
[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
193175

‎website/sass/page/donate.scss‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,57 @@
1-
.triptych.triptych,
2-
.triptych.triptych + .triptych.triptych {
3-
gap: 10px;
4-
margin-top: 10px;
1+
.call-to-action {
2+
display: flex;
3+
flex-wrap: wrap;
4+
flex-direction: row;
5+
gap: calc(var(--font-size-link) * 0.8);
6+
7+
.button {
8+
margin: 0;
9+
}
510
}
611

7-
.feature-box-narrow.feature-box-narrow.feature-box-narrow {
8-
min-width: 0;
9-
background-color: var(--color-fog);
10-
padding: calc(var(--feature-box-padding) / 2 * var(--variable-px));
11-
text-decoration: none;
12-
color: var(--color-navy);
12+
#supporter-memberships,
13+
#corporate-sponsorships {
14+
.triptych {
15+
gap: 10px;
16+
margin-top: 10px;
17+
}
1318

14-
h1 {
15-
// Compensates for emoji starting with some left spacing
16-
text-indent: -0.2em;
19+
.triptych + .block,
20+
.feature-box-inner > .block + :is(.block, .triptych) {
21+
margin-top: calc(var(--feature-box-padding) / 2 * var(--variable-px));
1722
}
1823

19-
ul {
20-
padding-left: 1em;
21-
font-size: calc(7 / 9 * 1em);
24+
.triptych + .block {
25+
display: flex;
26+
flex-direction: row;
27+
align-items: center;
28+
justify-content: space-between;
2229
}
23-
}
2430

25-
.feature-box-outer + .feature-box-outer {
26-
margin-top: 0;
27-
}
31+
.feature-box-narrow {
32+
min-width: 0;
33+
background-color: var(--color-fog);
34+
padding: calc(var(--feature-box-padding) / 2 * var(--variable-px));
35+
text-decoration: none;
36+
color: var(--color-navy);
2837

29-
#supporter-memberships,
30-
#corporate-sponsorships {
31-
background-color: var(--color-mustard);
38+
&:hover {
39+
background-color: var(--color-lemon);
40+
}
3241

33-
.manage-membership,
34-
.one-time-donation,
35-
.feature-box-inner > .block + .block,
36-
.feature-box-inner > .block + .triptych {
37-
margin-top: calc(var(--feature-box-padding) / 2 * var(--variable-px));
42+
h1 {
43+
// Compensates for emoji starting with some left spacing
44+
text-indent: -0.2em;
45+
}
46+
47+
ul {
48+
padding-left: 1em;
49+
font-size: calc(7 / 9 * 1em);
50+
}
51+
}
52+
53+
.button {
54+
background-color: var(--color-fog);
3855
}
3956
}
4057

@@ -44,19 +61,20 @@
4461

4562
#corporate-sponsorships {
4663
background-color: var(--color-ale);
64+
margin-top: 0;
4765
}
4866

4967
// .fundraising {
5068
// margin-top: 20px;
5169
// width: 100%;
52-
70+
//
5371
// .fundraising-bar {
5472
// width: 100%;
5573
// height: 32px;
5674
// border-radius: 10000px;
5775
// background: var(--color-fog);
5876
// overflow: hidden;
59-
77+
//
6078
// .fundraising-bar-progress {
6179
// width: calc(var(--fundraising-percent) - (4px * 2) - (32px - 4px * 2));
6280
// padding-left: calc(32px - 4px * 2);
@@ -67,7 +85,7 @@
6785
// transition: opacity 1s, width 2s;
6886
// }
6987
// }
70-
88+
//
7189
// .goal-metrics {
7290
// display: flex;
7391
// justify-content: space-between;
@@ -80,7 +98,7 @@
8098
// transition: opacity 1s;
8199
// }
82100
// }
83-
101+
//
84102
// &.fundraising.loading {
85103
// .goal-metrics > span,
86104
// .fundraising-bar .fundraising-bar-progress {

0 commit comments

Comments
 (0)