From 59bb3194ca7e15e872f22a7167572f8b20d341e2 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Mon, 23 Jun 2025 03:55:32 -0700 Subject: [PATCH] Fix website donation page to work with responsive design --- ...view-2024-highlights-and-a-peek-at-2025.md | 18 +++++++++-- website/content/donate.md | 17 +++++------ website/sass/component/feature-icons.scss | 9 ++++++ website/sass/page/donate.scss | 30 ++++++++++++++++++- 4 files changed, 60 insertions(+), 14 deletions(-) diff --git a/website/content/blog/2025-01-16-year-in-review-2024-highlights-and-a-peek-at-2025.md b/website/content/blog/2025-01-16-year-in-review-2024-highlights-and-a-peek-at-2025.md index c2376abf..f34dc883 100644 --- a/website/content/blog/2025-01-16-year-in-review-2024-highlights-and-a-peek-at-2025.md +++ b/website/content/blog/2025-01-16-year-in-review-2024-highlights-and-a-peek-at-2025.md @@ -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), installing the PWA on your desktop, self-hosting the builds, or downloading the soon-to-be-ready native app for your OS of choice (more news on that later in the post). -| | | -|-|-| -|

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.

| Screenshot of 10,000 stars | + + +

+Screenshot of 10,000 stars +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 financially and by boosting the GitHub project page over the 10,000 star milestone just in time to celebrate the end of a productive 2024. +

## 2024 development progress report diff --git a/website/content/donate.md b/website/content/donate.md index b1153494..c1eef60b 100644 --- a/website/content/donate.md +++ b/website/content/donate.md @@ -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. -

+

Donate: GitHub Sponsors @@ -24,9 +24,9 @@ css = ["/page/donate.css", "/component/feature-box.css", "/component/feature-ico Start to finish in several seconds -

+
-
+
@@ -117,9 +117,6 @@ A small fee of 3.6% + 30¢ reduces what we receive each month. If convenient, co -
-
-

🧬 “DNA” »

@@ -154,9 +151,9 @@ A small fee of 3.6% + 30¢ reduces what we receive each month. If convenient, co
-
+
-Or make a one-time donation +Or make a one-time donation [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
-
+
-Or make a one-time donation +Or make a one-time donation [Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk) diff --git a/website/sass/component/feature-icons.scss b/website/sass/component/feature-icons.scss index 2fc8edba..5b99271d 100644 --- a/website/sass/component/feature-icons.scss +++ b/website/sass/component/feature-icons.scss @@ -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; diff --git a/website/sass/page/donate.scss b/website/sass/page/donate.scss index d85c67f7..e4f0e788 100644 --- a/website/sass/page/donate.scss +++ b/website/sass/page/donate.scss @@ -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);