Add Stipe donations to the website and polish other pages

Author: Keavon

README.md

@@ -60,13 +60,13 @@ Learn more from the [website](https://graphite.rs/), subscribe to the [newslette
 
 ## Screenshots
 
-[!["Painted Dreams" vector artwork](https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.png)](https://editor.graphite.rs/#demo/painted-dreams)
+[!["Painted Dreams" vector artwork](https://static.graphite.rs/content/index/gui-demo-painted-dreams__3.png)](https://editor.graphite.rs/#demo/painted-dreams)
 
-![Magazine spread](https://static.graphite.rs/content/index/magazine-page-layout.png)
+![Magazine spread](https://static.graphite.rs/content/index/magazine-page-layout__2.png)
 
-[!["Valley of Spires" vector artwork](https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires__2.png)](https://editor.graphite.rs/#demo/valley-of-spires)
+[!["Isometric Fountain" vector artwork](https://static.graphite.rs/content/index/gui-demo-node-graph-isometric-fountain.png)](https://editor.graphite.rs/#demo/isometric-fountain)
 
-!["Marbled Mandelbrot" fractal raster artwork](https://static.graphite.rs/content/index/gui-demo-fractal__2.png)
+!["Marbled Mandelbrot" fractal raster artwork](https://static.graphite.rs/content/index/gui-demo-fractal__3.png)
 
 ## Contributing/building the code
 

website/content/_index.md

@@ -81,15 +81,15 @@ meta_description = "Open source free software. A vector graphics creativity suit
 <section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint>
 
 <div class="carousel-slide" data-carousel-slide>
-	<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__7.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
+	<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__8.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
 	<!-- Above is a copy of the last -->
-	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" />
-	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/magazine-page-layout.avif" />
-	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires__2.avif" />
-	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-fractal__2.avif" />
-	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-mockup-nodes__7.avif" />
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__3.avif" />
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/magazine-page-layout__2.avif" />
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-node-graph-isometric-fountain.avif" />
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-fractal__3.avif" />
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-mockup-nodes__8.avif" />
 	<!-- Below is a copy of the first -->
-	<img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
+	<img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
 </div>
 
 <div class="carousel-slide torn left" data-carousel-slide-torn-left></div>
@@ -135,13 +135,13 @@ meta_description = "Open source free software. A vector graphics creativity suit
 	Design for a magazine spread, a preview of the upcoming focus on desktop publishing
 </p>
 <p data-carousel-description>
-	<a href="https://editor.graphite.rs/#demo/valley-of-spires"><em>Valley of Spires</em></a> — All layer stacks are represented, under the hood, by a node graph
+	<a href="https://editor.graphite.rs/#demo/isometric-fountain"><em>Isometric Fountain</em></a> — All layer stacks are represented, under the hood, by a nondestructive node graph
 </p>
 <p data-carousel-description>
 	Mandelbrot fractal filled with a noise pattern, procedurally generated and infinitely scalable
 </p>
 <p data-carousel-description>
-	Coming soon: mockup for the actively in-development raster workflow with new nodes for photo editing
+	Coming soon: this user interface mockup shows the raster image editing features planned for 2025
 </p>
 
 </div>

website/content/donate.md

@@ -2,64 +2,206 @@
 title = "Donate"
 
 [extra]
-# css = ["/page/donate.css", "/component/feature-box.css", "/layout/balance-text.css"]
+css = ["/page/donate.css", "/component/feature-box.css"]
 # js = ["/js/fundraising.js"]
 # linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
 +++
 
 <section>
 <div class="block">
 
-# Donate
+# Support Graphite
 
-**Safeguard the sustainable, independent future of Graphite.**
+**Safeguard the sustainable, independent future of quality open source creative software.**
 
-Your monthly support (or one-off contribution) helps provide the resources needed to grow Graphite into the ultimate 2D creative tool.
+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.
 
-<a href="https://github.com/sponsors/GraphiteEditor" class="button arrow">&hearts; Give now</a>
+*Additionally, boosting the [Graphite Discord server](https://discord.graphite.rs) is another helpful way to contribute if you have Nitro boosts to spare.*
 
-<br />
+*Live donation statistics are coming soon.*
 
-(Additionally, boosting the [Graphite Discord server](https://discord.graphite.rs) is helpful if you already have spare Nitro boosts.)
+</div>
+</section>
+
+<section id="github-sponsors" class="feature-box-outer">
+<div class="feature-box-inner">
+
+<div class="block">
+
+<h1 class="feature-box-header">Donate without fees</h1>
+
+---
+
+To ensure **100% of your contribution benefits Graphite**, or to pick a **custom** monthly donation, please support through **GitHub Sponsors**:
+
+<a href="https://github.com/sponsors/GraphiteEditor" target="_blank" class="button arrow">Sponsor through GitHub</a>
+
+</div>
 
 </div>
 </section>
 
-<!-- <section id="fundraising" class="feature-box-outer">
+<section id="supporter-memberships" class="feature-box-outer">
 <div class="feature-box-inner">
-<div>
 
 <div class="block">
 
-# Support the mission
+<h1 class="feature-box-header">Supporter memberships</h1>
 
-<p class="balance-text">
-You can help realize Graphite's ambitious vision of building the ultimate 2D creative tool.
-Graphite is built by a small, dedicated crew of volunteers in need of resources to grow.
-</p>
+---
 
-### Summer 2023 fundraising goal:
+Or click a membership level below to pay directly (no account needed). A small fee (2.9% + 30¢ / month) reduces what we receive.
+
+</div>
+
+<div class="triptych">
+
+<a href="https://buy.stripe.com/6oE2btfCK9863vybII" target="_blank" class="block feature-box-narrow">
+
+<h1 class="feature-box-header">⭕ &ldquo;Quark&rdquo; &raquo;</h1>
+
+**$5 / month**
+
+- Your GitHub profile unlocks a shiny achievement acknowledging your contribution *(through GitHub Sponsors only)*
+
+</a>
+<a href="https://buy.stripe.com/00gdUb62aesq9TW7st" target="_blank" class="block feature-box-narrow">
+
+<h1 class="feature-box-header">➕ &ldquo;Proton&rdquo; &raquo;</h1>
+
+**$10 / month**
+
+- Get a **"Member" role** and accompanying **gold-colored nametag on Discord**
+- *Plus the lower-tier rewards*
+
+</a>
+<a href="https://buy.stripe.com/5kAbM38aiacaeac28a" target="_blank" class="block feature-box-narrow">
+
+<h1 class="feature-box-header">⚛️ &ldquo;Carbon&rdquo; &raquo;</h1>
+
+**$15 / month**
+
+- Your name/handle listed in the end-of-year **retrospective blog post** thank-you section
+- *Plus the lower-tier rewards*
+
+</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>
+
+**$25 / month**
+
+- Your **personal name** (or handle) **on the Graphite website and GitHub readme**
+- Option to be mailed a personal **thank-you card with Graphite stickers** (US addresses only)
+- *Plus the lower-tier rewards*
+
+</a>
+<a href="https://buy.stripe.com/28o03laiq0BA8PS6os" target="_blank" class="block feature-box-narrow">
+
+<h1 class="feature-box-header">🌱 &ldquo;Organism&rdquo; &raquo;</h1>
+
+**$50 / month**
+
+- Option to be given a public **shout-out of appreciation** from @GraphiteEditor on your choice of social media sites
+- *Plus the lower-tier rewards*
+
+</a>
+<a href="https://buy.stripe.com/fZedUbduCfwu2ru7sx" target="_blank" class="block feature-box-narrow">
+
+<h1 class="feature-box-header">🌄 &ldquo;Biosphere&rdquo; &raquo;</h1>
+
+**$75 / month**
+
+- Your personal name (or handle) may be a **hyperlink** to your personal site or social media profile
+- *Plus the lower-tier rewards*
+
+</a>
+
+</div>
+
+<div class="block one-time-donation">
+
+<a href="https://donate.stripe.com/fZeg2j0HQ5VU6HK14d" target="_blank" class="button arrow">Or make a one-time donation</a>
 
-<div class="fundraising loading" data-fundraising>
-	<div class="fundraising-bar" data-fundraising-bar style="--fundraising-percent: 0%">
-		<div class="fundraising-bar-progress"></div>
-	</div>
-	<div class="goal-metrics">
-		<span data-fundraising-percent>Progress: <span data-dynamic>0</span>%</span>
-		<span data-fundraising-goal>Goal: $<span data-dynamic>0</span>/month</span>
-	</div>
 </div>
+<div class="block manage-membership">
 
-[Become a monthly supporter](https://github.com/sponsors/GraphiteEditor) this summer to collect an exclusive 💚 badge. Each season you support, a new heart design is yours to keep. In the future, they'll be shown on Graphite account profiles and community areas like forums and in-app collaboration.
+[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
 
-<a href="https://github.com/sponsors/GraphiteEditor" class="button arrow">Donate</a>
+</div>
 
 </div>
+</section>
+
+<section id="corporate-sponsorships" class="feature-box-outer">
+<div class="feature-box-inner">
+
+<div class="block">
+
+<h1 class="feature-box-header">Corporate sponsorships</h1>
+
+---
+
+These higher tiers are also available to individuals who want to make a larger impact.
+
+Please [get in touch](/contact) if you'd like a custom arrangement or want to pay by invoice or ACH to help avoid processing fees.
+
+</div>
+
+<div class="triptych">
+
+<a href="https://buy.stripe.com/7sI6rJ1LU5VUaY05kq" target="_blank" class="block feature-box-narrow">
+
+<h1 class="feature-box-header">🪨 &ldquo;Charcoal&rdquo; &raquo;</h1>
+
+**$100 / month**
+
+- Your **company name** may be shown **on the Graphite website and GitHub readme** starting at this tier level
+- *Plus the lower-tier rewards for members*
+
+</a>
+<a href="https://buy.stripe.com/3cs8zR8ai0BA8PSaEL" target="_blank" class="block feature-box-narrow">
+
+<h1 class="feature-box-header">🛡️ &ldquo;Carbide&rdquo; &raquo;</h1>
+
+**$250 / month**
+
+- Your name on the website and readme may be a **hyperlink** to your company/personal site
+- *Plus the lower-tier rewards for members*
+
+</a>
+<a href="https://buy.stripe.com/fZeaHZ76e0BAeaccMU" target="_blank" class="block feature-box-narrow">
+
+<h1 class="feature-box-header">💎 &ldquo;Diamond&rdquo; &raquo;</h1>
+
+**$500 / month**
+
+- Your name and link on the website and readme may instead be a **hyperlinked logo**
+- *Plus the lower-tier rewards for members*
+
+</a>
 
-<div class="graphic">
-	<a href="https://github.com/sponsors/GraphiteEditor"><img src="https://files.keavon.com/-/OtherDroopyBoto/Spring_Heart.png" /></a>
 </div>
 
+<div class="block manage-membership">
+
+[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
+
 </div>
+
 </div>
-</section> -->
+</section>
+
+<!-- <div class="fundraising loading" data-fundraising>
+	<div class="fundraising-bar" data-fundraising-bar style="--fundraising-percent: 0%">
+		<div class="fundraising-bar-progress"></div>
+	</div>
+	<div class="goal-metrics">
+		<span data-fundraising-percent>Progress: <span data-dynamic>0</span>%</span>
+		<span data-fundraising-goal>Goal: $<span data-dynamic>0</span>/month</span>
+	</div>
+</div> -->

website/content/volunteer/guide/starting-a-task/code-quality-guidelines.md

@@ -27,15 +27,15 @@ Always use the style `42.` instead of `42.0` for whole-number floats to maintain
 
 ## Comments
 
-For consistency, please try to write comments in *Sentence case* (starting with a capital letter). End with a period only if multiple sentences are used in the same comment. For doc comments (`///`), always write in full sentences ending with a period. There should always be one space after the `//` or `///` comment markers, and `/* */` style comments shouldn't be used.
+For consistency, please try to write comments (`//`) in *Sentence case* (with a capital first letter) and don't end with a period unless multiple sentences are used in the same comment. For doc comments (`///`), always end your sentences with a period. There should always be one space after the `//` or `///` comment markers, and `/* */` style comments should be avoided.
 
 Avoid including commented-out code, unless you have a compelling reason to keep it around for future adaption, in your PRs that are open for code review.
 
-Comments should usually be placed on a separate line above the code they are referring to, not at the end of the code line.
+Comments should usually be placed on a separate line above the code they are referring to, not at the end of the same code line.
 
 ## Blank lines
 
-Please make a habit of grouping together related lines of codes in blocks separated by blank lines. If you have dozens of lines comprising a single unbroken block of logic, you are likely not splitting it apart enough to aid readability. Find sensible places to partition the logic and insert blank lines between each. Roughly 10% of the code you write should ideally be blank lines, otherwise you are likely underutilizing them at the expense of readability.
+Please make a habit of grouping together related lines of code in blocks separated by blank lines. If you have dozens of lines comprising a single unbroken block of logic, you are likely not splitting it apart enough to aid readability. Find sensible places to partition the logic and insert blank lines between each. Roughly 10% of the code you write should ideally be blank lines, otherwise you are likely underutilizing them at the expense of readability.
 
 ## Imports
 

website/sass/base.scss

@@ -31,6 +31,7 @@
 	--variable-px: Min(1px, 0.15vw);
 	--page-edge-padding: 40px;
 	--border-thickness: 2px;
+	--feature-box-padding: 80;
 	--font-size-link: calc(1rem * 4 / 3);
 }
 
@@ -53,6 +54,7 @@ body {
 		--font-size-link: calc(1rem * 4 / 3);
 		--page-edge-padding: 28px;
 		--border-thickness: 1px;
+		--feature-box-padding: 40;
 	}
 
 	html,

website/sass/component/carousel.scss

@@ -1,4 +1,4 @@
-.carousel {
+.carousel.carousel {
 	margin-top: calc(80 * var(--variable-px));
 	transform: translate(0);
 

website/sass/component/feature-box.scss

@@ -4,7 +4,7 @@
 
 .feature-box-narrow,
 .feature-box-outer {
-	padding: calc(80 * var(--variable-px));
+	padding: calc(var(--feature-box-padding) * var(--variable-px));
 	background-image: url("https://static.graphite.rs/textures/noise.png");
 	background-blend-mode: overlay;
 	background-position: center;
@@ -15,11 +15,11 @@
 }
 
 .feature-box-full-image {
-	width: calc(100% + 2 * 80 * var(--variable-px));
+	width: calc(100% + 2 * var(--feature-box-padding) * var(--variable-px));
 	height: auto;
-	margin-left: calc(-80 * var(--variable-px));
-	margin-top: calc(-80 * var(--variable-px));
-	margin-bottom: calc(40 * var(--variable-px));
+	margin-left: calc(-1 * var(--feature-box-padding) * var(--variable-px));
+	margin-top: calc(-1 * var(--feature-box-padding) * var(--variable-px));
+	margin-bottom: calc(var(--feature-box-padding) / 2 * var(--variable-px));
 	display: block;
 }
 
@@ -71,7 +71,7 @@ h1.feature-box-header.feature-box-header {
 .triptych {
 	display: flex;
 	flex-wrap: wrap;
-	gap: calc(80 * var(--variable-px));
+	gap: calc(var(--feature-box-padding) * var(--variable-px));
 
 	.block {
 		flex: 1 1 0;