Merge branch 'main' into french

bleucitron · Jan 13, 2025 · 69e732f · 69e732f
2 parents 0439981 + 17c672a
commit 69e732f
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/...e.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-a/src/lib/App.svelte b/...e.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-a/src/lib/App.svelte
@@ -36,6 +36,8 @@
 
 <style>
 	h1 {
+		font-size: 2rem;
+		font-weight: 700;
 		transition: color 0.2s;
 	}
 
@@ -53,6 +55,9 @@
 		transform: translate(-2px,-2px);
 		filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
 		transition: all 0.1s;
+		color: black;
+		font-weight: 700;
+		font-size: 2rem;
 	}
 
 	button[aria-current="true"] {

diff --git a/...e.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte b/...e.dev/content/tutorial/01-svelte/04-logic/04-each-blocks/+assets/app-b/src/lib/App.svelte
@@ -19,6 +19,8 @@
 <style>
 	h1 {
 		transition: color 0.2s;
+		font-size: 2rem;
+		font-weight: 700;
 	}
 
 	div {
@@ -35,6 +37,9 @@
 		transform: translate(-2px,-2px);
 		filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
 		transition: all 0.1s;
+		color: black;
+		font-weight: 700;
+		font-size: 2rem;
 	}
 
 	button[aria-current="true"] {

diff --git a/...orial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte b/...orial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
@@ -6,7 +6,7 @@
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: (t) => ``
+			css: (t, u) => ``
 		};
 	}
 </script>

diff --git a/...orial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte b/...orial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
@@ -7,15 +7,15 @@
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: (t) => {
+			css: (t, u) => {
 				const eased = elasticOut(t);
 
 				return `
 					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
 						${Math.trunc(t * 360)},
-						${Math.min(100, 1000 * (1 - t))}%,
-						${Math.min(50, 500 * (1 - t))}%
+						${Math.min(100, 1000 * u)}%,
+						${Math.min(50, 500 * u)}%
 					);`;
 			}
 		};

diff --git a/...ev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md b/...ev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
@@ -53,15 +53,15 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: t => +++{
+			css: (t, u) => +++{
 				const eased = elasticOut(t);
 
 				return `
 					transform: scale(${eased}) rotate(${eased * 1080}deg);
 					color: hsl(
 						${Math.trunc(t * 360)},
-						${Math.min(100, 1000 * (1 - t))}%,
-						${Math.min(50, 500 * (1 - t))}%
+						${Math.min(100, 1000 * u)}%,
+						${Math.min(50, 500 * u)}%
 					);`
 			}+++
 		};