redesign docs page (#242)

* redesign docs page

* fix

* fix

* fix

* link to discord

* tighten up

* oops

* make arrows slightly brighter

Author: Rich-Harris

apps/svelte.dev/src/routes/blog/+page.svelte

@@ -37,6 +37,7 @@
 		min-height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
 		max-width: var(--sk-page-main-width);
+		box-sizing: content-box;
 		margin: 0 auto;
 		text-wrap: balance;
 	}

apps/svelte.dev/src/routes/blog/[slug]/+page.svelte

@@ -45,8 +45,9 @@
 
 <style>
 	.post {
-		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
 		max-width: var(--sk-page-main-width);
+		box-sizing: content-box;
 		margin: 0 auto;
 	}
 

apps/svelte.dev/src/routes/docs/+page.svelte

@@ -57,37 +57,87 @@
 </script>
 
 <div class="page">
-	<div>
-		<h2>Svelte</h2>
-		<p>Svelte is a compiler-based framework for creating fast and efficient UIs.</p>
-		<a href="/docs/svelte">read the docs</a>
-	</div>
-	<div>
-		<h2>SvelteKit</h2>
-		<p>
-			SvelteKit is a framework for rapidly developing robust, performant web applications using
-			Svelte
-		</p>
-		<a href="/docs/kit">read the docs</a>
+	<h1>Documentation</h1>
+	<p>
+		Head to the <a href="/docs/svelte">Svelte</a> or <a href="/docs/kit">SvelteKit</a> reference docs,
+		or choose your adventure:
+	</p>
+
+	<div class="options">
+		<a href="/tutorial">
+			<h2>I&rsquo;m brand new here</h2>
+			<p>
+				We recommend starting with the interactive tutorial, which will teach you how to use Svelte
+				right here in your browser.
+			</p>
+		</a>
+
+		<a href="/docs/svelte/migrating">
+			<h2>I&rsquo;m migrating an app from Svelte 4</h2>
+			<p>
+				If you&rsquo;re already experienced with an older version of Svelte, the migration guide
+				will bring you up to speed on the changes in Svelte 5.
+			</p>
+		</a>
+
+		<a href="/playground">
+			<h2>I just want to try it out</h2>
+			<p>
+				Head over to the playground to see examples, create your own Svelte apps in the browser, and
+				share them with other people.
+			</p>
+		</a>
+
+		<a href="/chat" class="external">
+			<h2>Help! I'm stuck</h2>
+			<p>
+				Join our Discord server where you can hang out with fellow Svelte users and ask them
+				questions. It's like an LLM but with people.
+			</p>
+		</a>
 	</div>
 </div>
 
 <style>
 	.page {
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-		justify-items: center;
-		max-width: 100rem;
+		max-width: var(--sk-page-main-width);
+		box-sizing: content-box;
 		margin: auto;
+		text-wrap: balance;
+	}
+
+	.options a {
+		display: block;
+		color: var(--sk-text-2);
+		margin: 1em -2em;
+		padding: 2em;
+		background-color: var(--sk-back-1);
+		border-radius: var(--sk-border-radius);
 
-		& > div {
-			padding: 2rem;
-			max-width: 50rem;
+		&:hover {
+			background-color: var(--sk-back-2);
+			filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1));
+			text-decoration: none;
+
+			h2 {
+				text-decoration: underline;
+			}
 		}
-	}
 
-	a {
-		font-size: var(--sk-font-size-body-small);
+		h2 {
+			padding-right: 4rem;
+			background: url(./arrow-right.svg) no-repeat 100% 50%;
+			background-size: 3rem;
+
+			.external & {
+				background-image: url(./external-link.svg);
+				background-size: 3rem;
+			}
+		}
+
+		p:last-child {
+			margin-bottom: 0;
+		}
 	}
 </style>

apps/svelte.dev/src/routes/docs/arrow-right.svg

@@ -18,7 +18,7 @@
 	--sk-page-padding-side: 2.4rem;
 	--sk-thick-border-width: 0.3rem;
 	--sk-border-radius: 0.4rem;
-	--sk-page-main-width: 80rem;
+	--sk-page-main-width: 84rem;
 	--sk-banner-bottom-height: 0px;
 
 	/* typography */
@@ -37,7 +37,7 @@
 	--sk-font-size-ui-large: 3rem; /* TODO add regular/small */
 	--sk-font-size-code: 1.4rem;
 
-	--sk-line-max-width: 84rem;
+	--sk-line-max-width: 84rem; /* TODO can this be merged with --sk-page-main-width?
 
 	/* Base colors */
 	--sk-theme-1-hsl: 12, 93%, 43%;