svelte-jp
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/README.md
Lines changed: 13 additions & 4 deletions b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/README.md
Lines changed: 13 additions & 4 deletions
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/src/lib/App.svelte
Lines changed: 13 additions & 4 deletions b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/src/lib/App.svelte
Lines changed: 13 additions & 4 deletions
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/casablanca-antique.woff2
34.4 KB b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/casablanca-antique.woff2
34.4 KB
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/edge-of-the-galaxy.woff2
3.9 KB b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/edge-of-the-galaxy.woff2
3.9 KB
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/road-rage.woff2
165 KB b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/road-rage.woff2
165 KB
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/shlop.woff2
27.8 KB b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/shlop.woff2
27.8 KB
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/halloween.css
Lines changed: 26 additions & 0 deletions b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/halloween.css
Lines changed: 26 additions & 0 deletions
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/halloween.webp
302 KB b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/halloween.webp
302 KB
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/margaritaville.css
Lines changed: 21 additions & 0 deletions b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/margaritaville.css
Lines changed: 21 additions & 0 deletions
diff --git a/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/margaritaville.webp
307 KB b/‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/margaritaville.webp
307 KB
@@ -2,13 +2,22 @@
 title: <svelte:head>
 ---
 
-The `<svelte:head>` element allows you to insert elements inside the `<head>` of your document:
+The `<svelte:head>` element allows you to insert elements inside the `<head>` of your document. This is useful for things like `<title>` and `<meta>` tags, which are critical for good SEO.
+
+Since those are quite hard to show in the context of this tutorial, we'll use it for a different purpose — loading stylesheets.
 
 ```svelte
 /// file: App.svelte
-<svelte:head>
-	<link rel="stylesheet" href="tutorial/dark-theme.css">
-</svelte:head>
+<script>
+	const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
+	let selected = themes[0];
+</script>
+
++++<svelte:head>
+	<link rel="stylesheet" href="/stylesheets/{selected}.css" />
+</svelte:head>+++
+
+<h1>Welcome to my site!</h1>
 ```
 
 > In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.
@@ -1,5 +1,14 @@
-<svelte:head>
-	<!-- elements go here -->
-</svelte:head>
+<script>
+	const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
+	let selected = themes[0];
+</script>
 
-<h1>Hello world!</h1>
+<h1>Welcome to my site!</h1>
+
+<select bind:value={selected}>
+	<option disabled>choose a theme</option>
+
+	{#each themes as theme}
+		<option>{theme}</option>
+	{/each}
+</select>
@@ -0,0 +1,26 @@
+@font-face {
+	font-family: 'Schlop';
+	src: url('./fonts/shlop.woff2') format('woff2');
+}
+
+body {
+	display: flex; 
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: url(./halloween.webp) no-repeat 50% 50% fixed;
+	background-size: cover;
+}
+
+h1 {
+	font-size: min(8vw, 4rem);
+	filter: drop-shadow(2px 2px 10px black);
+	font-family: 'Schlop';
+	background: linear-gradient(
+		to bottom,
+		hsl(0, 100%, 77%) 0%,
+		hsl(0, 60%, 50%) 100%
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
@@ -0,0 +1,21 @@
+@font-face {
+	font-family: 'Casablanca Antique';
+	src: url('./fonts/casablanca-antique.woff2') format('woff2');
+}
+
+body {
+	display: flex; 
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: url(./margaritaville.webp) no-repeat 50% 50% fixed;
+	background-size: cover;
+}
+
+h1 {
+	font-size: min(8vw, 4rem);
+	filter: drop-shadow(1px 1px 4px black) drop-shadow(1px 1px 20px black);
+	font-family: 'Casablanca Antique';
+	font-variant: small-caps;
+	color: rgb(255, 226, 131);
+}