Mobile styles (#402)

* fix grid gap

* shuffle some stuff around

Author: Rich-Harris

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);

apps/svelte.dev/src/routes/_home/Testimonials.svelte

@@ -46,7 +46,7 @@
 		margin: 4rem auto;
 		padding: 0 var(--sk-page-padding-side);
 		display: grid;
-		gap: 4rem;
+		row-gap: 4rem;
 		grid-template-areas:
 			'definition'
 			'blurb'
@@ -179,6 +179,7 @@
 			display: grid;
 			margin: 4em auto;
 			grid-template-columns: 1fr 1fr;
+			column-gap: 4rem;
 			grid-template-areas:
 				'definition definition'
 				'blurb      screenshots';

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>

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;

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 {