update: changed dither to use gif

src/app.css

@@ -17,3 +17,7 @@
   font-family: SF Mono, sans-serif;
 }
 
+.dither {
+  background-image: url('dither.gif');
+  background-repeat: repeat;
+}

src/lib/Feature/Tag/Tag.svelte

@@ -22,12 +22,8 @@
 <button class={container} on:click={filter}>{tagName}</button>
 
 <style>
-	@keyframes shake {
-  from {background-image:url('dither.png')}
-  to {background-image:url('dither2.png')}
-}
 	button:hover {
-		background-blend-mode: color dodge;
-		animation: shake 0.4s infinite;
-  }
+		background-image: url('dither.gif');
+		background-repeat: repeat;
+	}
 </style>

src/lib/Grid.svelte

@@ -22,12 +22,8 @@
 
 
 <style>
-	@keyframes shake {
-  from {background-image:url('dither.png')}
-  to {background-image:url('dither2.png')}
-}
 	img:hover {
-		background-blend-mode: color dodge;
-		animation: shake 0.4s infinite;
+		background-image: url('dither.gif');
+		background-repeat: repeat;
 	}
 </style>

src/lib/Layout/Filters.svelte

@@ -57,17 +57,8 @@
 </div>
 
 <style>
-	@keyframes shake {
-  from {background-image:url('dither.png')}
-  to {background-image:url('dither2.png')}
-}
 	select:hover {
-		background-blend-mode: color dodge;
-		animation: shake 0.4s infinite;
-	}
-
-	.dither {
-		background-blend-mode: color dodge;
-		animation: shake 0.4s infinite;
+		background-image: url('dither.gif');
+		background-repeat: repeat;
 	}
 </style>

src/lib/Layout/Header.svelte

@@ -8,12 +8,9 @@
 <a href="/" class={title} on:click={reset}> Rating Room </a>
 
 <style>
-		@keyframes shake {
-  from {background-image:url('dither.png')}
-  to {background-image:url('dither2.png')}
-}
+
 	a:hover {
-		background-blend-mode: color dodge;
-		animation: shake 0.4s infinite;
+		background-image: url('dither.gif');
+		background-repeat: repeat;
 	}
 </style>

src/lib/Layout/Products.svelte

@@ -24,13 +24,3 @@
 	{/each}
 </div>
 
-<style>
-		@keyframes shake {
-  from {background-image:url('dither.png')}
-  to {background-image:url('dither2.png')}
-}
-	.dither {
-		background-blend-mode: color dodge;
-		animation: shake 0.4s infinite;
-	}
-</style>

src/lib/Layout/SortOption.svelte

@@ -22,12 +22,8 @@
 </button>
 
 <style>
-	@keyframes shake {
-  from {background-image:url('dither.png')}
-  to {background-image:url('dither2.png')}
-}
 	button:hover {
-		background-blend-mode: color dodge;
-		animation: shake 0.4s infinite;
+		background-image: url('dither.gif');
+		background-repeat: repeat;
 	}
 </style>