Fix HTML and CSS order and format CSS.

site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte

@@ -5,12 +5,6 @@
 	let text = 'edit me';
 </script>
 
-<style>
-	input { display: block; }
-	div { display: inline-block; }
-	span { word-break: break-all; }
-</style>
-
 <input type=range bind:value={size}>
 <input bind:value={text}>
 
@@ -18,4 +12,16 @@
 
 <div>
 	<span style="font-size: {size}px">{text}</span>
-</div>
+</div>
+
+<style>
+	input {
+		display: block;
+	}
+	div {
+		display: inline-block;
+	}
+	span {
+		word-break: break-all;
+	}
+</style>

site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte

@@ -5,12 +5,6 @@
 	let text = 'edit me';
 </script>
 
-<style>
-	input { display: block; }
-	div { display: inline-block; }
-	span { word-break: break-all; }
-</style>
-
 <input type=range bind:value={size}>
 <input bind:value={text}>
 
@@ -18,4 +12,16 @@
 
 <div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
-</div>
+</div>
+
+<style>
+	input {
+		display: block;
+	}
+	div {
+		display: inline-block;
+	}
+	span {
+		word-break: break-all;
+	}
+</style>

site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte

@@ -36,6 +36,11 @@
 	});
 </script>
 
+<canvas
+	width={32}
+	height={32}
+></canvas>
+
 <style>
 	canvas {
 		width: 100%;
@@ -44,9 +49,4 @@
 		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 	}
-</style>
-
-<canvas
-	width={32}
-	height={32}
-></canvas>
+</style>

site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte

@@ -36,6 +36,12 @@
 	});
 </script>
 
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>
+
 <style>
 	canvas {
 		width: 100%;
@@ -44,10 +50,4 @@
 		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
 	}
-</style>
-
-<canvas
-	bind:this={canvas}
-	width={32}
-	height={32}
-></canvas>
+</style>

site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte

@@ -10,19 +10,6 @@
 	const submit = () => dispatch('submit');
 </script>
 
-<style>
-	.keypad {
-		display: grid;
-		grid-template-columns: repeat(3, 5em);
-		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em
-	}
-
-	button {
-		margin: 0
-	}
-</style>
-
 <div class="keypad">
 	<button on:click={select(1)}>1</button>
 	<button on:click={select(2)}>2</button>
@@ -37,4 +24,17 @@
 	<button disabled={!value} on:click={clear}>clear</button>
 	<button on:click={select(0)}>0</button>
 	<button disabled={!value} on:click={submit}>submit</button>
-</div>
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>

site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte

@@ -10,19 +10,6 @@
 	const submit = () => dispatch('submit');
 </script>
 
-<style>
-	.keypad {
-		display: grid;
-		grid-template-columns: repeat(3, 5em);
-		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em
-	}
-
-	button {
-		margin: 0
-	}
-</style>
-
 <div class="keypad">
 	<button on:click={select(1)}>1</button>
 	<button on:click={select(2)}>2</button>
@@ -37,4 +24,17 @@
 	<button disabled={!value} on:click={clear}>clear</button>
 	<button on:click={select(0)}>0</button>
 	<button disabled={!value} on:click={submit}>submit</button>
-</div>
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>

site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte

@@ -2,20 +2,6 @@
 	let photos = [];
 </script>
 
-<style>
-	.photos {
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		grid-gap: 8px;
-	}
-
-	figure, img {
-		width: 100%;
-		margin: 0;
-	}
-</style>
-
 <h1>Photo album</h1>
 
 <div class="photos">
@@ -28,4 +14,18 @@
 		<!-- this block renders when photos.length === 0 -->
 		<p>loading...</p>
 	{/each}
-</div>
+</div>
+
+<style>
+	.photos {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 8px;
+	}
+
+	figure, img {
+		width: 100%;
+		margin: 0;
+	}
+</style>

site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte

@@ -9,20 +9,6 @@
 	});
 </script>
 
-<style>
-	.photos {
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		grid-gap: 8px;
-	}
-
-	figure, img {
-		width: 100%;
-		margin: 0;
-	}
-</style>
-
 <h1>Photo album</h1>
 
 <div class="photos">
@@ -35,4 +21,18 @@
 		<!-- this block renders when photos.length === 0 -->
 		<p>loading...</p>
 	{/each}
-</div>
+</div>
+
+<style>
+	.photos {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 8px;
+	}
+
+	figure, img {
+		width: 100%;
+		margin: 0;
+	}
+</style>

site/content/tutorial/09-motion/01-tweened/app-a/App.svelte

@@ -4,13 +4,6 @@
 	const progress = writable(0);
 </script>
 
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
-
 <progress value={$progress}></progress>
 
 <button on:click="{() => progress.set(0)}">
@@ -31,4 +24,11 @@
 
 <button on:click="{() => progress.set(1)}">
 	100%
-</button>
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>

site/content/tutorial/09-motion/01-tweened/app-b/App.svelte

@@ -8,13 +8,6 @@
 	});
 </script>
 
-<style>
-	progress {
-		display: block;
-		width: 100%;
-	}
-</style>
-
 <progress value={$progress}></progress>
 
 <button on:click="{() => progress.set(0)}">
@@ -35,4 +28,11 @@
 
 <button on:click="{() => progress.set(1)}">
 	100%
-</button>
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>

site/content/tutorial/09-motion/02-spring/app-a/App.svelte

@@ -5,11 +5,6 @@
 	let size = writable(10);
 </script>
 
-<style>
-	svg { width: 100%; height: 100%; margin: -8px; }
-	circle { fill: #ff3e00 }
-</style>
-
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
@@ -28,4 +23,15 @@
 	on:mouseup="{() => size.set(10)}"
 >
 	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
-</svg>
+</svg>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+		margin: -8px;
+	}
+	circle {
+		fill: #ff3e00;
+	}
+</style>

site/content/tutorial/09-motion/02-spring/app-b/App.svelte

@@ -9,11 +9,6 @@
 	let size = spring(10);
 </script>
 
-<style>
-	svg { width: 100%; height: 100% }
-	circle { fill: #ff3e00 }
-</style>
-
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
@@ -32,4 +27,14 @@
 	on:mouseup="{() => size.set(10)}"
 >
 	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
-</svg>
+</svg>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+	circle {
+		fill: #ff3e00;
+	}
+</style>

site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte

@@ -11,6 +11,17 @@
 	}
 </script>
 
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+		<span>transitions!</span>
+	</div>
+{/if}
+
 <style>
 	.centered {
 		position: absolute;
@@ -24,15 +35,4 @@
 		transform: translate(-50%,-50%);
 		font-size: 4em;
 	}
-</style>
-
-<label>
-	<input type="checkbox" bind:checked={visible}>
-	visible
-</label>
-
-{#if visible}
-	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
-		<span>transitions!</span>
-	</div>
-{/if}
+</style>

site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte

@@ -22,6 +22,17 @@
 	}
 </script>
 
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+		<span>transitions!</span>
+	</div>
+{/if}
+
 <style>
 	.centered {
 		position: absolute;
@@ -35,15 +46,4 @@
 		transform: translate(-50%,-50%);
 		font-size: 4em;
 	}
-</style>
-
-<label>
-	<input type="checkbox" bind:checked={visible}>
-	visible
-</label>
-
-{#if visible}
-	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
-		<span>transitions!</span>
-	</div>
-{/if}
+</style>

site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte

@@ -6,13 +6,6 @@
 	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
 </script>
 
-<style>
-	div {
-		padding: 0.5em 0;
-		border-top: 1px solid #eee;
-	}
-</style>
-
 <label>
 	<input type="checkbox" bind:checked={showItems}>
 	show list
@@ -29,4 +22,11 @@
 			{item}
 		</div>
 	{/each}
-{/if}
+{/if}
+
+<style>
+	div {
+		padding: 0.5em 0;
+		border-top: 1px solid #eee;
+	}
+</style>

site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte

@@ -6,13 +6,6 @@
 	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
 </script>
 
-<style>
-	div {
-		padding: 0.5em 0;
-		border-top: 1px solid #eee;
-	}
-</style>
-
 <label>
 	<input type="checkbox" bind:checked={showItems}>
 	show list
@@ -29,4 +22,11 @@
 			{item}
 		</div>
 	{/each}
-{/if}
+{/if}
+
+<style>
+	div {
+		padding: 0.5em 0;
+		border-top: 1px solid #eee;
+	}
+</style>

site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte

@@ -145,4 +145,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>

site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte

@@ -152,4 +152,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>

site/content/tutorial/11-animations/01-animate/app-a/App.svelte

@@ -152,4 +152,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>

site/content/tutorial/11-animations/01-animate/app-b/App.svelte

@@ -155,4 +155,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>

site/content/tutorial/13-classes/01-classes/app-a/App.svelte

@@ -2,17 +2,6 @@
 	let current = 'foo';
 </script>
 
-<style>
-	button {
-		display: block;
-	}
-
-	.selected {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
-
 <button
 	class="{current === 'foo' ? 'selected' : ''}"
 	on:click="{() => current = 'foo'}"
@@ -26,4 +15,15 @@
 <button
 	class="{current === 'baz' ? 'selected' : ''}"
 	on:click="{() => current = 'baz'}"
->baz</button>
+>baz</button>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.selected {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>

site/content/tutorial/13-classes/01-classes/app-b/App.svelte

@@ -2,17 +2,6 @@
 	let current = 'foo';
 </script>
 
-<style>
-	button {
-		display: block;
-	}
-
-	.selected {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
-
 <button
 	class:selected="{current === 'foo'}"
 	on:click="{() => current = 'foo'}"
@@ -26,4 +15,15 @@
 <button
 	class:selected="{current === 'baz'}"
 	on:click="{() => current = 'baz'}"
->baz</button>
+>baz</button>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.selected {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>

site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte

@@ -2,12 +2,6 @@
 	let big = false;
 </script>
 
-<style>
-	.big {
-		font-size: 4em;
-	}
-</style>
-
 <label>
 	<input type=checkbox bind:checked={big}>
 	big
@@ -15,4 +9,10 @@
 
 <div class:big={big}>
 	some {big ? 'big' : 'small'} text
-</div>
+</div>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>

site/content/tutorial/14-composition/01-slots/app-a/Box.svelte

@@ -1,3 +1,7 @@
+<div class="box">
+	<!-- content should be injected here -->
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,8 +11,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<!-- content should be injected here -->
-</div>
+</style>

site/content/tutorial/14-composition/01-slots/app-b/Box.svelte

@@ -1,3 +1,7 @@
+<div class="box">
+	<slot></slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,8 +11,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<slot></slot>
-</div>
+</style>

site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte

@@ -1,3 +1,7 @@
+<div class="box">
+	<slot></slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,8 +11,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<slot></slot>
-</div>
+</style>

site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte

@@ -1,3 +1,9 @@
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -7,10 +13,4 @@
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}
-</style>
-
-<div class="box">
-	<slot>
-		<em>no content was provided</em>
-	</slot>
-</div>
+</style>

site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte

@@ -1,3 +1,23 @@
+<article class="contact-card">
+	<h2>
+		<slot>
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot>
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot>
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+
 <style>
 	.contact-card {
 		width: 300px;
@@ -21,27 +41,13 @@
 		line-height: 1.2;
 	}
 
-	.address { background-image: url(tutorial/icons/map-marker.svg) }
-	.email   { background-image: url(tutorial/icons/email.svg) }
-	.missing { color: #999 }
-</style>
-
-<article class="contact-card">
-	<h2>
-		<slot>
-			<span class="missing">Unknown name</span>
-		</slot>
-	</h2>
-
-	<div class="address">
-		<slot>
-			<span class="missing">Unknown address</span>
-		</slot>
-	</div>
-
-	<div class="email">
-		<slot>
-			<span class="missing">Unknown email</span>
-		</slot>
-	</div>
-</article>
+	.address {
+		background-image: url(tutorial/icons/map-marker.svg);
+	}
+	.email {
+		background-image: url(tutorial/icons/email.svg);
+	}
+	.missing {
+		color: #999;
+	}
+</style>

site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte

@@ -1,3 +1,23 @@
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+
 <style>
 	.contact-card {
 		width: 300px;
@@ -21,27 +41,13 @@
 		line-height: 1.2;
 	}
 
-	.address { background-image: url(tutorial/icons/map-marker.svg) }
-	.email   { background-image: url(tutorial/icons/email.svg) }
-	.missing { color: #999 }
-</style>
-
-<article class="contact-card">
-	<h2>
-		<slot name="name">
-			<span class="missing">Unknown name</span>
-		</slot>
-	</h2>
-
-	<div class="address">
-		<slot name="address">
-			<span class="missing">Unknown address</span>
-		</slot>
-	</div>
-
-	<div class="email">
-		<slot name="email">
-			<span class="missing">Unknown email</span>
-		</slot>
-	</div>
-</article>
+	.address {
+		background-image: url(tutorial/icons/map-marker.svg);
+	}
+	.email {
+		background-image: url(tutorial/icons/email.svg);
+	}
+	.missing {
+		color: #999;
+	}
+</style>

site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte

@@ -3,32 +3,6 @@
 	import Comment from './Comment.svelte'
 </script>
 
-<style>
-	h1 {
-		font-weight: 300;
-		margin: 0 1rem;
-	}
-
-	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0.5rem;
-		display: flex;
-	}
-
-	@media (max-width: 600px) {
-		ul {
-			flex-direction: column;
-		}
-	}
-
-	li {
-		padding: 0.5rem;
-		flex: 1 1 50%;
-		min-width: 200px;
-	}
-</style>
-
 <h1>
 	Projects
 </h1>
@@ -55,3 +29,29 @@
 		/>
 	</li>
 </ul>
+
+<style>
+	h1 {
+		font-weight: 300;
+		margin: 0 1rem;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0.5rem;
+		display: flex;
+	}
+
+	@media (max-width: 600px) {
+		ul {
+			flex-direction: column;
+		}
+	}
+
+	li {
+		padding: 0.5rem;
+		flex: 1 1 50%;
+		min-width: 200px;
+	}
+</style>

site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte

@@ -5,6 +5,19 @@
 	$: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&rounded=true&background=ff3e00&color=fff&bold=true`;
 </script>
 
+<article>
+	<div class="header">
+		<img src={avatar} alt="" height="32" width="32">
+		<div class="details">
+			<h4>{name}</h4>
+			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
+		</div>
+	</div>
+	<div class="body">
+		<slot></slot>
+	</div>
+</article>
+
 <style>
 	article {
 		background-color: #fff;
@@ -40,17 +53,4 @@
 	.body :global(p) {
 		margin: 0;
 	}
-</style>
-
-<article>
-	<div class="header">
-		<img src={avatar} alt="" height="32" width="32">
-		<div class="details">
-			<h4>{name}</h4>
-			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
-		</div>
-	</div>
-	<div class="body">
-		<slot></slot>
-	</div>
-</article>
+</style>

site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte

@@ -4,6 +4,17 @@
 	export let totalTasks = 0;
 </script>
 
+<article class:has-discussion={true}>
+	<div>
+		<h2>{title}</h2>
+		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
+	</div>
+	<div class="discussion">
+		<h3>Comments</h3>
+		<slot name="comments"></slot>
+	</div>
+</article>
+
 <style>
 	article {
 		border: 1px #ccc solid;
@@ -48,15 +59,4 @@
 		background-color: #eee;
 		border-top: 1px #ccc solid;
 	}
-</style>
-
-<article class:has-discussion={true}>
-	<div>
-		<h2>{title}</h2>
-		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
-	</div>
-	<div class="discussion">
-		<h3>Comments</h3>
-		<slot name="comments"></slot>
-	</div>
-</article>
+</style>

site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte

@@ -3,32 +3,6 @@
 	import Comment from './Comment.svelte'
 </script>
 
-<style>
-	h1 {
-		font-weight: 300;
-		margin: 0 1rem;
-	}
-
-	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0.5rem;
-		display: flex;
-	}
-
-	@media (max-width: 600px) {
-		ul {
-			flex-direction: column;
-		}
-	}
-
-	li {
-		padding: 0.5rem;
-		flex: 1 1 50%;
-		min-width: 200px;
-	}
-</style>
-
 <h1>
 	Projects
 </h1>
@@ -55,3 +29,29 @@
 		/>
 	</li>
 </ul>
+
+<style>
+	h1 {
+		font-weight: 300;
+		margin: 0 1rem;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0.5rem;
+		display: flex;
+	}
+
+	@media (max-width: 600px) {
+		ul {
+			flex-direction: column;
+		}
+	}
+
+	li {
+		padding: 0.5rem;
+		flex: 1 1 50%;
+		min-width: 200px;
+	}
+</style>

site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte

@@ -5,6 +5,19 @@
 	$: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&rounded=true&background=ff3e00&color=fff&bold=true`;
 </script>
 
+<article>
+	<div class="header">
+		<img src={avatar} alt="" height="32" width="32">
+		<div class="details">
+			<h4>{name}</h4>
+			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
+		</div>
+	</div>
+	<div class="body">
+		<slot></slot>
+	</div>
+</article>
+
 <style>
 	article {
 		background-color: #fff;
@@ -40,17 +53,4 @@
 	.body :global(p) {
 		margin: 0;
 	}
-</style>
-
-<article>
-	<div class="header">
-		<img src={avatar} alt="" height="32" width="32">
-		<div class="details">
-			<h4>{name}</h4>
-			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
-		</div>
-	</div>
-	<div class="body">
-		<slot></slot>
-	</div>
-</article>
+</style>

site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte

@@ -4,6 +4,19 @@
 	export let totalTasks = 0;
 </script>
 
+<article class:has-discussion={$$slots.comments}>
+	<div>
+		<h2>{title}</h2>
+		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
+	</div>
+	{#if $$slots.comments}
+		<div class="discussion">
+			<h3>Comments</h3>
+			<slot name="comments"></slot>
+		</div>
+	{/if}
+</article>
+
 <style>
 	article {
 		border: 1px #ccc solid;
@@ -48,17 +61,4 @@
 		background-color: #eee;
 		border-top: 1px #ccc solid;
 	}
-</style>
-
-<article class:has-discussion={$$slots.comments}>
-	<div>
-		<h2>{title}</h2>
-		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
-	</div>
-	{#if $$slots.comments}
-		<div class="discussion">
-			<h3>Comments</h3>
-			<slot name="comments"></slot>
-		</div>
-	{/if}
-</article>
+</style>

site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte

@@ -2,6 +2,16 @@
 	import Hoverable from './Hoverable.svelte';
 </script>
 
+<Hoverable>
+	<div class:active={hovering}>
+		{#if hovering}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
 <style>
 	div {
 		padding: 1em;
@@ -13,14 +23,4 @@
 		background-color: #ff3e00;
 		color: white;
 	}
-</style>
-
-<Hoverable>
-	<div class:active={hovering}>
-		{#if hovering}
-			<p>I am being hovered upon.</p>
-		{:else}
-			<p>Hover over me!</p>
-		{/if}
-	</div>
-</Hoverable>
+</style>

site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte

@@ -2,19 +2,6 @@
 	import Hoverable from './Hoverable.svelte';
 </script>
 
-<style>
-	div {
-		padding: 1em;
-		margin: 0 0 1em 0;
-		background-color: #eee;
-	}
-
-	.active {
-		background-color: #ff3e00;
-		color: white;
-	}
-</style>
-
 <Hoverable let:hovering={active}>
 	<div class:active>
 		{#if active}
@@ -43,4 +30,17 @@
 			<p>Hover over me!</p>
 		{/if}
 	</div>
-</Hoverable>
+</Hoverable>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>

site/content/tutorial/15-context/01-context-api/app-a/Map.svelte

@@ -34,15 +34,15 @@
 	});
 </script>
 
+<div bind:this={container}>
+	{#if map}
+		<slot></slot>
+	{/if}
+</div>
+
 <style>
 	div {
 		width: 100%;
 		height: 100%;
 	}
-</style>
-
-<div bind:this={container}>
-	{#if map}
-		<slot></slot>
-	{/if}
-</div>
+</style>

site/content/tutorial/15-context/01-context-api/app-b/Map.svelte

@@ -36,15 +36,15 @@
 	});
 </script>
 
+<div bind:this={container}>
+	{#if map}
+		<slot></slot>
+	{/if}
+</div>
+
 <style>
 	div {
 		width: 100%;
 		height: 100%;
 	}
-</style>
-
-<div bind:this={container}>
-	{#if map}
-		<slot></slot>
-	{/if}
-</div>
+</style>

site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte

@@ -3,12 +3,12 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
+<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
-
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+</style>

site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte

@@ -10,6 +10,22 @@
 	}
 </script>
 
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.type === 'folder'}
+					<!-- show folder -->
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
@@ -33,20 +49,4 @@
 	li {
 		padding: 0.2em 0;
 	}
-</style>
-
-<span class:expanded on:click={toggle}>{name}</span>
-
-{#if expanded}
-	<ul>
-		{#each files as file}
-			<li>
-				{#if file.type === 'folder'}
-					<!-- show folder -->
-				{:else}
-					<File {...file}/>
-				{/if}
-			</li>
-		{/each}
-	</ul>
-{/if}
+</style>

site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte

@@ -3,12 +3,12 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
+<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
-
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+</style>

site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte

@@ -10,6 +10,22 @@
 	}
 </script>
 
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.type === 'folder'}
+					<svelte:self {...file}/>
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}
+
 <style>
 	span {
 		padding: 0 0 0 1.5em;
@@ -33,20 +49,4 @@
 	li {
 		padding: 0.2em 0;
 	}
-</style>
-
-<span class:expanded on:click={toggle}>{name}</span>
-
-{#if expanded}
-	<ul>
-		{#each files as file}
-			<li>
-				{#if file.type === 'folder'}
-					<svelte:self {...file}/>
-				{:else}
-					<File {...file}/>
-				{/if}
-			</li>
-		{/each}
-	</ul>
-{/if}
+</style>