nicer slot exercises

Author: Rich Harris

content/tutorial/03-advanced-svelte/07-composition/01-slots/README.md

@@ -11,21 +11,21 @@ Just like elements can have children...
 </div>
 ```
 
-...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Box.svelte`:
+...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Card.svelte`:
 
 ```svelte
-/// file: Box.svelte
-<div class="box">
+/// file: Card.svelte
+<div class="card ">
 	+++<slot />+++
 </div>
 ```
 
-You can now put things in the box:
+You can now put things on the card:
 
 ```svelte
 /// file: App.svelte
-<Box>
-	+++<h2>Hello!</h2>+++
-	+++<p>This is a box. It can contain anything.</p>+++
-</Box>
+<Card>
+	+++<span>Patrick BATEMAN</span>+++
+	+++<span>Vice President</span>+++
+</Card>
 ```

content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/src/lib/App.svelte

@@ -1,7 +1,18 @@
 <script>
-	import Box from './Box.svelte';
+	import Card from './Card.svelte';
 </script>
 
-<Box>
-	<!-- put content here -->
-</Box>
+<main>
+	<Card>
+		<!-- content goes here -->
+	</Card>
+</main>
+
+<style>
+	main {
+		display: grid;
+		place-items: center;
+		height: 100%;
+		background: url(./wood.svg);
+	}
+</style>

content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/src/lib/Box.svelte

@@ -0,0 +1,47 @@
+<div class="card">
+	<!-- slot goes here -->
+</div>
+
+<style>
+	@font-face {
+		src: url('/Garamond Classico SC Regular.woff2') format('woff2');
+		font-family: 'Silian Rail';
+		font-style: normal;
+		font-weight: 400;
+	}
+
+	.card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		font-size: min(2vw, 3.5vh, 1.5rem);
+		font-family: 'Silian Rail';
+		width: 24em;
+		aspect-ratio: 3.5 / 2.0;
+		background: url(./paper.svg);
+		border-radius: 2px;
+		filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2));
+		padding: 1.5em 1em 1em 1em;
+		font-variant: small-caps;
+		text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2), 1px 1px 2px white;
+		color: hsl(50, 20%, 35%);
+		line-height: 1.2;
+	}
+
+	header, footer {
+		width: 100%;
+		display: flex;
+		flex: 1;
+	}
+
+	header {
+		justify-content: space-between;
+	}
+
+	footer {
+		font-size: 0.7em;
+		justify-content: center;
+		align-items: end;
+	}
+</style>

content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/src/lib/Card.svelte

@@ -1,8 +1,19 @@
 <script>
-	import Box from './Box.svelte';
+	import Card from './Card.svelte';
 </script>
 
-<Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
-</Box>
+<main>
+	<Card>
+		<span>Patrick BATEMAN</span>
+		<span>Vice President</span>
+	</Card>
+</main>
+
+<style>
+	main {
+		display: grid;
+		place-items: center;
+		height: 100%;
+		background: url(./wood.svg);
+	}
+</style>

content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/src/lib/paper.svg

@@ -0,0 +1,47 @@
+<div class="card">
+	<slot />
+</div>
+
+<style>
+	@font-face {
+		src: url('/Garamond Classico SC Regular.woff2') format('woff2');
+		font-family: 'Silian Rail';
+		font-style: normal;
+		font-weight: 400;
+	}
+
+	.card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		font-size: min(2vw, 3.5vh, 1.5rem);
+		font-family: 'Silian Rail';
+		width: 24em;
+		aspect-ratio: 3.5 / 2.0;
+		background: url(./paper.svg);
+		border-radius: 2px;
+		filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2));
+		padding: 1.5em 1em 1em 1em;
+		font-variant: small-caps;
+		text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2), 1px 1px 2px white;
+		color: hsl(50, 20%, 35%);
+		line-height: 1.2;
+	}
+
+	header, footer {
+		width: 100%;
+		display: flex;
+		flex: 1;
+	}
+
+	header {
+		justify-content: space-between;
+	}
+
+	footer {
+		font-size: 0.7em;
+		justify-content: center;
+		align-items: end;
+	}
+</style>