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 c2376abf5..f34dc883d 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 b1153494f..c1eef60be 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 2fc8edba1..5b99271d9 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 d85c67f70..e4f0e7886 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);