create new pages

site/src/components/TopNav.svelte

@@ -190,7 +190,7 @@
 		color: var(--prime)
 	}
 
-	@media (min-width: 768px) {
+	@media (min-width: 840px) {
 		ul {
 			padding: 0;
 			background: none;
@@ -245,7 +245,8 @@
 		>
 			<li class="hide-if-desktop" class:active="{!segment}"><a rel="prefetch" href=".">Home</a></li>
 			<li class:active="{segment === 'tutorial'}"><a rel="prefetch" href="tutorial">Tutorial</a></li>
-			<li class:active="{segment === 'guide'}"><a rel="prefetch" href="guide">Guide</a></li>
+			<li class:active="{segment === 'docs'}"><a rel="prefetch" href="docs">API Docs</a></li>
+			<li class:active="{segment === 'examples'}"><a rel="prefetch" href="examples">Examples</a></li>
 			<li class:active="{segment === 'repl'}"><a rel="prefetch" href="repl">REPL</a></li>
 			<li class:active="{segment === 'blog'}"><a rel="prefetch" href="blog">Blog</a></li>
 			<li><a href="https://sapper.svelte.technology">Sapper</a></li>

site/src/routes/docs/index.svelte

@@ -1,6 +1,6 @@
 <script context="module">
 	export async function preload() {
-		const sections = await this.fetch(`guide.json`).then(r => r.json());
+		const sections = await this.fetch(`docs.json`).then(r => r.json());
 		return { sections };
 	}
 </script>

site/src/routes/examples/index.svelte

@@ -0,0 +1 @@
+<h1>Examples</h1>

site/src/routes/tutorial/index.svelte

@@ -1,5 +1 @@
-<script>
-	// import Icon from '../../components/Icon.svelte';
-</script>
-
 <h1>Tutorial</h1>