fix remaining tutorial layout bugs

site/package-lock.json

@@ -1140,9 +1140,9 @@
       "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw=="
     },
     "@sveltejs/svelte-repl": {
-      "version": "0.0.8",
+      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.0.8.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.0.9.tgz",
-      "integrity": "sha512-beswkzUBn/J7/k23KQHedMFchrK/NUdB6RwLYaPIkgFahK8i2d+J9Bv9TLDf2ILEdgd6opzoNth9PNJZ15f1og==",
+      "integrity": "sha512-n0cYMyzxCU/oEwibliNRcIMiRcOpt7oA4l9u/C2WFWzb4ygWhZ9gpYEI4IYvdUI/RJfe5KSR7TdAZI/dUk3mqg==",
       "dev": true,
       "requires": {
         "codemirror": "^5.45.0",

site/package.json

@@ -39,7 +39,7 @@
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/runtime": "^7.3.1",
-    "@sveltejs/svelte-repl": "0.0.8",
+    "@sveltejs/svelte-repl": "0.0.9",
     "chokidar": "^2.1.2",
     "degit": "^2.1.3",
     "eslint-plugin-svelte3": "^0.4.4",

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

@@ -113,32 +113,39 @@
 		position: relative;
 		height: calc(100vh - var(--nav-h));
 		overflow: hidden;
-		padding: 0;
+		padding: 0 0 42px 0;
 		/* margin: 0 calc(var(--side-nav) * -1); */
 		box-sizing: border-box;
 	}
 
-	.tutorial-outer.mobile {
-		padding: 0 0 42px 0;
-	}
-
 	.viewport {
-		width: 100%;
-		height: 100%;
 		display: grid;
-		grid-template-columns: minmax(33.333%, 480px) auto;
-		grid-auto-rows: 100%;
-	}
-
-	.mobile .viewport {
 		width: 300%;
 		height: 100%;
 		grid-template-columns: 33.333% 66.666%;
 		transition: transform 0.3s;
+		grid-auto-rows: 100%;
 	}
 
-	.mobile .offset-1 { transform: translate(-33.333%, 0); }
+	.offset-1 { transform: translate(-33.333%, 0); }
-	.mobile .offset-2 { transform: translate(-66.666%, 0); }
+	.offset-2 { transform: translate(-66.666%, 0); }
+
+	@media (min-width: 768px) {
+		.tutorial-outer {
+			padding: 0;
+		}
+
+		.viewport {
+			width: 100%;
+			height: 100%;
+			display: grid;
+			grid-template-columns: minmax(33.333%, 480px) auto;
+			grid-auto-rows: 100%;
+			transition: none;
+		}
+
+		.offset-1, .offset-2 { transform: none; }
+	}
 
 	.tutorial-text {
 		display: flex;
@@ -242,7 +249,7 @@
 
 <svelte:window bind:innerWidth={width}/>
 
-<div class="tutorial-outer" class:mobile>
+<div class="tutorial-outer">
 	<div class="viewport offset-{offset}">
 		<div class="tutorial-text">
 			<div class="table-of-contents">