From 3869a23a7d6c9735b7db1d0e3e5e9b0e5eb43180 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 18 Mar 2019 18:27:41 -0400
Subject: [PATCH] a few tweaks

---
 .../11-svg/05-svg-transitions/App.svelte      |   4 +-
 .../05-svg-transitions/custom-transitions.js  |  16 ---
 site/src/routes/_layout.svelte                |   3 +-
 site/src/routes/blog/index.svelte             |   2 +-
 site/src/routes/examples/index.svelte         |   1 +
 site/src/routes/index.svelte                  | 110 ++++++++++--------
 site/src/routes/repl/index.svelte             |   2 +-
 site/src/routes/tutorial/[slug]/index.svelte  |  19 +--
 8 files changed, 68 insertions(+), 89 deletions(-)

diff --git a/site/content/examples/11-svg/05-svg-transitions/App.svelte b/site/content/examples/11-svg/05-svg-transitions/App.svelte
index 485bbf2558..6059b3645f 100644
--- a/site/content/examples/11-svg/05-svg-transitions/App.svelte
+++ b/site/content/examples/11-svg/05-svg-transitions/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { quintOut } from 'svelte/easing';
 	import { fade, draw, fly } from 'svelte/transition';
-	import { expand, blur } from './custom-transitions.js';
+	import { expand } from './custom-transitions.js';
 	import { inner, outer } from './shape.js';
 
 	let visible = true;
@@ -60,7 +60,7 @@
 	<div class="centered" out:fly="{{y: -20, duration: 800}}">
 		{#each 'SVELTE' as char, i}
 			<span
-				in:blur="{{delay: 1000 + i * 150, duration: 800}}"
+				in:fade="{{delay: 1000 + i * 150, duration: 800}}"
 			>{char}</span>
 		{/each}
 	</div>
diff --git a/site/content/examples/11-svg/05-svg-transitions/custom-transitions.js b/site/content/examples/11-svg/05-svg-transitions/custom-transitions.js
index 63f0af87e4..0d9a98a43f 100644
--- a/site/content/examples/11-svg/05-svg-transitions/custom-transitions.js
+++ b/site/content/examples/11-svg/05-svg-transitions/custom-transitions.js
@@ -15,20 +15,4 @@ export function expand(node, params) {
 		easing,
 		css: t => `opacity: ${t}; stroke-width: ${t * w}`
 	};
-}
-
-export function blur(node, params) {
-	const {
-		b = 10,
-		delay = 0,
-		duration = 400,
-		easing = cubicOut
-	} = params;
-
-	return {
-		delay,
-		duration,
-		easing,
-		css: (t, u) => `opacity: ${t}; filter: blur(${u * b}px);`
-	};
 }
\ No newline at end of file
diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte
index 386c27ac39..4cf0bac475 100644
--- a/site/src/routes/_layout.svelte
+++ b/site/src/routes/_layout.svelte
@@ -20,7 +20,8 @@
 	main {
 		position: relative;
 		margin: 0 auto;
-		padding: var(--nav-h) var(--side-nav) 0 var(--side-nav);
+		/* padding: var(--nav-h) var(--side-nav) 0 var(--side-nav); */
+		padding: var(--nav-h) 0 0 0;
 		overflow-x: hidden;
 	}
 </style>
\ No newline at end of file
diff --git a/site/src/routes/blog/index.svelte b/site/src/routes/blog/index.svelte
index 86828e42ca..b6743d94a1 100644
--- a/site/src/routes/blog/index.svelte
+++ b/site/src/routes/blog/index.svelte
@@ -30,7 +30,7 @@
 		grid-template-columns: 1fr 1fr;
 		grid-gap: 1em;
 		min-height: calc(100vh - var(--nav-h));
-		padding: var(--top-offset) 0;
+		padding: var(--top-offset) var(--side-nav) 0 var(--side-nav);
 		max-width: var(--main-width);
 		margin: 0 auto;
 	}
diff --git a/site/src/routes/examples/index.svelte b/site/src/routes/examples/index.svelte
index fa6ee35025..68cb9e3110 100644
--- a/site/src/routes/examples/index.svelte
+++ b/site/src/routes/examples/index.svelte
@@ -15,6 +15,7 @@
 <style>
 	.content {
 		max-width: 120rem;
+		padding: 0 var(--side-nav);
 		margin: 0 auto;
 	}
 
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index edde4372c6..134afe859b 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -10,6 +10,7 @@
 	.container {
 		position: relative;
 		margin: 10rem auto;
+		padding: 0 var(--side-nav);
 		max-width: 120rem;
 	}
 
@@ -107,15 +108,22 @@
 		top: 0.6em;
 	}
 
-	.example {
+	.examples {
 		background: var(--second);
 		color: white;
+		/* padding: 2em 0; */
+		overflow: hidden;
+	}
+
+	.example {
+		/* background: var(--second);
+		color: white;
 		padding: 0.8rem;
-		border-radius: var(--border-r);
+		border-radius: var(--border-r); */
 	}
 
 	.example > div:first-child {
-		padding: 0.8rem;
+		/* padding: 0.8rem; */
 	}
 
 	iframe {
@@ -226,53 +234,55 @@ npm run dev & open http://localhost:5000
 	</div>
 </section>
 
-<section class="container example linkify">
-	<div>
-		<p>Svelte components are written in HTML files. Just add data.</p>
-	</div>
-
-	<iframe
-		title="Hello world example"
-		src="/repl/embed?example=hello-world"
-		scrolling="no"
-	></iframe>
-</section>
-
-<section class="container example linkify">
-	<div>
-		<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p>
-	</div>
-
-	<iframe
-		title="Scope styles example"
-		src="/repl/embed?example=nested-components"
-		scrolling="no"
-	></iframe>
-</section>
-
-<section class="container example linkify">
-	<div>
-		<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
-	</div>
-
-	<iframe
-		title="Reactivity example"
-		src="/repl/embed?example=reactive-assignments"
-		scrolling="no"
-	></iframe>
-</section>
-
-<section class="container example linkify">
-	<div>
-		<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
-	</div>
-
-	<iframe
-		title="Transitions example"
-		src="/repl/embed?example=svg-transitions"
-		scrolling="no"
-	></iframe>
-</section>
+<div class="examples">
+	<section class="container example linkify">
+		<div>
+			<p>Svelte components are written in HTML files. Just add data.</p>
+		</div>
+
+		<iframe
+			title="Hello world example"
+			src="/repl/embed?example=hello-world"
+			scrolling="no"
+		></iframe>
+	</section>
+
+	<section class="container example linkify">
+		<div>
+			<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p>
+		</div>
+
+		<iframe
+			title="Scope styles example"
+			src="/repl/embed?example=nested-components"
+			scrolling="no"
+		></iframe>
+	</section>
+
+	<section class="container example linkify">
+		<div>
+			<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
+		</div>
+
+		<iframe
+			title="Reactivity example"
+			src="/repl/embed?example=reactive-assignments"
+			scrolling="no"
+		></iframe>
+	</section>
+
+	<section class="container example linkify">
+		<div>
+			<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
+		</div>
+
+		<iframe
+			title="Transitions example"
+			src="/repl/embed?example=svg-transitions"
+			scrolling="no"
+		></iframe>
+	</section>
+</div>
 
 <section class="container linkify">
 	<h3>Who's using Svelte?</h3>
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
index 8671717f5d..56d0532b30 100644
--- a/site/src/routes/repl/index.svelte
+++ b/site/src/routes/repl/index.svelte
@@ -122,7 +122,7 @@
 		overflow: hidden;
 		background-color: var(--back);
 		padding: var(--app-controls-h) 0 0 0;
-		margin: 0 calc(var(--side-nav) * -1);
+		/* margin: 0 calc(var(--side-nav) * -1); */
 		box-sizing: border-box;
 	}
 
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index eca5686270..28bcd9b4ff 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -102,7 +102,7 @@
 		height: calc(100vh - var(--nav-h));
 		overflow: hidden;
 		padding: 0;
-		margin: 0 calc(var(--side-nav) * -1);
+		/* margin: 0 calc(var(--side-nav) * -1); */
 		box-sizing: border-box;
 		display: grid;
 		grid-template-columns: minmax(33.333%, 480px) auto;
@@ -118,14 +118,6 @@
 		color: white;
 	}
 
-	.tutorial-repl {
-
-	}
-
-	.table-of-contents {
-
-	}
-
 	.chapter-markup {
 		padding: 1em;
 		overflow: auto;
@@ -153,11 +145,6 @@
 		color: white;
 	}
 
-	/* .chapter-markup::-webkit-scrollbar-track {
-		background-color: var(--second);
-		width: 4px;
-	} */
-
 	.chapter-markup::-webkit-scrollbar {
 		background-color: var(--second);
 		width: 8px;
@@ -177,10 +164,6 @@
 		white-space: nowrap;
 	}
 
-	.chapter-markup :global(pre) :global(code) {
-		/* color: var(--text); */
-	}
-
 	.controls {
 		border-top: 1px solid rgba(255,255,255,0.1);
 		padding: 1em 0 0 0;