Split nav

apps/svelte.dev/src/routes/+layout.svelte

@@ -31,14 +31,12 @@
 			{/snippet}
 
 			{#snippet external_links()}
-				<a href="/chat" title="Discord Chat">
-					<span class="small">Discord</span>
-					<span class="large"><Icon name="discord" /></span>
+				<a href="/chat" data-icon="discord" title="Discord Chat">
+					<span>Discord</span>
 				</a>
 
-				<a href="https://github.com/sveltejs/svelte" title="GitHub Repo">
-					<span class="small">GitHub</span>
-					<span class="large"><Icon name="github" /></span>
+				<a href="https://github.com/sveltejs/svelte" data-icon="github" title="GitHub Repo">
+					<span>GitHub</span>
 				</a>
 			{/snippet}
 		</Nav>
@@ -66,4 +64,46 @@
 		height: 100%;
 		width: 100%;
 	}
+
+	@media (min-width: 800px) {
+		[data-icon] {
+			background: no-repeat 50% 50%;
+			background-size: calc(100% - 1rem) auto;
+			padding: 0 0.5rem;
+			opacity: 0.6;
+
+			:global(.dark) & {
+				opacity: 0.8;
+			}
+
+			/* visually hidden, but visible to screen readers */
+			span {
+				clip: rect(0 0 0 0);
+				clip-path: inset(50%);
+				height: 1px;
+				overflow: hidden;
+				position: absolute;
+				white-space: nowrap;
+				width: 1px;
+			}
+		}
+
+		[data-icon='discord'] {
+			width: 3.4rem;
+			background-image: url($lib/icons/discord-black.svg);
+
+			:global(.dark) & {
+				background-image: url($lib/icons/discord-white.svg);
+			}
+		}
+
+		[data-icon='github'] {
+			width: 3rem;
+			background-image: url($lib/icons/github-black.svg);
+
+			:global(.dark) & {
+				background-image: url($lib/icons/github-white.svg);
+			}
+		}
+	}
 </style>

packages/site-kit/src/lib/components/Icons.svelte

@@ -51,20 +51,6 @@ Provides a list of svg icons that can be referenced through the `Icon` component
 			<polygon points="18 2 22 6 12 16 8 16 8 12 18 2" />
 		</symbol>
 
-		<symbol viewBox="0 0 24 24" id="github" stroke-width="0">
-			<path
-				fill="currentColor"
-				d="M12 0a12 12 0 1 0 0 24a12 12 0 0 0 0-24zm3.163 21.783h-.093a.513.513 0 0 1-.382-.14a.513.513 0 0 1-.14-.372v-1.406c.006-.467.01-.94.01-1.416a3.693 3.693 0 0 0-.151-1.028a1.832 1.832 0 0 0-.542-.875a8.014 8.014 0 0 0 2.038-.471a4.051 4.051 0 0 0 1.466-.964c.407-.427.71-.943.885-1.506a6.77 6.77 0 0 0 .3-2.13a4.138 4.138 0 0 0-.26-1.476a3.892 3.892 0 0 0-.795-1.284a2.81 2.81 0 0 0 .162-.582c.033-.2.05-.402.05-.604c0-.26-.03-.52-.09-.773a5.309 5.309 0 0 0-.221-.763a.293.293 0 0 0-.111-.02h-.11c-.23.002-.456.04-.674.111a5.34 5.34 0 0 0-.703.26a6.503 6.503 0 0 0-.661.343c-.215.127-.405.249-.573.362a9.578 9.578 0 0 0-5.143 0a13.507 13.507 0 0 0-.572-.362a6.022 6.022 0 0 0-.672-.342a4.516 4.516 0 0 0-.705-.261a2.203 2.203 0 0 0-.662-.111h-.11a.29.29 0 0 0-.11.02a5.844 5.844 0 0 0-.23.763c-.054.254-.08.513-.081.773c0 .202.017.404.051.604c.033.199.086.394.16.582A3.888 3.888 0 0 0 5.702 10a4.142 4.142 0 0 0-.263 1.476a6.871 6.871 0 0 0 .292 2.12c.181.563.483 1.08.884 1.516c.415.422.915.75 1.466.964c.653.25 1.337.41 2.033.476a1.828 1.828 0 0 0-.452.633a2.99 2.99 0 0 0-.2.744a2.754 2.754 0 0 1-1.175.27a1.788 1.788 0 0 1-1.065-.3a2.904 2.904 0 0 1-.752-.824a3.1 3.1 0 0 0-.292-.382a2.693 2.693 0 0 0-.372-.343a1.841 1.841 0 0 0-.432-.24a1.2 1.2 0 0 0-.481-.101c-.04.001-.08.005-.12.01a.649.649 0 0 0-.162.02a.408.408 0 0 0-.13.06a.116.116 0 0 0-.06.1a.33.33 0 0 0 .14.242c.093.074.17.131.232.171l.03.021c.133.103.261.214.382.333c.112.098.213.209.3.33c.09.119.168.246.231.381c.073.134.15.288.231.463c.188.474.522.875.954 1.145c.453.243.961.364 1.476.351c.174 0 .349-.01.522-.03c.172-.028.343-.057.515-.091v1.743a.5.5 0 0 1-.533.521h-.062a10.286 10.286 0 1 1 6.324 0v.005z"
-			/>
-		</symbol>
-
-		<symbol viewBox="0 0 24 24" id="discord" stroke-width="0">
-			<path
-				fill="currentColor"
-				d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"
-			/>
-		</symbol>
-
 		<symbol id="git-branch" class="icon" viewBox="0 0 24 24">
 			<line x1="6" y1="3" x2="6" y2="15" />
 			<circle cx="18" cy="6" r="3" />

packages/site-kit/src/lib/components/ThemeToggle.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { theme } from '../stores';
-	import { BROWSER } from 'esm-env';
 	import { onDestroy } from 'svelte';
 
 	let { label = 'Dark mode' }: { label?: string } = $props();
@@ -44,72 +43,20 @@
 	type="button"
 	aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
 	aria-label={label}
->
-	<span class="check" class:checked={$theme.current === 'dark'}>
-		<span class="icon">
-			{#if BROWSER}
-				{#if $theme.current === 'dark'}
-					{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>`}
-				{:else}
-					{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></g></svg>`}
-				{/if}
-			{/if}
-		</span>
-	</span>
-</button>
+></button>
 
 <style>
 	button {
-		position: relative;
-		border-radius: 11px;
-		display: block;
-		width: 40px;
-		height: 22px;
-		flex-shrink: 0;
-		border: 1px solid var(--sk-text-4);
-		background-color: var(--sk-back-2);
-		transition: border-color 0.25s;
-	}
-
-	button:hover {
-		color: var(--sk-text-1);
-
-		border-color: var(--sk-text-1);
-	}
-
-	.check {
-		position: absolute;
-		top: 1px;
-		left: 1px;
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background-color: var(--sk-back-4);
-		box-shadow:
-			0 1px 2px rgba(0, 0, 0, 0.04),
-			0 1px 2px rgba(0, 0, 0, 0.06);
-		transition: transform 0.25s;
-		pointer-events: none;
-	}
-
-	.check.checked {
-		transform: translate(18px);
-	}
-
-	.icon {
-		position: relative;
-		display: block;
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		overflow: hidden;
-	}
-
-	.icon :global(svg) {
-		position: absolute;
-		top: 3px;
-		left: 3px;
-		width: 12px;
-		height: 12px;
+		width: 2rem;
+		height: 2rem;
+		background: red;
+		background: url($lib/icons/theme-light.svg);
+		background-size: contain;
+		opacity: 0.6;
+
+		:global(.dark) & {
+			background: url($lib/icons/theme-dark.svg);
+			opacity: 0.8;
+		}
 	}
 </style>

packages/site-kit/src/lib/nav/Nav.svelte

@@ -21,17 +21,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		links: NavigationLink[];
 		search?: Snippet;
 		external_links?: Snippet;
-		theme_label?: Snippet;
 	}
 
-	let {
-		home_title = 'Homepage',
-		title,
-		links,
-		search,
-		external_links,
-		theme_label
-	}: Props = $props();
+	let { home_title = 'Homepage', title, links, search, external_links }: Props = $props();
 
 	let visible = $state(true);
 
@@ -88,10 +80,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	{/if}
 
 	<div class="desktop">
-		<div class="center-area">
-			{@render search?.()}
-		</div>
-
 		<div class="menu">
 			{#each links as link}
 				{#if link.sections?.[0].path}
@@ -105,15 +93,15 @@ Top navigation bar for the application. It provides a slot for the left side, th
 					</a>
 				{/if}
 			{/each}
+		</div>
 
-			<Separator />
-
+		<div class="menu">
 			{@render external_links?.()}
 
+			{@render search?.()}
+
 			<div class="appearance">
-				<span class="caption"
-					>{#if theme_label}{@render theme_label()}{:else}Theme{/if}</span
-				>
+				<span class="caption">Theme</span>
 				<ThemeToggle />
 			</div>
 		</div>
@@ -138,9 +126,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			<Separator />
 
 			<div class="appearance">
-				<span class="caption"
-					>{#if theme_label}{@render theme_label()}{:else}Theme{/if}</span
-				>
+				<span class="caption">Theme</span>
 				<ThemeToggle />
 			</div>
 		</Menu>
@@ -224,6 +210,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		background-size: auto 70%;
 		align-items: center;
 		padding-left: calc(var(--sk-page-padding-side) + 4rem);
+		padding-right: 2rem;
 		text-decoration: none;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
@@ -317,13 +304,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
-	.desktop .center-area {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex: 1;
-	}
-
 	@media (min-width: 800px) {
 		nav {
 			display: grid;
@@ -342,6 +322,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			height: 100%;
 			align-items: center;
 			padding: 0 var(--sk-page-padding-side) 0 0;
+		}
+
+		.menu:last-child {
 			justify-content: end;
 		}
 
@@ -357,11 +340,4 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: none;
 		}
 	}
-
-	@media (min-width: 1240px) {
-		nav {
-			display: grid;
-			grid-template-columns: 1fr auto 1fr;
-		}
-	}
 </style>

packages/site-kit/src/lib/search/Search.svelte

@@ -106,6 +106,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 	@media (min-width: 800px) {
 		.search-container {
 			width: 11rem;
+			margin: 0 1rem;
 		}
 
 		.shortcut {
@@ -139,7 +140,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 
 	@media (min-width: 1240px) {
 		.search-container {
-			width: 32rem;
+			width: 19rem;
 		}
 	}
 </style>