a few tweaks

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>

site/content/examples/11-svg/05-svg-transitions/custom-transitions.js

@@ -16,19 +16,3 @@ export function expand(node, params) {
 		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);`
-	};
-}

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>

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;
 	}

site/src/routes/examples/index.svelte

@@ -15,6 +15,7 @@
 <style>
 	.content {
 		max-width: 120rem;
+		padding: 0 var(--side-nav);
 		margin: 0 auto;
 	}
 

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,7 +234,8 @@ npm run dev & open http://localhost:5000
 	</div>
 </section>
 
-<section class="container example linkify">
+<div class="examples">
+	<section class="container example linkify">
 		<div>
 			<p>Svelte components are written in HTML files. Just add data.</p>
 		</div>
@@ -236,9 +245,9 @@ npm run dev & open http://localhost:5000
 			src="/repl/embed?example=hello-world"
 			scrolling="no"
 		></iframe>
-</section>
+	</section>
 
-<section class="container example linkify">
+	<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>
@@ -248,9 +257,9 @@ npm run dev & open http://localhost:5000
 			src="/repl/embed?example=nested-components"
 			scrolling="no"
 		></iframe>
-</section>
+	</section>
 
-<section class="container example linkify">
+	<section class="container example linkify">
 		<div>
 			<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
 		</div>
@@ -260,9 +269,9 @@ npm run dev & open http://localhost:5000
 			src="/repl/embed?example=reactive-assignments"
 			scrolling="no"
 		></iframe>
-</section>
+	</section>
 
-<section class="container example linkify">
+	<section class="container example linkify">
 		<div>
 			<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
 		</div>
@@ -272,7 +281,8 @@ npm run dev & open http://localhost:5000
 			src="/repl/embed?example=svg-transitions"
 			scrolling="no"
 		></iframe>
-</section>
+	</section>
+</div>
 
 <section class="container linkify">
 	<h3>Who's using Svelte?</h3>

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;
 	}
 

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;