mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-07-07 15:55:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fix website donation page to work with responsive design

Browse source
This commit is contained in:
Keavon Chambers 2025-06-23 03:55:32 -07:00
parent 2d62d01fd4
commit 59bb3194ca
4 changed files with 60 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

18
website/content/blog/2025-01-16-year-in-review-2024-highlights-and-a-peek-at-2025.md
View file

@ -23,9 +23,21 @@ In a world where the notion of software ownership seems headed towards extinctio
Graphite is and will always remain yours to keep, whether that's by running the lightweight, client-side [web app](https://editor.graphite.rs) (no signup, no cloud), <a href="https://support.google.com/chrome/answer/9658361" target="_blank">installing the PWA</a> on your desktop, self-hosting the <a href="https://github.com/GraphiteEditor/Graphite/releases/tag/latest-stable" target="_blank">builds</a>, or downloading the soon-to-be-ready native app for your OS of choice (more news on that later in the post).
| | |
|-|-|
| <p>Join me—Keavon Chambers, founder and designer of Graphite—to see where the past year has brought us on this quest. And let me take this moment to thank our growing community for sharing my vision and showing support, both [financially](/donate) and by boosting the GitHub project page over the 10,000 star milestone just in time to celebrate the end of a productive 2024.</p> | <a href="https://github.com/GraphiteEditor/Graphite"><img src="https://static.graphite.rs/content/blog/2025-01-16-year-in-review-2024-highlights-and-a-peek-at-2025/10k-stars.avif" style="max-width: unset; margin-top: 0.5em" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Screenshot of 10,000 stars" /></a> |
<style class="float-image">
.float-image + p {
text-align: left;
}
.float-image + p > a {
float: right;
margin-left: 1.5em;
margin-bottom: 1em;
}
</style>
<p>
<a href="https://github.com/GraphiteEditor/Graphite"><img src="https://static.graphite.rs/content/blog/2025-01-16-year-in-review-2024-highlights-and-a-peek-at-2025/10k-stars.avif" style="max-width: unset; margin-top: 0.5em" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Screenshot of 10,000 stars" /></a>
<span>Join me, founder and designer of Graphite, to see where the past year has brought us on this quest. And let me take this moment to thank our growing community for sharing my vision and showing support, both <a href="/donate">financially</a> and by boosting the GitHub project page over the 10,000 star milestone just in time to celebrate the end of a productive 2024.</span>
</p>
## 2024 development progress report

17
website/content/donate.md
View file

@ -12,7 +12,7 @@ css = ["/page/donate.css", "/component/feature-box.css", "/component/feature-ico
**Own your tools. Own your art.** Invest in the sustainable, independent future of high-quality creative software that's free, and always will be.
<p class="call-to-action">
<div class="call-to-action">
<span>
<a href="https://github.com/sponsors/GraphiteEditor" target="_blank" class="button arrow">Donate: GitHub Sponsors</a>
@ -24,9 +24,9 @@ css = ["/page/donate.css", "/component/feature-box.css", "/component/feature-ico
<em>Start to finish in several seconds</em>
</span>
</p>
</div>
<div class="feature-icons four-wide statistics" data-statistics>
<div class="feature-icons three-wide statistics" data-statistics>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 34" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span data-statistics-dollars></span>
@ -117,9 +117,6 @@ A small fee of 3.6% + 30¢ reduces what we receive each month. If convenient, co
</a>
</div>
<div class="triptych">
<a href="https://buy.stripe.com/28o4jB62a0BA5DGbIL" target="_blank" class="block feature-box-narrow">
<h1 class="feature-box-header">🧬 &ldquo;DNA&rdquo; &raquo;</h1>
@ -154,9 +151,9 @@ A small fee of 3.6% + 30¢ reduces what we receive each month. If convenient, co
</div>
<div class="block">
<div class="block action-buttons">
<a href="https://donate.stripe.com/fZeg2j0HQ5VU6HK14d" target="_blank" class="button arrow">Or make a one-time donation</a>
<a href="https://donate.stripe.com/6oU8wP6m0c2kb2AermbQY0a" target="_blank" class="button arrow">Or make a one-time donation</a>
[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
@ -213,9 +210,9 @@ Also available to individuals wanting to make a larger impact. [Reach out](/cont
</div>
<div class="block">
<div class="block action-buttons">
<a href="https://donate.stripe.com/fZeg2j0HQ5VU6HK14d" target="_blank" class="button arrow">Or make a one-time donation</a>
<a href="https://donate.stripe.com/6oU8wP6m0c2kb2AermbQY0a" target="_blank" class="button arrow">Or make a one-time donation</a>
[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)

9
website/sass/component/feature-icons.scss
View file

@ -55,6 +55,15 @@
}
}
&.three-wide .feature-icon {
flex: 1 0 calc((100% / 3) - (16px * 4) - (16px / 4));
@media screen and (max-width: 800px) {
// Quarter width, minus own padding on both sides
flex: 1 0 calc(100% - (16px * 2));
}
}
&.stacked {
justify-content: space-between;
margin: 0 -10px;

30
website/sass/page/donate.scss
View file

@ -3,7 +3,7 @@
flex-wrap: wrap;
flex-direction: row;
gap: calc(var(--font-size-link) * 0.8);
margin-top: calc(40 * var(--variable-px));
margin: calc(40 * var(--variable-px)) 0;
span {
display: flex;
@ -30,6 +30,10 @@
.triptych {
gap: 10px;
margin-top: 10px;
a {
flex-basis: calc(100% / 3 - 10px - (var(--feature-box-padding) * var(--variable-px)));
}
}
.triptych + .block,
@ -44,6 +48,30 @@
justify-content: space-between;
}
.action-buttons {
gap: calc(var(--feature-box-padding) / 4 * var(--variable-px)) calc(var(--feature-box-padding) * var(--variable-px));
flex-wrap: wrap;
p {
text-align: left;
text-justify: auto;
white-space: nowrap;
}
}
@media screen and (max-width: 1280px) {
.triptych a {
// Half width, minus own padding on both sides, minus the gap
flex-basis: calc(50% - (var(--feature-box-padding) * var(--variable-px)) - 10px);
}
}
@media screen and (max-width: 640px) {
.triptych a {
flex-basis: 100%;
}
}
.feature-box-narrow {
min-width: 0;
background-color: var(--color-fog);