Match styles to kit docs

sites/svelte.dev/src/routes/docs/+layout.svelte

@@ -24,7 +24,7 @@
 
 <style>
 	.container {
-		--sidebar-menu-width: 20rem;
+		--sidebar-menu-width: 28rem;
 		--sidebar-width: var(--sidebar-menu-width);
 		--ts-toggle-height: 4.2rem;
 	}
@@ -38,13 +38,13 @@
 		display: none;
 	}
 
-	.content {
+	/* .content {
 		width: 100%;
 		margin: 0;
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
 		tab-size: 2;
 		-moz-tab-size: 2;
-	}
+	} */
 
 	@media (min-width: 832px) {
 		/* can't use vars in @media :( */
@@ -229,34 +229,6 @@
 		cursor: pointer;
 	}
 
-	.content :global(blockquote) {
-		color: var(--sk-text-1);
-		background-color: rgba(255, 62, 0, 0.1);
-		border-left: 4px solid var(--sk-theme-1-variant);
-		padding: 1rem;
-	}
-
-	.content :global(blockquote) :global(:first-child) {
-		margin-top: 0;
-	}
-
-	.content :global(blockquote) :global(:last-child) {
-		margin-bottom: 0;
-	}
-
-	.content :global(blockquote) :global(code) {
-		background: var(--sk-code-bg);
-	}
-
-	.content :global(section) :global(a):hover {
-		text-decoration: underline;
-	}
-
-	.content :global(section) :global(a) :global(code) {
-		color: inherit;
-		background: rgba(255, 62, 0, 0.1) !important;
-	}
-
 	/* this replaces the offset-anchor hack, which we should remove from this CSS
 	   once https://github.com/sveltejs/action-deploy-docs/issues/1 is closed */
 	.content :global(h2[id]),
@@ -323,7 +295,7 @@
 
 	@media (min-width: 1200px) {
 		.container {
-			--sidebar-width: max(20rem, 18vw);
+			--sidebar-width: max(28rem, 23vw);
 		}
 
 		.page {

sites/svelte.dev/src/routes/docs/Contents.svelte

@@ -92,7 +92,7 @@
 	@media (min-width: 832px) {
 		.sidebar {
 			columns: 1;
-			padding-left: 0;
+			padding-left: 3.2rem;
 			padding-right: 0;
 			width: var(--sidebar-menu-width);
 			margin: 0 0 0 auto;

sites/svelte.dev/src/routes/docs/[slug]/+page.svelte

@@ -9,7 +9,9 @@
 	<title>{data.page.title} - Svelte</title>
 </svelte:head>
 
+<div class="text">
 	{@html data.page.content}
+</div>
 
 {#if data.page.sections.length !== 0}
 	<OnThisPage details={data.page} />

sites/svelte.dev/src/routes/docs/[slug]/OnThisPage.svelte

@@ -1,8 +1,8 @@
 <script>
+	import { onMount } from 'svelte';
 	import { afterNavigate } from '$app/navigation';
 	import { base } from '$app/paths';
 	import { page } from '$app/stores';
-	import { afterUpdate, onMount } from 'svelte';
 
 	/** @type {import('./$types').PageData['page']} */
 	export let details;
@@ -22,13 +22,6 @@
 	/** @type {number[]} */
 	let positions = [];
 
-	/** @type {HTMLElement} */
-	let container_el;
-
-	let show_contents = false;
-
-	let glider_index = 0;
-
 	onMount(async () => {
 		await document.fonts.ready;
 
@@ -86,56 +79,18 @@
 			{ once: true }
 		);
 	}
-
-	$: glider_index = details.sections.findIndex(({ slug }) => hash.replace('#', '') === slug);
-
-	afterUpdate(() => {
-		// bit of a hack — prevent sidebar scrolling if
-		// TOC is open on mobile, or scroll came from within sidebar
-		if (show_contents && window.innerWidth < 832) return;
-
-		const active = container_el.querySelector('.active');
-
-		if (active) {
-			const { top, bottom } = active.getBoundingClientRect();
-
-			const min = 200;
-			const max = window.innerHeight - 200;
-
-			if (top > max) {
-				container_el.scrollBy({
-					top: top - max,
-					left: 0,
-					behavior: 'smooth',
-				});
-			} else if (bottom < min) {
-				container_el.scrollBy({
-					top: bottom - min,
-					left: 0,
-					behavior: 'smooth',
-				});
-			}
-		}
-	});
 </script>
 
 <svelte:window on:scroll={highlight} on:resize={update} on:hashchange={() => select($page.url)} />
 
-<aside class="on-this-page" bind:this={container_el}>
+<aside class="on-this-page">
 	<h2>On this page</h2>
 	<nav>
 		<ul>
 			<li><a href="{base}/docs/{details.slug}" class:active={hash === ''}>{details.title}</a></li>
 			{#each details.sections as { title, slug }}
-				<li>
+				<li><a href={`#${slug}`} class:active={`#${slug}` === hash}>{title}</a></li>
-					<a href={`#${slug}`} class:active={`#${slug}` === hash}>{title}</a>
-				</li>
 			{/each}
-			<div
-				class="glider"
-				aria-hidden="true"
-				style:transform="translateY({(glider_index + 1) * 100}%)"
-			/>
 		</ul>
 	</nav>
 </aside>
@@ -145,12 +100,9 @@
 		display: var(--on-this-page-display);
 		position: fixed;
 		padding: 0 var(--sk-page-padding-side) 0 0;
-		margin-right: var(--sk-page-padding-side);
 		width: min(280px, calc(var(--sidebar-width) - var(--sk-page-padding-side)));
-		height: calc(100% - var(--sk-nav-height));
-		overflow-y: auto;
 		top: var(--sk-nav-height);
-		left: calc(99vw - (var(--sidebar-width)));
+		left: calc(100vw - (var(--sidebar-width)));
 	}
 
 	h2 {
@@ -163,7 +115,6 @@
 	}
 
 	ul {
-		position: relative;
 		list-style: none;
 	}
 
@@ -171,10 +122,7 @@
 		display: block;
 		padding: 0.3rem 0.5rem;
 		color: var(--sk-text-3);
-		font-size: 1.6rem;
+		border-left: 2px solid transparent;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 	}
 
 	a:hover {
@@ -182,15 +130,8 @@
 		background: var(--sk-back-3);
 	}
 
-	.glider {
+	a.active {
-		position: absolute;
+		background: var(--sk-back-3);
-		top: 0;
-		left: 0;
-		z-index: 1;
-		width: 100%;
-		height: 30px;
-		border-left: 2px solid transparent;
 		border-left-color: var(--sk-theme-1);
-		/* transition: transform 0.15s ease-out; */
 	}
 </style>