From 47bf604590a7c56f9d4f4536d705efc1b2a44da4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Oct 2024 11:57:49 -0400
Subject: [PATCH 1/2] fix grid gap

---
 apps/svelte.dev/src/routes/_home/Testimonials.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index 93779d4c1e..5ab55f86bb 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -71,7 +71,7 @@
 		margin: 4rem auto;
 		padding: 0 var(--sk-page-padding-side);
 		display: grid;
-		gap: 4rem;
+		row-gap: 4rem;
 		grid-template-areas:
 			'definition'
 			'blurb'
@@ -204,6 +204,7 @@
 			display: grid;
 			margin: 4em auto;
 			grid-template-columns: 1fr 1fr;
+			column-gap: 4rem;
 			grid-template-areas:
 				'definition definition'
 				'blurb      screenshots';

From 0a74cdf5e24c93c382578cba7ad3080776306e63 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 15 Oct 2024 12:25:45 -0400
Subject: [PATCH 2/2] shuffle some stuff around

---
 apps/svelte.dev/src/routes/+layout.svelte     |  4 ---
 .../src/lib/components/ThemeToggle.svelte     |  2 --
 packages/site-kit/src/lib/nav/Nav.svelte      | 32 ++++++++++++-------
 .../site-kit/src/lib/search/Search.svelte     |  1 -
 4 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte
index 9758434885..2dbe2b0bb2 100644
--- a/apps/svelte.dev/src/routes/+layout.svelte
+++ b/apps/svelte.dev/src/routes/+layout.svelte
@@ -85,10 +85,6 @@
 			padding: 0 0.5rem;
 			height: 100%;
 
-			:global(.dark) & {
-				opacity: 0.8;
-			}
-
 			/* visually hidden, but visible to screen readers */
 			span {
 				clip: rect(0 0 0 0);
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 325b8bcdf0..7882cd31c4 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -32,11 +32,9 @@
 <style>
 	button {
 		background-image: url($lib/icons/theme-light.svg);
-		margin-left: 1rem;
 
 		:global(.dark) & {
 			background-image: url($lib/icons/theme-dark.svg);
-			opacity: 0.8;
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 3ca38ced78..ba7f43677e 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -79,7 +79,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	{/if}
 
 	<div class="desktop">
-		<div class="menu">
+		<div class="links">
 			{#each links as link}
 				{#if link.sections?.[0].path}
 					<Dropdown>
@@ -122,7 +122,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		<div class="menu">
 			{@render search?.()}
 
-			{@render external_links?.()}
+			<div class="external-links">
+				{@render external_links?.()}
+			</div>
 
 			<ThemeToggle />
 		</div>
@@ -139,17 +141,12 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			<Icon name="search" size={16} />
 		</button>
 
+		<ThemeToggle />
+
 		<Menu bind:open={$nav_open} {links}>
 			<Separator />
 
 			{@render external_links?.()}
-
-			<Separator />
-
-			<div class="appearance">
-				<span class="caption">Theme</span>
-				<ThemeToggle />
-			</div>
 		</Menu>
 	</div>
 </nav>
@@ -199,12 +196,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
-	.menu {
-		position: relative;
+	.links {
 		display: flex;
 		width: 100%;
+		align-items: center;
 
-		/* :global { */
 		a {
 			color: var(--sk-text-2);
 			font: var(--sk-font-ui-medium);
@@ -236,6 +232,18 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
+	.menu {
+		position: relative;
+		display: flex;
+		width: 100%;
+		gap: 1rem;
+
+		.external-links {
+			display: flex;
+			height: 100%;
+		}
+	}
+
 	.home-link {
 		--padding-right: 1rem;
 		width: 11.2rem;
diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index 91671750a5..9dac8cd464 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -108,7 +108,6 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 	@media (min-width: 800px) {
 		.search-container {
 			width: 11rem;
-			margin: 0 2rem;
 		}
 
 		.shortcut {