Add videos to the website home page and features page

Keavon · Keavon · commit d7fbbac95eba · 2025-06-30T10:04:37.000-07:00
diff --git a/website/content/_index.md b/website/content/_index.md
@@ -164,9 +164,23 @@ meta_description = "Open source free software. A vector graphics creativity suit
 
 ---
 
-<!-- As a new entrant to the open source digital content creation landscape, Graphite has a unique formula for success: -->
+<div class="diptych sizzle-video">
+<div class="block text">
 
-Starting life as a vector editor, Graphite is evolving into a generalized, all-in-one graphics toolbox that's built more like a game engine than a conventional creative app. The editor's tools wrap its node graph core, providing user-friendly workflows for vector, raster, and beyond.
+Starting life as a vector editor, Graphite is evolving into a generalized, all-in-one graphics toolbox that's built more like a game engine than a conventional creative app. The editor's tools wrap its node graph core, providing user-friendly workflows for vector, raster, animation, and beyond.
+
+<a href="https://editor.graphite.rs" class="button arrow">Start creating</a>
+
+</div>
+<div class="block video">
+
+<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play preload="none" poster="https://static.graphite.rs/content/index/sizzle-compilation-poster.avif">
+	<source src="https://static.graphite.rs/content/index/sizzle-compilation.webm" type="video/webm" />
+	<source src="https://static.graphite.rs/content/index/sizzle-compilation.mp4" type="video/mp4" />
+</video>
+
+</div>
+</div>
 
 </div>
 <div class="block workflows">
@@ -276,7 +290,23 @@ Once it's ready to shine, Graphite's code architecture is structured to deliver
 </div>
 </section>
 <!-- ▙ OVERVIEW ▟ -->
-<!--                  -->
+<!--              -->
+<!-- ▛ DONATE ▜ -->
+<section id="donate" class="block">
+
+<div class="block">
+
+<h2 class="heart">Support the mission</h2>
+
+Free software doesn't grow on trees! Chip in your share of the (very real) development costs so you're not leaving others to pick up the tab. Becoming a member (or giving a one-time donation) lets you help maintain Graphite's sustainability and independence.
+
+<a href="/donate" class="button arrow">Become a member</a>
+
+</div>
+
+</section>
+<!-- ▙ DONATE ▟ -->
+<!--                 -->
 <!-- ▛ PROCEDURALISM ▜ -->
 <section id="proceduralism" class="feature-box-outer">
 <div class="feature-box-inner">
@@ -363,23 +393,7 @@ Graphite's representation of artwork as a node graph lets you customize, compose
 </div>
 </section>
 <!-- ▙ PROCEDURALISM ▟ -->
-<!--                 -->
-<!-- ▛ DONATE ▜ -->
-<section id="donate" class="block">
-
-<div class="block">
-
-## Support the mission
-
-Free software doesn't grow on trees! Chip in your share of the (very real) development costs so you're not leaving others to pick up the tab. Becoming a member (or giving a one-time donation) lets you help maintain Graphite's sustainability and independence.
-
-<a href="/donate" class="button arrow">Become a member</a>
-
-</div>
-
-</section>
-<!-- ▙ DONATE ▟ -->
-<!--                -->
+<!--                   -->
 <!-- ▛ NEWSLETTER ▜ -->
 <section id="newsletter" class="feature-box-narrow">
 <div id="newsletter-success"><!-- Used only as a URL hash fragment anchor --></div>
diff --git a/website/content/features.md b/website/content/features.md
@@ -2,7 +2,8 @@
 title = "Graphite features"
 
 [extra]
-css = ["/page/features.css", "/component/feature-box.css", "/component/feature-icons.css"]
+css = ["/page/features.css", "/component/feature-box.css", "/component/feature-icons.css", "/component/youtube-embed.css"]
+js = ["/js/youtube-embed.js"]
 +++
 
 <section>
@@ -17,6 +18,20 @@ In 2025, stay tuned for performance improvements, native multiplatform desktop a
 </div>
 </section>
 
+<section>
+<div class="block">
+
+<div class="block video-container">
+<div>
+<div class="youtube-embed aspect-16x9">
+	<img data-youtube-embed="ZUbcwUC5lxA" loading="lazy" src="https://static.graphite.rs/content/features/podcast-interview-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Rust-Powered Graphics Editor: How Graphite's Syntax Trees Revolutionize Image Editing" />
+</div>
+</div>
+</div>
+
+</div>
+</section>
+
 <section>
 
 <div class="diptych">
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
@@ -35,7 +35,9 @@ Comments should usually be placed on a separate line above the code they are ref
 
 ## Blank lines
 
-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.
+Please make a habit of grouping together related lines of code in blocks separated by blank lines. These are like your paragraphs if you were writing a novel — they greatly aid readability and your copy editor would have significant concerns with your writing if they were absent.
+
+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
@@ -151,19 +151,6 @@ body > .page {
 					.heart.heart {
 						// The same color is also used below in the SVG after the `%23` (URL-encoded `#`)
 						color: #cc304f;
-
-						&::after {
-							content: "";
-							background-image: url('data:image/svg+xml;utf8,\
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,15C5.12471,9.753694 0.5,8.795225 0.5,4.736524 C0.5,-0.507473 7.468734,0 8,4.967381 C8.531266,0 15.5,-0.507473 15.5,4.736524 C15.5,8.795225 10.87529,9.753694 8,15z" fill="%23cc304f" /></svg>\
-								');
-							display: inline-block;
-							width: 0.75em;
-							height: 0.75em;
-							margin-left: 0.25em;
-							margin-bottom: -0.1em;
-							vertical-align: baseline;
-						}
 					}
 
 					@media screen and (max-width: 1200px) {
@@ -683,6 +670,19 @@ hr,
 	}
 }
 
+.heart::after {
+	content: "";
+	background-image: url('data:image/svg+xml;utf8,\
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,15C5.12471,9.753694 0.5,8.795225 0.5,4.736524 C0.5,-0.507473 7.468734,0 8,4.967381 C8.531266,0 15.5,-0.507473 15.5,4.736524 C15.5,8.795225 10.87529,9.753694 8,15z" fill="%23cc304f" /></svg>\
+		');
+	display: inline-block;
+	width: 0.75em;
+	height: 0.75em;
+	margin-left: 0.25em;
+	margin-bottom: -0.1em;
+	vertical-align: baseline;
+}
+
 // blockquote {
 // 	padding: 32px 80px;
 // 	background: rgba(0, 0, 0, 0.0625);
diff --git a/website/sass/page/features.scss b/website/sass/page/features.scss
@@ -1,3 +1,13 @@
+.video-container {
+	background: var(--color-fog);
+
+	> div {
+		margin: calc(20 * var(--variable-px)) auto;
+		width: 100%;
+		max-width: 800px;
+	}
+}
+
 #roadmap {
 	width: 100%;
 	text-align: center;
diff --git a/website/sass/page/index.scss b/website/sass/page/index.scss
@@ -18,24 +18,25 @@
 #tagline {
 	h1 {
 		span {
-		position: relative;
-
-		&::after {
-			content: "";
-			pointer-events: none;
-			position: absolute;
-			left: 0;
-			right: 0;
-			top: 100%;
-			// Dimensions: 480x40
-			height: 100%;
-			margin-top: -0.2em;
-			background: url("https://static.graphite.rs/textures/text-sketch-underline.png");
-			background-repeat: no-repeat;
-			background-size: contain;
+			position: relative;
+
+			&::after {
+				content: "";
+				pointer-events: none;
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 100%;
+				// Dimensions: 480x40
+				height: 100%;
+				margin-top: -0.2em;
+				background: url("https://static.graphite.rs/textures/text-sketch-underline.png");
+				background-repeat: no-repeat;
+				background-size: contain;
+			}
 		}
-	}}
-	
+	}
+
 	p {
 		font-size: 1.2rem;
 
@@ -112,15 +113,61 @@
 // ▛ OVERVIEW ▜
 #overview {
 	background-color: var(--color-cloud);
+
+	.sizzle-video {
+		display: flex;
+		flex-wrap: nowrap;
+		max-width: 100%;
+
+		.block {
+			min-width: 0;
+			flex-direction: row;
+
+			&.text {
+				flex: 1 4 100%;
+				flex-direction: column;
+
+				p:has(.button) {
+					margin-top: 20px;
+				}
+			}
+
+			&.video {
+				flex: 0 1 fit-content;
+			}
+		}
+
+		@media screen and (max-width: 900px) {
+			flex-wrap: wrap;
+
+			.block.video {
+				flex: 1 1 100%;
+				justify-content: center;
+			}
+		}
+
+		@media screen and (max-width: 1100px) {
+			p:has(.button) {
+				display: none;
+			}
+		}
+	}
 }
 // ▙ OVERVIEW ▟
 
+// ▛ DONATE ▜
+#donate {
+	h2 {
+		color: #cc304f;
+	}
+}
+// ▙ DONATE ▟
+
 // ▛ PROCEDURALISM ▜
 #proceduralism {
 	background-color: var(--color-slate);
 	color: white;
-	margin-top: 0;
-	
+
 	.diptych {
 		background: black;
 		color: var(--color-fog);
@@ -183,9 +230,6 @@
 }
 // ▙ PROCEDURALISM ▟
 
-// ▛ DONATE ▜
-// ▙ DONATE ▟
-
 // ▛ NEWSLETTER ▜
 #newsletter {
 	background-color: var(--color-peach);
@@ -355,7 +399,7 @@
 			margin: calc(20 * var(--variable-px)) auto;
 			width: 100%;
 			max-width: 800px;
-	
+
 			+ p {
 				margin-top: 0;
 			}
@@ -377,7 +421,7 @@
 // ▛ RECENT NEWS ▜
 #recent-news {
 	background-color: var(--color-parchment);
-	
+
 	.banner img {
 		width: 100%;
 		height: auto;
