Clean up css

Author: geoffrich

README.md

@@ -9,3 +9,5 @@ TODO:
 - remove React-isms (useX)
 - clean up console logs
 - layout shifting during transition
+- instead of shared-element class, data- attributes?
+- better way instead of having to register per-page -- possibly call prepare functions with {from, to} allowlist

src/app.css

@@ -5,4 +5,5 @@
 
 .shared-element {
 	contain: paint;
+	page-transition-tag: var(--transition-tag);
 }

src/lib/Icon.svelte

@@ -17,9 +17,3 @@
 		/>
 	</div>
 </div>
-
-<style>
-	img {
-		page-transition-tag: var(--transition-tag);
-	}
-</style>

src/lib/ListItem.svelte

@@ -11,9 +11,3 @@
 		<div class="text-xl shared-element" style:--transition-tag="h-{item.name}">{item.name}</div>
 	</a>
 </li>
-
-<style>
-	div {
-		page-transition-tag: var(--transition-tag);
-	}
-</style>

src/routes/fruits/[name].svelte

@@ -32,13 +32,3 @@
 		<Nutrition {amountPer} {nutrition} />
 	</div>
 </div>
-
-<style>
-	img {
-		page-transition-tag: var(--transition-tag);
-	}
-
-	h1 {
-		page-transition-tag: var(--transition-tag);
-	}
-</style>