From 538e07dee96635ac8593b99397918b4843e72b28 Mon Sep 17 00:00:00 2001
From: Babak F <babak.bxf@gmail.com>
Date: Wed, 21 Apr 2021 12:23:32 -0700
Subject: [PATCH] Fix HTML and CSS order and format CSS.

---
 .../app-a/BlueThing.svelte                    | 10 +++---
 .../app-a/GreenThing.svelte                   | 10 +++---
 .../02-svelte-component/app-a/RedThing.svelte | 10 +++---
 .../app-b/BlueThing.svelte                    | 10 +++---
 .../app-b/GreenThing.svelte                   | 10 +++---
 .../02-svelte-component/app-b/RedThing.svelte | 10 +++---
 .../03-svelte-window/app-a/App.svelte         | 32 +++++++++----------
 .../03-svelte-window/app-b/App.svelte         | 30 ++++++++---------
 .../app-a/App.svelte                          |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../07-svelte-options/app-a/Todo.svelte       | 14 ++++----
 .../07-svelte-options/app-b/Todo.svelte       | 14 ++++----
 .../08-svelte-fragment/app-a/App.svelte       |  2 +-
 .../08-svelte-fragment/app-a/Box.svelte       | 16 +++++-----
 .../08-svelte-fragment/app-b/App.svelte       |  2 +-
 .../08-svelte-fragment/app-b/Box.svelte       | 16 +++++-----
 .../08-svelte-fragment/text.md                | 12 +++----
 .../01-sharing-code/app-b/AudioPlayer.svelte  | 24 +++++++++-----
 .../app-a/AudioPlayer.svelte                  | 24 +++++++++-----
 .../app-b/AudioPlayer.svelte                  | 24 +++++++++-----
 .../01-congratulations/app-a/App.svelte       | 10 +++---
 21 files changed, 160 insertions(+), 124 deletions(-)

diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
index f9130d9d65..eb7ba64163 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: blue; }
-</style>
+<strong>Blue thing</strong>
 
-<strong>blue thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
index 9cbee235d3..ed2aa49f27 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: green; }
-</style>
+<strong>Green thing</strong>
 
-<strong>green thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
index 42f5e4c672..365f226492 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: red; }
-</style>
+<strong>Red thing</strong>
 
-<strong>red thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
index f9130d9d65..eb7ba64163 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: blue; }
-</style>
+<strong>Blue thing</strong>
 
-<strong>blue thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
index 9cbee235d3..ed2aa49f27 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: green; }
-</style>
+<strong>Green thing</strong>
 
-<strong>green thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
index 42f5e4c672..365f226492 100644
--- a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
@@ -1,5 +1,7 @@
-<style>
-	strong { color: red; }
-</style>
+<strong>Red thing</strong>
 
-<strong>red thing</strong>
\ No newline at end of file
+<style>
+	strong {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
index 9fe2bf526c..24c9a6368a 100644
--- a/site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
+++ b/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;
@@ -22,21 +33,10 @@
 		border-radius: 4px;
 		font-size: 6em;
 		padding: 0.2em 0.5em;
-		border-top: 5px solid rgba(255,255,255,0.5);
-		border-left: 5px solid rgba(255,255,255,0.5);
-		border-right: 5px solid rgba(0,0,0,0.2);
-		border-bottom: 5px solid rgba(0,0,0,0.2);
+		border-top: 5px solid rgba(255, 255, 255, 0.5);
+		border-left: 5px solid rgba(255, 255, 255, 0.5);
+		border-right: 5px solid rgba(0, 0, 0, 0.2);
+		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
 		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>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
index 845d666dff..026dfa94f7 100644
--- a/site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
+++ b/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;
@@ -22,21 +33,10 @@
 		border-radius: 4px;
 		font-size: 6em;
 		padding: 0.2em 0.5em;
-		border-top: 5px solid rgba(255,255,255,0.5);
-		border-left: 5px solid rgba(255,255,255,0.5);
-		border-right: 5px solid rgba(0,0,0,0.2);
-		border-bottom: 5px solid rgba(0,0,0,0.2);
+		border-top: 5px solid rgba(255, 255, 255, 0.5);
+		border-left: 5px solid rgba(255, 255, 255, 0.5);
+		border-right: 5px solid rgba(0, 0, 0, 0.2);
+		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
 		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>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
index 04b4de5cf2..ba51140ff4 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
@@ -85,4 +85,4 @@
 		padding: 0;
 		background-color: rgb(253, 174, 51);
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
index 15c2aa0ebc..2fc076b991 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
@@ -85,4 +85,4 @@
 		padding: 0;
 		background-color: rgb(253, 174, 51);
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
index 5e0dbca300..57d4dcc79a 100644
--- a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
+++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
@@ -11,15 +11,15 @@
 	});
 </script>
 
-<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>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
index e7ddcedc47..fa81d35989 100644
--- a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
+++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
@@ -13,15 +13,15 @@
 	});
 </script>
 
-<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>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
index 35f2586857..442ff07d26 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
@@ -7,4 +7,4 @@
 		<p>All rights reserved.</p>
 		<p>Copyright (c) 2019 Svelte Industries</p>
 	</div>
-</Box>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
index 16c17f90ef..ed389182a7 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
@@ -1,9 +1,15 @@
+<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;
 		border: 1px solid #aaa;
 		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
 		padding: 1em;
 		margin: 0 0 1em 0;
 		
@@ -11,10 +17,4 @@
 		flex-direction: column;
 		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>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
index 6f55903ece..e66b026d90 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
@@ -7,4 +7,4 @@
 		<p>All rights reserved.</p>
 		<p>Copyright (c) 2019 Svelte Industries</p>
 	</svelte:fragment>
-</Box>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
index 16c17f90ef..ed389182a7 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
@@ -1,9 +1,15 @@
+<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;
 		border: 1px solid #aaa;
 		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
 		padding: 1em;
 		margin: 0 0 1em 0;
 		
@@ -11,10 +17,4 @@
 		flex-direction: column;
 		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>
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
index fca7aeb844..2103404799 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
+++ b/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.
diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
index 609f9f1af0..3352074a2c 100644
--- a/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
+++ b/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>
@@ -35,4 +28,19 @@
 		controls
 		{src}
 	></audio>
-</article>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
index 27dbe1993b..90f3c67551 100644
--- a/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
+++ b/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>
@@ -43,4 +36,19 @@
 		controls
 		{src}
 	></audio>
-</article>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
index 4e3d191dbf..f28e8b0c7f 100644
--- a/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
+++ b/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>
@@ -49,4 +42,19 @@
 		controls
 		{src}
 	></audio>
-</article>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte b/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
index 2e72fafe23..b1bd64dea0 100644
--- a/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
+++ b/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;
@@ -42,8 +46,4 @@
 		position: absolute;
 		font-size: 5vw;
 	}
-</style>
-
-{#each confetti as c}
-	<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
-{/each}
\ No newline at end of file
+</style>
\ No newline at end of file