From 4854008a79a57061a71f6d261818ff17711c86d2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 22 Oct 2024 10:18:21 -0400
Subject: [PATCH] use an svg for the pronunciation guide

---
 .../src/routes/_home/Testimonials.svelte      | 33 ++++++++++++-------
 .../src/routes/_home/svelte-pronunciation.svg |  1 +
 2 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 apps/svelte.dev/src/routes/_home/svelte-pronunciation.svg

diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index 93496891c4..daaa2ec015 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -1,6 +1,11 @@
 <div class="outer">
 	<p class="definition">
-		<em>/ˈsvɛlt/</em>
+		<enhanced:img
+			class="pronunciation"
+			alt="Svelte pronunciation guide"
+			src="./svelte-pronunciation.svg"
+		/>
+
 		<span class="description">
 			<span class="adjective"></span> attractively thin, graceful and stylish
 		</span>
@@ -23,18 +28,23 @@
 	<div class="screenshots">
 		<a href="https://survey.stackoverflow.co/2024/technology#2-web-frameworks-and-technologies">
 			<enhanced:img
+				class="screenshot"
 				alt="Stack Overflow 2024 Developer Survey"
 				src="./stack-overflow.png?w=1200,1600"
 			></enhanced:img>
 		</a>
 
 		<a href="https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/">
-			<enhanced:img alt="State of JavaScript 2023" src="./state-of-js-chart.png?w=1000,1400"
+			<enhanced:img
+				class="screenshot"
+				alt="State of JavaScript 2023"
+				src="./state-of-js-chart.png?w=1000,1400"
 			></enhanced:img>
 		</a>
 
 		<a href="https://x.com/flaviocopes/status/1730895911864189299">
-			<enhanced:img alt="Tweet from @flaviocopes" src="./flavio-light.png?w=800"></enhanced:img>
+			<enhanced:img class="screenshot" alt="Tweet from @flaviocopes" src="./flavio-light.png?w=800"
+			></enhanced:img>
 		</a>
 	</div>
 </div>
@@ -57,6 +67,13 @@
 		grid-area: definition;
 	}
 
+	.pronunciation {
+		position: relative;
+		aspect-ratio: 457.4 / 138.8;
+		height: var(--sk-font-size-h1);
+		bottom: -0.3em;
+	}
+
 	.blurb {
 		grid-area: blurb;
 	}
@@ -104,7 +121,7 @@
 			}
 		}
 
-		img {
+		.screenshot {
 			width: 100%;
 			height: auto;
 			object-fit: contain;
@@ -128,14 +145,6 @@
 		grid-column: 1 / 3;
 		width: 100%;
 
-		em {
-			font-style: normal;
-			font-size: var(--sk-font-size-h1);
-			color: var(--sk-theme-1);
-			text-wrap: nowrap;
-			line-height: 1;
-		}
-
 		.description {
 			position: relative;
 			font: var(--sk-font-ui-medium);
diff --git a/apps/svelte.dev/src/routes/_home/svelte-pronunciation.svg b/apps/svelte.dev/src/routes/_home/svelte-pronunciation.svg
new file mode 100644
index 0000000000..41e6bedd24
--- /dev/null
+++ b/apps/svelte.dev/src/routes/_home/svelte-pronunciation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.4 138.8"><path fill="hsl(12, 93%, 43%)" d="M6.4 135.4c-1.2 0-2-.3-2.5-.8s-.6-1.1-.3-1.8L55 12.6c.6-1.3 1.5-2.1 2.7-2.4 1.2-.3 2.6-.5 4.1-.5s1.9.3 2.2.9c.3.6.3 1.3 0 2.1L12.6 132.9c-.5 1.2-1.3 1.9-2.5 2.2-1.2.3-2.5.4-3.7.4ZM83.7 38.2c-.7 0-1.2-.3-1.6-1-.4-.7-.6-1.4-.6-2.2V6.4c0-.5.5-1 1.5-1.6 1-.6 2.1-1.2 3.3-1.6 1.2-.5 2-.7 2.5-.7.7 0 1.2.3 1.6.9.4.6.6 1.2.6 1.9V34c0 .6-.8 1.4-2.4 2.6-1.6 1.2-3.2 1.7-4.8 1.7ZM128.5 127.1c-3.6 0-6.9-.5-10-1.6-3.1-1.1-5.8-2.6-8-4.6-.6-1.3-1-3.4-1.3-6.4-.3-3-.5-5.5-.6-7.4 0-1 .7-1.6 2.2-1.6s.9 0 1.3.3c.4.2.7.5.8 1 1.5 5.7 3.9 9.7 7.2 12.1 3.3 2.4 6.6 3.6 9.9 3.6s6.2-1.1 8.6-3.4c2.4-2.2 3.5-5 3.5-8.4s-1-5.8-3.1-8-5.7-5-10.9-8.2c-3.9-2.4-7.1-4.7-9.5-6.9-2.4-2.2-4.2-4.4-5.3-6.7-1.1-2.3-1.6-4.9-1.6-7.8s.9-7 2.6-10c1.7-3 4.3-5.4 7.8-7.2 3.5-1.8 7.8-2.7 13-2.7s6.3.3 8.6 1 4 1.4 5.2 2.2c.9 1.3 1.7 3.3 2.3 6 .6 2.7 1 5.3 1 7.7s-.6 1.2-1.7 1.2-1.4-.1-2-.4c-.6-.3-1.1-.7-1.3-1.1-1.5-3.8-3.4-6.7-5.6-8.7-2.2-2-5-3-8.4-3s-5.4.9-7.7 2.6-3.4 4.3-3.4 7.6.8 5 2.5 7.1c1.7 2.1 4.8 4.4 9.4 7.1 6.7 3.8 11.7 7.4 15 10.6 3.3 3.3 4.9 7.6 4.9 13.1s-2.4 11.3-7.1 15.2c-4.7 3.9-10.8 5.9-18.3 5.9ZM196.5 128.4c-.5 0-1-.9-1.7-2.7-.7-1.8-1.2-3.1-1.4-3.9-.8-2-1.6-4-2.2-6.1-.7-2.1-1.4-4.1-2.1-6-2.5-7.1-5.3-14.2-8.2-21-2.9-6.9-5.8-13.8-8.6-20.8-.8-2.1-2-3.9-3.7-5.6-1.7-1.7-3.4-2.7-5.1-3.2-.9-.3-1.7-.7-2.2-1-.6-.3-.9-.9-.9-1.7s.4-1.1 1.3-1.3c.9-.2 1.6-.3 2.2-.3 2.3 0 4 0 5 .2 1 .1 2.1.3 3.1.4 1 .2 2.5.3 4.5.3s3.6 0 4.7-.3c1-.2 2.1-.3 3.3-.4 1.2-.1 2.8-.2 5-.2s1.3 0 2.2.3c.9.2 1.3.6 1.3 1.3s-.4 1.4-1.2 1.9c-.8.5-1.7.9-2.8 1.2-1.2.5-2 1.4-2.6 2.7-.6 1.3-.9 2.8-.9 4.4s0 1.6.2 2.4c.1.8.3 1.6.5 2.2l13.7 36.3c.1.1.2.2.3.2s.1 0 .3-.2l13.1-33.7c.5-1.2.8-2.4 1-3.7.2-1.3.3-2.4.3-3.4 0-2.3-.3-3.9-1-4.9-.7-1-1.8-1.8-3.5-2.3-1.5-.6-2.5-1-3.1-1.4-.6-.3-.9-.9-.9-1.7s.4-1.1 1.1-1.3c.7-.2 1.5-.3 2.3-.3 1.3 0 2.9.1 5 .4 2.1.3 4.6.4 7.6.4s5-.1 6.1-.4c1.1-.3 2.4-.4 4.1-.4s1.7 0 2.4.3 1 .6 1 1.3c0 1.3-1.3 2.3-4 3.1-1.7.5-3.6 1.8-5.7 4s-3.7 4.7-5 7.6l-13.5 32.5c-.2.5-.7 1.6-1.4 3.4-.7 1.8-1.4 3.7-2.2 5.9-.8 2.1-1.8 4.8-2.9 7.9-.9 2.2-1.7 3.9-2.2 5.1-.6 1.2-1.1 2.1-1.6 2.7h-1ZM258.1 127.1c-3.9 0-7.5-.8-10.8-2.5-3.3-1.7-6-4-8-7-2.1-3-3.1-6.4-3.1-10.2s1.2-8.1 3.5-11.2c2.4-3.1 5.5-5.5 9.4-7.3.8-.3 1.2-.6 1.1-.9 0-.2-.4-.5-1.1-.7-3-1.3-5.3-3.1-7-5.4-1.7-2.3-2.5-5.1-2.5-8.3s1.2-7.9 3.6-11c2.4-3.1 5.5-5.4 9.3-7.1 3.8-1.7 7.8-2.5 11.9-2.5s6.1.5 8.9 1.5c2.8 1 5.1 2.3 6.9 3.9 1.8 1.6 2.7 3.4 2.7 5.4s-.3 1.2-.9 2c-.6.8-1.3 1.4-2.2 1.9-.9.5-1.8.8-2.8.8s-1.6-.5-2.3-1.4c-.8-.9-1.6-2-2.7-3.1-1.2-1.4-2.5-2.7-4.2-4-1.6-1.3-3.7-1.9-6.2-1.9s-5.7 1.2-7.8 3.6c-2.1 2.4-3.1 5.2-3.1 8.3s1 6.7 2.9 9.3c2 2.7 4.9 4 8.8 4s3.1-.2 4.5-.7c1.4-.5 2.7-.7 3.8-.7s2 .3 2.6.8c.6.5.9 1.4.9 2.5 0 1.8-.6 3.4-1.9 4.6-1.3 1.2-2.8 1.8-4.5 1.8s-3.3-.2-4.2-.5c-1-.3-2.1-.5-3.4-.5-3.2 0-5.9 1.2-8.1 3.5-2.2 2.4-3.3 5.2-3.3 8.6s1.5 7.8 4.5 10.4c3 2.5 6.7 3.8 11.1 3.8s5.2-.6 8.6-1.7c3.5-1.2 6.3-3.2 8.5-6.1.2-.2.5-.5 1-.8.4-.3.7-.4 1-.4.8 0 1.2.7 1.2 2.1s-.2 1.8-.7 2.8c-.5.9-.9 1.7-1.2 2.2-1.3 1.8-3.1 3.7-5.6 5.6-2.5 1.9-5.3 3.5-8.6 4.7-3.2 1.2-6.7 1.8-10.6 1.8ZM299.3 125.2c-.6 0-1.3 0-2.2-.3-.9-.2-1.3-.6-1.3-1.3s.4-1.6 1.3-2c.9-.4 1.8-.8 2.7-1.1 1.7-.6 3.4-1.2 5-2 1.6-.7 2.4-2.3 2.4-4.6V26.8c0-3.3-.6-6.1-1.8-8.4s-3.3-3.7-6.1-4.2c-.9-.2-1.4-1-1.4-2.2s.4-1.8 1.2-2.1c3-.7 5.6-1.4 7.8-2.2 2.2-.7 4.2-1.5 6.1-2.3 1.9-.8 3.8-1.6 5.6-2.2.5-.2.8-.3 1-.3s.4.1.6.4c.2.3.3.5.3.8 0 1-.2 3.3-.6 6.7-.4 3.4-.6 9-.6 16.9v86.5c0 2.3.8 3.8 2.4 4.6 1.6.8 3.3 1.4 5 2 .9.3 1.8.7 2.7 1.1.9.4 1.3 1.1 1.3 2s-.4 1.1-1.3 1.3-1.6.3-2.2.3c-2.2 0-4 0-5.3-.3-1.3-.2-2.6-.3-3.8-.4-1.2-.1-2.9-.2-4.9-.2s-3.6 0-4.8.2c-1.3.1-2.5.3-3.8.4-1.3.2-3.1.3-5.4.3ZM366.7 127.1c-5.7 0-10.1-1.7-13.2-5.2-3.2-3.5-4.8-8.6-4.8-15.4V66.4c0-.9-.3-1.6-1-2-.7-.4-2.2-.6-4.5-.6h-1c-.6 0-1.1-.4-1.5-1.1-.4-.7-.6-1.5-.6-2.3s.2-.6.5-1c.3-.5.6-.7.7-.9 2.3-1.6 4.4-3.2 6.3-4.8 1.9-1.6 3.6-3.2 5.2-4.8 1.6-1.6 2.9-3 3.9-4.2l1.5-1.5c.4-.4.9-.6 1.5-.6s1.1.1 1.6.3c.5.2.7.8.6 1.6l-.9 7.8c-.1 1.3.2 2.1.9 2.6s1.8.7 3.3.7h19.7c.5 0 .9.4 1.2 1.1.3.8.5 1.6.5 2.7s-.2 2-.5 3-.8 1.5-1.2 1.5h-17.1c-2.9 0-4.8.2-5.6.7-.9.5-1.3 1.8-1.3 4.2v34.1c0 4.6 1 8.2 2.9 10.9 2 2.7 4.8 4 8.5 4s5.9-.3 7.8-.8c1.8-.5 3.5-1.3 5-2.3.2-.2.5-.3.7-.3.5 0 .8.3 1 .8.2.5.3 1.1.3 1.6s-1 1.7-2.9 3.5c-1.9 1.7-4.4 3.3-7.4 4.8-3.1 1.5-6.4 2.2-9.9 2.2ZM394.8 135.4c-1.2 0-2-.3-2.5-.8s-.6-1.1-.3-1.8l51.4-120.2c.6-1.3 1.5-2.1 2.7-2.4 1.2-.3 2.6-.5 4.1-.5s1.9.3 2.2.9c.3.6.3 1.3 0 2.1L401 132.9c-.5 1.2-1.3 1.9-2.5 2.2-1.2.3-2.5.4-3.7.4Z" class="cls-1"/></svg>