Fix HTML and CSS order and format CSS.

site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte

@@ -1,5 +1,7 @@
+<strong>Blue thing</strong>
+
 <style>
-	strong { color: blue; }
+	strong {
+		color: blue;
+	}
 </style>
-
-<strong>blue thing</strong>

site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte

@@ -1,5 +1,7 @@
+<strong>Green thing</strong>
+
 <style>
-	strong { color: green; }
+	strong {
+		color: green;
+	}
 </style>
-
-<strong>green thing</strong>

site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte

@@ -1,5 +1,7 @@
+<strong>Red thing</strong>
+
 <style>
-	strong { color: red; }
+	strong {
+		color: red;
+	}
 </style>
-
-<strong>red thing</strong>

site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte

@@ -1,5 +1,7 @@
+<strong>Blue thing</strong>
+
 <style>
-	strong { color: blue; }
+	strong {
+		color: blue;
+	}
 </style>
-
-<strong>blue thing</strong>

site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte

@@ -1,5 +1,7 @@
+<strong>Green thing</strong>
+
 <style>
-	strong { color: green; }
+	strong {
+		color: green;
+	}
 </style>
-
-<strong>green thing</strong>

site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte

@@ -1,5 +1,7 @@
+<strong>Red thing</strong>
+
 <style>
-	strong { color: red; }
+	strong {
+		color: red;
+	}
 </style>
-
-<strong>red thing</strong>

site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte

@@ -8,6 +8,17 @@
 	}
 </script>
 
+<svelte:window/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
+
 <style>
 	div {
 		display: flex;
@@ -29,14 +40,3 @@
 		color: #555;
 	}
 </style>
-
-<svelte:window/>
-
-<div style="text-align: center">
-	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
-	{:else}
-		<p>Focus this window and press any key</p>
-	{/if}
-</div>

site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte

@@ -8,6 +8,17 @@
 	}
 </script>
 
+<svelte:window on:keydown={handleKeydown}/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
+
 <style>
 	div {
 		display: flex;
@@ -29,14 +40,3 @@
 		color: #555;
 	}
 </style>
-
-<svelte:window on:keydown={handleKeydown}/>
-
-<div style="text-align: center">
-	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
-	{:else}
-		<p>Focus this window and press any key</p>
-	{/if}
-</div>

site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte

@@ -11,15 +11,15 @@
 	});
 </script>
 
+<!-- the text will flash red whenever
+     the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>
+
 <style>
 	div {
 		cursor: pointer;
 		line-height: 1.5;
 	}
 </style>
-
-<!-- the text will flash red whenever
-     the `todo` object changes -->
-<div bind:this={div} on:click>
-	{todo.done ? '👍': ''} {todo.text}
-</div>

site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte

@@ -13,15 +13,15 @@
 	});
 </script>
 
+<!-- the text will flash red whenever
+     the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>
+
 <style>
 	div {
 		cursor: pointer;
 		line-height: 1.5;
 	}
 </style>
-
-<!-- the text will flash red whenever
-     the `todo` object changes -->
-<div bind:this={div} on:click>
-	{todo.done ? '👍': ''} {todo.text}
-</div>

site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte

@@ -1,3 +1,9 @@
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -12,9 +18,3 @@
 		gap: 1em;
 	}
 </style>
-
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer"></slot>
-</div>

site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte

@@ -1,3 +1,9 @@
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
 <style>
 	.box {
 		width: 300px;
@@ -12,9 +18,3 @@
 		gap: 1em;
 	}
 </style>
-
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer"></slot>
-</div>

site/content/tutorial/16-special-elements/08-svelte-fragment/text.md

@@ -8,6 +8,12 @@ In the example notice how we applied a flex layout with a gap of `1em` to the bo
 
 ```sv
 <!-- Box.svelte -->
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
 <style>
 	.box {		
 		display: flex;
@@ -15,12 +21,6 @@ In the example notice how we applied a flex layout with a gap of `1em` to the bo
 		gap: 1em;
 	}
 </style>
-
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer"></slot>
-</div>
 ```
 
 However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.

site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte

@@ -17,13 +17,6 @@
 	}
 </script>
 
-<style>
-	article { margin: 0 0 1em 0; max-width: 800px }
-	h2, p { margin: 0 0 0.3em 0; }
-	audio { width: 100%; margin: 0.5em 0 1em 0; }
-	.playing { color: #ff3e00; }
-</style>
-
 <article class:playing={!paused}>
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
@@ -36,3 +29,18 @@
 		{src}
 	></audio>
 </article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>

site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte

@@ -25,13 +25,6 @@
 	}
 </script>
 
-<style>
-	article { margin: 0 0 1em 0; max-width: 800px }
-	h2, p { margin: 0 0 0.3em 0; }
-	audio { width: 100%; margin: 0.5em 0 1em 0; }
-	.playing { color: #ff3e00; }
-</style>
-
 <article class:playing={!paused}>
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
@@ -44,3 +37,18 @@
 		{src}
 	></audio>
 </article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>

site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte

@@ -31,13 +31,6 @@
 	}
 </script>
 
-<style>
-	article { margin: 0 0 1em 0; max-width: 800px }
-	h2, p { margin: 0 0 0.3em 0; }
-	audio { width: 100%; margin: 0.5em 0 1em 0; }
-	.playing { color: #ff3e00; }
-</style>
-
 <article class:playing={!paused}>
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
@@ -50,3 +43,18 @@
 		{src}
 	></audio>
 </article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>

site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte

@@ -33,6 +33,10 @@
 	});
 </script>
 
+{#each confetti as c}
+	<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
+{/each}
+
 <style>
 	:global(body) {
 		overflow: hidden;
@@ -43,7 +47,3 @@
 		font-size: 5vw;
 	}
 </style>
-
-{#each confetti as c}
-	<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
-{/each}