tidy up

Rich Harris · Rich Harris · commit 9b2d1530b72c · 2023-04-03T16:50:26.000-04:00
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-body/README.md b/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-body/README.md
@@ -4,12 +4,14 @@ title: <svelte:body>
 
 Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
 
-Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
+Add these `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag...
 
 ```svelte
 /// file: App.svelte
 <svelte:body
-	on:mouseenter={handleMouseenter}
-	on:mouseleave={handleMouseleave}
+	+++on:mouseenter={() => hereKitty = true}+++
+	+++on:mouseleave={() => hereKitty = false}+++
 />
 ```
+
+...and hover over the `<body>`.
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-body/app-a/src/lib/App.svelte b/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-body/app-a/src/lib/App.svelte
@@ -1,10 +1,7 @@
 <script>
-	let hereKitty = false;
+	import kitten from './kitten.png';
 
-	const handleMouseenter = () =>
-		(hereKitty = true);
-	const handleMouseleave = () =>
-		(hereKitty = false);
+	let hereKitty = false;
 </script>
 
 <svelte:body />
@@ -13,15 +10,15 @@
 <img
 	class:curious={hereKitty}
 	alt="Kitten wants to know what's going on"
-	src="/kitten.png"
+	src={kitten}
 />
 
 <style>
 	img {
 		position: absolute;
 		left: 0;
 		bottom: -60px;
-		transform: translate(-80%, 0) rotate(-30deg);
+		transform: translate(-80%, 0) rotate(-15deg);
 		transform-origin: 100% 100%;
 		transition: transform 0.4s;
 	}
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-body/app-a/src/lib/kitten.png b/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-body/app-a/src/lib/kitten.png
diff --git a/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-body/app-b/src/lib/App.svelte b/content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-body/app-b/src/lib/App.svelte
@@ -1,29 +1,27 @@
 <script>
-	let hereKitty = false;
+	import kitten from './kitten.png';
 
-	const handleMouseenter = () =>
-		(hereKitty = true);
-	const handleMouseleave = () =>
-		(hereKitty = false);
+	let hereKitty = false;
 </script>
 
 <svelte:body
-	on:mouseenter={handleMouseenter}
-	on:mouseleave={handleMouseleave} />
+	on:mouseenter={() => hereKitty = true}
+	on:mouseleave={() => hereKitty = false}
+/>
 
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
 	class:curious={hereKitty}
 	alt="Kitten wants to know what's going on"
-	src="/kitten.png"
+	src={kitten}
 />
 
 <style>
 	img {
 		position: absolute;
 		left: 0;
 		bottom: -60px;
-		transform: translate(-80%, 0) rotate(-30deg);
+		transform: translate(-80%, 0) rotate(-15deg);
 		transform-origin: 100% 100%;
 		transition: transform 0.4s;
 	}
