nicer error page (#214)

Author: Rich-Harris

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

@@ -12,41 +12,59 @@
 	<title>{$page.status}</title>
 </svelte:head>
 
-<div class="container">
-	{#if online}
-		{#if $page.status === 404}
-			<h1>Not found!</h1>
-			<p>
-				If you were expecting to find something here, please drop by the
-				<a href="/chat"> Discord chatroom </a>
-				and let us know, or raise an issue on
-				<a href="https://github.com/sveltejs/sites">GitHub</a>. Thanks!
-			</p>
-		{:else}
-			<h1>Yikes!</h1>
-			<p>Something went wrong when we tried to render this page.</p>
-			{#if $page.error?.message}
-				<p class="error">{$page.status}: {$page.error.message}</p>
+<div class="outer">
+	<div class="inner">
+		{#if online}
+			{#if $page.status === 404}
+				<h1>Not found!</h1>
+				<p>
+					If you were expecting to find something here, please drop by the
+					<a href="/chat"> Discord chatroom </a>
+					and let us know, or raise an issue on
+					<a href="https://github.com/sveltejs/sites">GitHub</a>. Thanks!
+				</p>
 			{:else}
-				<p class="error">Encountered a {$page.status} error.</p>
+				<h1>Yikes!</h1>
+				<p>Something went wrong when we tried to render this page.</p>
+				{#if $page.error?.message}
+					<p class="error">{$page.status}: {$page.error.message}</p>
+				{:else}
+					<p class="error">Encountered a {$page.status} error.</p>
+				{/if}
+				<p>Please try reloading the page.</p>
+				<p>
+					If the error persists, please drop by the
+					<a href="/chat"> Discord chatroom </a>
+					and let us know, or raise an issue on
+					<a href="https://github.com/sveltejs/sites">GitHub</a>. Thanks!
+				</p>
 			{/if}
-			<p>Please try reloading the page.</p>
-			<p>
-				If the error persists, please drop by the
-				<a href="/chat"> Discord chatroom </a>
-				and let us know, or raise an issue on
-				<a href="https://github.com/sveltejs/sites">GitHub</a>. Thanks!
-			</p>
+		{:else}
+			<h1>It looks like you're offline</h1>
+			<p>Reload the page once you've found the internet.</p>
 		{/if}
-	{:else}
-		<h1>It looks like you're offline</h1>
-		<p>Reload the page once you've found the internet.</p>
-	{/if}
+	</div>
 </div>
 
 <style>
-	.container {
-		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
+	.outer {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 0 var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
+		width: 100%;
+		height: 100%;
+	}
+
+	.inner {
+		max-width: 50rem;
+		text-align: center;
+		text-wrap: balance;
+
+		a {
+			text-wrap: nowrap;
+		}
 	}
 
 	h1,

packages/site-kit/src/lib/styles/base.css

@@ -86,7 +86,7 @@ h1 {
 	position: relative;
 	font-family: var(--sk-font-heading);
 	font-weight: 500;
-	line-height: 1.35;
+	line-height: 1.2;
 	color: var(--sk-text-1);
 }