Tighten up styles (#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>

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

@@ -0,0 +1,25 @@
+<button on:click>
+	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>

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

@@ -36,14 +36,3 @@
 </label>
 
 <p>{a} + {b} = {a + b}</p>
-
-<style>
-	label {
-		display: flex;
-	}
-
-	input,
-	p {
-		margin: 6px;
-	}
-</style>

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

@@ -36,14 +36,3 @@
 </label>
 
 <p>{a} + {b} = {a + b}</p>
-
-<style>
-	label {
-		display: flex;
-	}
-
-	input,
-	p {
-		margin: 6px;
-	}
-</style>

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

@@ -50,12 +50,4 @@
 	selected question {selected
 		? selected.id
 		: '[waiting...]'}
-</p>
-
-<style>
-	input {
-		display: block;
-		width: 500px;
-		max-width: 100%;
-	}
-</style>
+</p>

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

@@ -51,11 +51,3 @@
 		? selected.id
 		: '[waiting...]'}
 </p>
-
-<style>
-	input {
-		display: block;
-		width: 500px;
-		max-width: 100%;
-	}
-</style>

content/tutorial/01-svelte/06-bindings/02-numeric-inputs/app-a/src/lib/App.svelte

@@ -7,12 +7,7 @@
 	onInterval(callback, interval);
 </script>
 
-<p>
-	This component executes a callback every
-	{interval} millisecond{interval === 1
-		? ''
-		: 's'}
-</p>
+<p>This component executes a callback every {interval}ms</p>
 
 <style>
 	p {

content/tutorial/01-svelte/06-bindings/02-numeric-inputs/app-b/src/lib/App.svelte

@@ -46,10 +46,8 @@
 	.board > input {
 		font-size: 1.4em;
 		grid-column: 1/3;
-		border-radius: 5px;
-		background: #f4f4f4;
 		padding: 0.5em;
-		border: none;
+		margin: 0 0 1rem 0;
 	}
 
 	h2 {

content/tutorial/01-svelte/06-bindings/06-select-bindings/app-a/src/lib/App.svelte

@@ -46,11 +46,8 @@
 	.board > input {
 		font-size: 1.4em;
 		grid-column: 1/3;
-		border-radius: 5px;
-		background: #f4f4f4;
 		padding: 0.5em;
-		border: none;
-		color: black;
+		margin: 0 0 1rem 0;
 	}
 
 	h2 {

content/tutorial/01-svelte/06-bindings/06-select-bindings/app-b/src/lib/App.svelte

@@ -55,12 +55,15 @@
 
 <style>
 	canvas {
+		position: fixed;
+		left: 0;
+		top: 0;
 		width: 100%;
 		height: 100%;
 		background-color: #666;
-		-webkit-mask: url(svelte-logo-mask.svg) 50%
-			50% no-repeat;
-		mask: url(svelte-logo-mask.svg) 50% 50%
-			no-repeat;
+		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask-size: 40%;
+		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
+		-webkit-mask-size: 40%;
 	}
 </style>

content/tutorial/01-svelte/07-lifecycle/02-ondestroy/app-a/src/lib/Timer.svelte

@@ -59,12 +59,15 @@
 
 <style>
 	canvas {
+		position: fixed;
+		left: 0;
+		top: 0;
 		width: 100%;
 		height: 100%;
 		background-color: #666;
-		-webkit-mask: url(svelte-logo-mask.svg) 50%
-			50% no-repeat;
-		mask: url(svelte-logo-mask.svg) 50% 50%
-			no-repeat;
+		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask-size: 40%;
+		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
+		-webkit-mask-size: 40%;
 	}
 </style>