From b7907bc96f02f421d1514f9ea66662010512bfe5 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Thu, 16 Jan 2025 23:24:28 -0800
Subject: [PATCH] Add Stipe donations to the website and polish other pages

---
 README.md                                     |   8 +-
 website/content/_index.md                     |  18 +-
 website/content/donate.md                     | 206 +++++++++++++++---
 .../code-quality-guidelines.md                |   6 +-
 website/sass/base.scss                        |   2 +
 website/sass/component/carousel.scss          |   2 +-
 website/sass/component/feature-box.scss       |  12 +-
 website/sass/page/donate.scss                 | 125 +++++++----
 website/sass/page/index.scss                  |   4 +-
 website/sass/page/logo.scss                   |   2 +-
 website/sass/page/volunteer.scss              |   4 +-
 website/static/js/video-autoplay.js           |   3 +-
 12 files changed, 288 insertions(+), 104 deletions(-)

diff --git a/README.md b/README.md
index cafafe2e8e..554d7cd85a 100644
--- a/README.md
+++ b/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
 
diff --git a/website/content/_index.md b/website/content/_index.md
index 3ca4e6b540..9d55dc0cc6 100644
--- a/website/content/_index.md
+++ b/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>
diff --git a/website/content/donate.md b/website/content/donate.md
index 6885ae339f..cf376ec7a1 100644
--- a/website/content/donate.md
+++ b/website/content/donate.md
@@ -2,7 +2,7 @@
 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"]
 +++
@@ -10,37 +10,193 @@ title = "Donate"
 <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 />
-
-(Additionally, boosting the [Graphite Discord server](https://discord.graphite.rs) is helpful if you already have spare Nitro boosts.)
+*Live donation statistics are coming soon.*
 
 </div>
 </section>
 
-<!-- <section id="fundraising" class="feature-box-outer">
+<section id="github-sponsors" class="feature-box-outer">
 <div class="feature-box-inner">
-<div>
 
 <div class="block">
 
-# Support the mission
+<h1 class="feature-box-header">Donate without fees</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:
+To ensure **100% of your contribution benefits Graphite**, or to pick a **custom** monthly donation, please support through **GitHub Sponsors**:
 
-<div class="fundraising loading" data-fundraising>
+<a href="https://github.com/sponsors/GraphiteEditor" target="_blank" class="button arrow">Sponsor through GitHub</a>
+
+</div>
+
+</div>
+</section>
+
+<section id="supporter-memberships" class="feature-box-outer">
+<div class="feature-box-inner">
+
+<div class="block">
+
+<h1 class="feature-box-header">Supporter memberships</h1>
+
+---
+
+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>
+<div class="block manage-membership">
+
+[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
+
+</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>
+
+<div class="block manage-membership">
+
+[Manage your ongoing membership](https://billing.stripe.com/p/login/aEU9EzctSfe3cfK5kk)
+
+</div>
+
+</div>
+</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>
@@ -48,18 +204,4 @@ Graphite is built by a small, dedicated crew of volunteers in need of resources
 		<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>
-
-[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.
-
-<a href="https://github.com/sponsors/GraphiteEditor" class="button arrow">Donate</a>
-
-</div>
-
-<div class="graphic">
-	<a href="https://github.com/sponsors/GraphiteEditor"><img src="https://files.keavon.com/-/OtherDroopyBoto/Spring_Heart.png" /></a>
-</div>
-
-</div>
-</div>
-</section> -->
+</div> -->
diff --git a/website/content/volunteer/guide/starting-a-task/code-quality-guidelines.md b/website/content/volunteer/guide/starting-a-task/code-quality-guidelines.md
index 749f3e3490..b64dc2b00f 100644
--- a/website/content/volunteer/guide/starting-a-task/code-quality-guidelines.md
+++ b/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
 
diff --git a/website/sass/base.scss b/website/sass/base.scss
index 564c487307..ed8cb5117a 100644
--- a/website/sass/base.scss
+++ b/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,
diff --git a/website/sass/component/carousel.scss b/website/sass/component/carousel.scss
index 6bf3e950e4..78f18cba00 100644
--- a/website/sass/component/carousel.scss
+++ b/website/sass/component/carousel.scss
@@ -1,4 +1,4 @@
-.carousel {
+.carousel.carousel {
 	margin-top: calc(80 * var(--variable-px));
 	transform: translate(0);
 
diff --git a/website/sass/component/feature-box.scss b/website/sass/component/feature-box.scss
index 3c84a85b56..e81d840406 100644
--- a/website/sass/component/feature-box.scss
+++ b/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;
diff --git a/website/sass/page/donate.scss b/website/sass/page/donate.scss
index 4192d8ca9b..6dda5a1501 100644
--- a/website/sass/page/donate.scss
+++ b/website/sass/page/donate.scss
@@ -1,51 +1,90 @@
-// #fundraising {
-// 	background-color: var(--color-seaside);
-// 	color: rgba(0, 0, 0, 0.9);
+.triptych.triptych,
+.triptych.triptych + .triptych.triptych {
+	gap: 10px;
+	margin-top: 10px;
+}
 
-// 	.graphic {
-// 		max-width: 400px;
+.feature-box-narrow.feature-box-narrow.feature-box-narrow {
+	min-width: 0;
+	background-color: var(--color-fog);
+	padding: calc(var(--feature-box-padding) / 2 * var(--variable-px));
+	text-decoration: none;
+	color: var(--color-navy);
+
+	h1 {
+		// Compensates for emoji starting with some left spacing
+		text-indent: -0.2em;
+	}
+
+	ul {
+		padding-left: 1em;
+		font-size: calc(7 / 9 * 1em);
+	}
+}
+
+.feature-box-outer + .feature-box-outer {
+	margin-top: 0;
+}
+
+#supporter-memberships,
+#corporate-sponsorships {
+	background-color: var(--color-mustard);
+
+	.manage-membership,
+	.one-time-donation,
+	.feature-box-inner > .block + .block,
+	.feature-box-inner > .block + .triptych {
+		margin-top: calc(var(--feature-box-padding) / 2 * var(--variable-px));
+	}
+}
+
+#supporter-memberships {
+	background-color: var(--color-mustard);
+}
+
+#corporate-sponsorships {
+	background-color: var(--color-ale);
+}
+
+// .fundraising {
+// 	margin-top: 20px;
+// 	width: 100%;
+	
+// 	.fundraising-bar {
+// 		width: 100%;
+// 		height: 32px;
+// 		border-radius: 10000px;
+// 		background: var(--color-fog);
+// 		overflow: hidden;
+		
+// 		.fundraising-bar-progress {
+// 			width: calc(var(--fundraising-percent) - (4px * 2) - (32px - 4px * 2));
+// 			padding-left: calc(32px - 4px * 2);
+// 			height: calc(100% - 4px * 2);
+// 			margin: 4px;
+// 			border-radius: 10000px;
+// 			background: linear-gradient(to right, var(--color-navy), var(--color-crimson));
+// 			transition: opacity 1s, width 2s;
+// 		}
 // 	}
 
-// 	.fundraising {
-// 		margin-top: 20px;
-// 		width: 100%;
-		
-// 		.fundraising-bar {
-// 			width: 100%;
-// 			height: 32px;
-// 			border-radius: 10000px;
-// 			background: var(--color-fog);
-// 			overflow: hidden;
-			
-// 			.fundraising-bar-progress {
-// 				width: calc(var(--fundraising-percent) - (4px * 2) - (32px - 4px * 2));
-// 				padding-left: calc(32px - 4px * 2);
-// 				height: calc(100% - 4px * 2);
-// 				margin: 4px;
-// 				border-radius: 10000px;
-// 				background: linear-gradient(to right, var(--color-navy), var(--color-crimson));
-// 				transition: opacity 1s, width 2s;
-// 			}
+// 	.goal-metrics {
+// 		display: flex;
+// 		justify-content: space-between;
+// 		font-weight: 800;
+// 		margin-top: 8px;
+// 		margin-left: 20px;
+// 		width: calc(100% - 40px);
+
+// 		> span {
+// 			transition: opacity 1s;
 // 		}
+// 	}
 
-// 		.goal-metrics {
-// 			display: flex;
-// 			justify-content: space-between;
-// 			font-weight: 800;
-// 			margin-top: 8px;
-// 			margin-left: 20px;
-// 			width: calc(100% - 40px);
-
-// 			> span {
-// 				transition: opacity 1s;
-// 			}
-// 		}
-
-// 		&.fundraising.loading {
-// 			.goal-metrics > span,
-// 			.fundraising-bar .fundraising-bar-progress {
-// 				opacity: 0;
-// 			}
+// 	&.fundraising.loading {
+// 		.goal-metrics > span,
+// 		.fundraising-bar .fundraising-bar-progress {
+// 			opacity: 0;
 // 		}
 // 	}
 // }
diff --git a/website/sass/page/index.scss b/website/sass/page/index.scss
index 80a70d7466..0997758b86 100644
--- a/website/sass/page/index.scss
+++ b/website/sass/page/index.scss
@@ -8,7 +8,7 @@
 #logo {
 	img {
 		width: auto;
-		max-width: 100%;
+		max-width: 75%;
 		max-height: 160px;
 	}
 }
@@ -165,7 +165,7 @@
 		}
 
 		.description {
-			margin: calc(80 * var(--variable-px));
+			margin: calc(var(--feature-box-padding) * var(--variable-px));
 		}
 
 		+ .diptych {
diff --git a/website/sass/page/logo.scss b/website/sass/page/logo.scss
index b68ae2ab06..9412d5a15e 100644
--- a/website/sass/page/logo.scss
+++ b/website/sass/page/logo.scss
@@ -36,7 +36,7 @@
 			flex-direction: column;
 
 			img {
-				max-width: calc(100vw - 2 * 80 * var(--variable-px));
+				max-width: calc(100vw - 2 * var(--feature-box-padding) * var(--variable-px));
 			}
 
 			span {
diff --git a/website/sass/page/volunteer.scss b/website/sass/page/volunteer.scss
index ad413b223f..1bb628a454 100644
--- a/website/sass/page/volunteer.scss
+++ b/website/sass/page/volunteer.scss
@@ -1,5 +1,5 @@
-.diptych {
-	gap: 0 calc(80 * var(--variable-px));
+.diptych.diptych {
+	gap: 0 calc(var(--feature-box-padding) * var(--variable-px));
 
 	.feature-box-narrow {
 		margin-top: calc(40 * var(--variable-px));
diff --git a/website/static/js/video-autoplay.js b/website/static/js/video-autoplay.js
index f7a0445319..bef2650814 100644
--- a/website/static/js/video-autoplay.js
+++ b/website/static/js/video-autoplay.js
@@ -10,7 +10,8 @@ window.addEventListener("DOMContentLoaded", () => {
 		new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
-					player.play();
+					player.removeAttribute("preload");
+					player.setAttribute("autoplay", "");
 
 					loaded = true;
 				};