Merge pull request #52 from zschaffer/hoverStyles

update: changed all hover styles to blue dither

src/lib/Feature/Tag/Tag.svelte

@@ -14,9 +14,20 @@
 	}
 
   const { container } = {
-    container: 'text-sm flex rounded-md pl-2 pr-2 pt-1 pb-1 bg-gray-200 hover:bg-blue-300'
+    container: 'text-sm flex rounded-md pl-2 pr-2 pt-1 pb-1 bg-gray-200'
   }
 
 </script>
 
-<button class={container} on:click={filter}>{tagName}</button>
+<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;
+  }
+</style>

src/lib/Grid.svelte

@@ -14,8 +14,20 @@
 	{#each products as product}
 			<button on:click={() => toProduct(product, currentProduct)} >
 				{#if product.image}
-					<img src={urlFor(product.image).width(150).url()} alt={product.name} />
+					<img src={urlFor(product.image).width(150).url()} alt={product.name}/>
 				{/if}
 			</button>
 	{/each}
 </div>
+
+
+<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;
+	}
+</style>

src/lib/Layout/Filters.svelte

@@ -39,7 +39,7 @@
 		<button on:click={reset}> ✖️ </button>
 	</div>
 
-	<select on:change={filter} class={`p-1 pl-9  mr-12 hover:bg-blue-300 w-full focus:outline-none ${$filters.selectedCat? 'bg-blue-300':''}`}
+	<select on:change={filter} class={`p-1 pl-9  mr-12 w-full focus:outline-none ${$filters.selectedCat? 'dither':''}`}
 	name="category" bind:value={$filters.selectedCat}>
 		<option select="selected" value={0}>Category</option>
 		{#each $tags as tag (tag.name)}
@@ -47,7 +47,7 @@
 		{/each}
 	</select>
 
-	<select on:change={filter} class={`p-1 pl-9  mr-12 hover:bg-blue-300 w-full focus:outline-none ${$filters.selectedRating? 'bg-blue-300':''}`}
+	<select on:change={filter} class={`p-1 pl-9  mr-12 w-full focus:outline-none ${$filters.selectedRating? 'dither':''}`}
 	 name="rating" bind:value={$filters.selectedRating}>
 		<option select="selected" value={0}>Rating</option>
 		{#each stars as starValue, i (starValue)}
@@ -55,3 +55,19 @@
 		{/each}
 	</select>
 </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;
+	}
+</style>

src/lib/Layout/Header.svelte

@@ -1,8 +1,19 @@
 <script>
 	export let reset;
 	const { title } = {
-		title: 'hover:bg-blue-300 text-lg font-bold p-12 pl-12 pt-11 snap-start sticky top-0 bg-white h-28 shadow-sm shadow-white'
+		title: 'text-lg font-bold p-12 pl-12 pt-11 snap-start sticky top-0 bg-white h-28 shadow-sm shadow-white'
 	};
 </script>
 
 <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;
+	}
+</style>

src/lib/Layout/Products.svelte

@@ -15,7 +15,7 @@
 		<button class={productStyle} on:click={() => toProduct(product, currentProduct)}>
 			<p
 				class={`pl-10 hover:bg-gray-200 ${
-					$currentProduct && $currentProduct.name === product.name ? 'bg-blue-300' : ''
+					$currentProduct && $currentProduct.name === product.name ? 'dither' : ''
 				} text-sm`}
 			>
 				{product.name}
@@ -23,3 +23,14 @@
 		</button>
 	{/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

@@ -4,7 +4,7 @@
 	let current = true;
 
 	const { sortOption, noPointer } = {
-		sortOption: 'flex p-1 pl-9  mr-12 hover:bg-blue-300 w-full flex justify-between',
+		sortOption: 'flex p-1 pl-9 mr-12 w-full flex justify-between',
 		noPointer: 'pointer-events-none'
 	};
 </script>
@@ -20,3 +20,14 @@
 	<p class={noPointer}>{option}</p>
 	<p class={noPointer}>{current ? '▲' : '▼'}</p>
 </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;
+	}
+</style>