Fix website donation page to work with responsive design

Author: Keavon

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), <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
 

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.
 
-<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)
 

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;

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);