make tutorial mobile-friendly

site/src/routes/tutorial/[slug]/_components/ScreenToggle.svelte

@@ -0,0 +1,37 @@
+<script>
+	export let offset = 0;
+</script>
+
+<style>
+	.toggle {
+		width: 100%;
+		height: 42px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-top: 1px solid var(--second);
+	}
+
+	button {
+		padding: 0.3em 0.6em;
+		border-radius: 1em;
+		line-height: 1;
+		height: 1em;
+		box-sizing: content-box;
+		color: #999;
+		border: 1px solid #f4f4f4;
+		width: 4em;
+		margin: 0 0.15em;
+	}
+
+	.selected {
+		background-color: var(--prime);
+		color: white;
+	}
+</style>
+
+<div class="toggle">
+	<button class:selected={offset === 0} on:click={() => offset = 0}>tutorial</button>
+	<button class:selected={offset === 1} on:click={() => offset = 1}>input</button>
+	<button class:selected={offset === 2} on:click={() => offset = 2}>output</button>
+</div>

site/src/routes/tutorial/[slug]/index.svelte

@@ -15,6 +15,7 @@
 
 <script>
 	import TableOfContents from './_components/TableOfContents.svelte';
+	import ScreenToggle from './_components/ScreenToggle.svelte';
 	import Icon from '../../../components/Icon.svelte';
 	import Repl from '@sveltejs/svelte-repl';
 	import { getContext } from 'svelte';
@@ -29,6 +30,9 @@
 	let scrollable;
 	const lookup = new Map();
 
+	let width = process.browser ? window.innerWidth : 1000;
+	let offset = 0;
+
 	sections.forEach(section => {
 		section.chapters.forEach(chapter => {
 			const obj = {
@@ -70,6 +74,8 @@
 		});
 	}
 
+	$: mobile = width < 768;
+
 	function reset() {
 		repl.update({
 			components: chapter.app_a.map(clone)
@@ -110,11 +116,27 @@
 		padding: 0;
 		/* margin: 0 calc(var(--side-nav) * -1); */
 		box-sizing: border-box;
+
+	}
+
+	.viewport {
+		width: 100%;
+		height: 100%;
 		display: grid;
 		grid-template-columns: minmax(33.333%, 480px) auto;
 		grid-auto-rows: 100%;
 	}
 
+	.mobile .viewport {
+		width: 300%;
+		height: calc(100% - 42px);
+		grid-template-columns: 33.333% 66.666%;
+		transition: transform 0.3s;
+	}
+
+	.mobile .offset-1 { transform: translate(-33.333%, 0); }
+	.mobile .offset-2 { transform: translate(-66.666%, 0); }
+
 	.tutorial-text {
 		display: flex;
 		flex-direction: column;
@@ -215,7 +237,10 @@
 	<title>{selected.section.title} / {selected.chapter.title} • Svelte Tutorial</title>
 </svelte:head>
 
-<div class="tutorial-outer">
+<svelte:window bind:innerWidth={width}/>
+
+<div class="tutorial-outer" class:mobile>
+	<div class="viewport offset-{offset}">
 		<div class="tutorial-text">
 			<div class="table-of-contents">
 				<TableOfContents {sections} {slug} {selected}/>
@@ -249,10 +274,16 @@
 				bind:this={repl}
 				{svelteUrl}
 				{rollupUrl}
-			orientation="rows"
+				orientation={mobile ? 'columns' : 'rows'}
+				fixed={mobile}
 				on:change={handle_change}
 				setup={mapbox_setup}
 				relaxed
 			/>
 		</div>
+	</div>
+
+	{#if mobile}
+		<ScreenToggle bind:offset/>
+	{/if}
 </div>