diff --git a/site/package-lock.json b/site/package-lock.json index ec763fd164..9820e9bf1a 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -1140,9 +1140,9 @@ "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==" }, "@sveltejs/svelte-repl": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.0.8.tgz", - "integrity": "sha512-beswkzUBn/J7/k23KQHedMFchrK/NUdB6RwLYaPIkgFahK8i2d+J9Bv9TLDf2ILEdgd6opzoNth9PNJZ15f1og==", + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.0.9.tgz", + "integrity": "sha512-n0cYMyzxCU/oEwibliNRcIMiRcOpt7oA4l9u/C2WFWzb4ygWhZ9gpYEI4IYvdUI/RJfe5KSR7TdAZI/dUk3mqg==", "dev": true, "requires": { "codemirror": "^5.45.0", diff --git a/site/package.json b/site/package.json index f85ede4c83..1f38eb6b35 100644 --- a/site/package.json +++ b/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", diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte index e9287ea5e6..ba6b7209d6 100644 --- a/site/src/routes/tutorial/[slug]/index.svelte +++ b/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); } - .mobile .offset-2 { transform: translate(-66.666%, 0); } + .offset-1 { transform: translate(-33.333%, 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 @@ -
+