Tighten up styles (sveltejs#278)

* update styles

* update exercise

* remove duplicate file

* more styles

* nicer styles

* more tweaks

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte

@@ -13,11 +13,3 @@
 	<a {href}>npm</a>
 	and <a href={website}>learn more here</a>
 </p>
-
-<style>
-	code {
-		font-family: Menlo;
-		padding: 0.1em 0.2em;
-		border-radius: 0.2em;
-	}
-</style>

content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-a/src/lib/Thing.svelte

@@ -15,26 +15,4 @@
 	const emoji = emojis[name];
 </script>
 
-<p>
-	<span>The emoji for {name} is {emoji}</span>
-</p>
-
-<style>
-	p {
-		margin: 0.8em 0;
-	}
-
-	span {
-		display: inline-block;
-		padding: 0.2em 1em 0.3em;
-		text-align: center;
-		border-radius: 0.2em;
-		background-color: #ffdfd3;
-	}
-
-	@media (prefers-color-scheme: dark) {
-		span {
-			background-color: #4f352b;
-		}
-	}
-</style>
+<p>{emoji} = {name}</p>

content/tutorial/01-svelte/05-events/01-dom-events/app-a/src/lib/App.svelte

@@ -13,7 +13,11 @@
 
 <style>
 	div {
+		position: fixed;
+		left: 0;
+		top: 0;
 		width: 100%;
 		height: 100%;
+		padding: 1rem;
 	}
 </style>

content/tutorial/01-svelte/05-events/01-dom-events/app-b/src/lib/App.svelte

@@ -13,7 +13,11 @@
 
 <style>
 	div {
+		position: fixed;
+		left: 0;
+		top: 0;
 		width: 100%;
 		height: 100%;
+		padding: 1rem;
 	}
 </style>

content/tutorial/01-svelte/05-events/02-inline-handlers/app-a/src/lib/App.svelte

@@ -12,7 +12,11 @@
 
 <style>
 	div {
+		position: fixed;
+		left: 0;
+		top: 0;
 		width: 100%;
 		height: 100%;
+		padding: 1rem;
 	}
 </style>

content/tutorial/01-svelte/05-events/02-inline-handlers/app-b/src/lib/App.svelte

@@ -4,10 +4,10 @@ title: DOM event forwarding
 
 Event forwarding works for DOM events too.
 
-We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
+We want to get notified of clicks on our `<BigRedButton>` — to do that, we just need to forward `click` events on the `<button>` element in `BigRedButton.svelte`:
 
 ```svelte
 <button +++on:click+++>
-	Click me
+	Push
 </button>
 ```

content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md

@@ -1,9 +1,13 @@
 <script>
-	import CustomButton from './CustomButton.svelte';
+	import BigRedButton from './BigRedButton.svelte';
+	import horn from './horn.mp3';
+
+	const audio = new Audio();
+	audio.src = horn;
 
 	function handleClick() {
-		alert('Button Clicked');
+		audio.play();
 	}
 </script>
 
-<CustomButton on:click={handleClick} />
+<BigRedButton on:click={handleClick} />

content/tutorial/01-svelte/05-events/06-dom-event-forwarding/app-a/src/lib/App.svelte

@@ -0,0 +1,25 @@
+<button>
+	Push
+</button>
+
+<style>
+	button {
+		font-size: 1.4em;
+		width: 6em;
+		height: 6em;
+		border-radius: 50%;
+		background: radial-gradient(circle at 25% 25%, hsl(0, 100%, 50%) 0, hsl(0, 100%, 40%) 100%);
+		box-shadow: 0 8px 0 hsl(0, 100%, 30%), 2px 12px 10px rgba(0,0,0,.35);
+		color: hsl(0, 100%, 30%);
+		text-shadow: -1px -1px 2px rgba(0,0,0,0.3), 1px 1px 2px rgba(255,255,255,0.4);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		transform: translate(0, -8px);
+		transition: all 0.2s;
+	}
+
+	button:active {
+		transform: translate(0, -2px);
+		box-shadow: 0 2px 0 hsl(0, 100%, 30%), 2px 6px 10px rgba(0,0,0,.35);
+	}
+</style>