fix some icon animations

src/lib/components/Card.svelte

@@ -3,17 +3,13 @@ export let recipe
 export let current_month
 export let icon_override = false;
 export let search = "search_me"
+import "$lib/css/shake.css";
+import "$lib/css/icon.css";
 
 if(icon_override){
 	current_month = recipe.season[0]
 }
 
-// Winter: ❄️
-// Weihnachten: 🎄
-// Ostern: 🐇
-// Fastenzeit: ✝️
-// Herbst: 🍂
-// Sommer: ☀️
 </script>
 <style>
 .card{
@@ -34,18 +30,6 @@ if(icon_override){
 	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
 	transition: 200ms;
 }
-.card .icon{
-	text-decoration: unset;
-	transition: 100ms;
-	position: absolute;
-	font-size: 1.5rem;
-	top:-0.5em;
-	right:-0.5em;
-	padding: 0.25em;
-	background-color: var(--nord6);
-	border-radius:1000px;
-	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
-}
 .card:hover,
 .card:focus-within{
 	transform: scale(1.02,1.02);
@@ -55,17 +39,6 @@ if(icon_override){
 .card:active{
 	scale: 0.95 0.95;
 }
-.card .icon:hover,
-.card .icon:focus-visible
-{
-	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-	transform:scale(1.2, 1.2)
-}
-.icon:active{
-	scale: 0.8 0.8;
-	rotate: 30deg;
-}
-
 .card img{
 	height: 50%;
 	object-fit: cover;
@@ -115,7 +88,7 @@ if(icon_override){
 	line-height: 1.5em;
 	margin-bottom: 0.5em;
 	transition: 100ms;
-	box-shadow: 0.2em 0.2em 0.2em 0.05em rgba(0, 0, 0, 0.3);
+	box-shadow: 0em 0em 0.2em 0.05em rgba(0, 0, 0, 0.3);
 }
 .card .tag:hover,
 .card .tag:focus-visible
@@ -158,36 +131,6 @@ if(icon_override){
 {
 	animation:  shake 0.6s
 }
-
-  @keyframes shake{
-    0%{
-      transform: rotate(0)
-		scale(1,1);
-    }
-    25%{
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(30deg)
-      		scale(1.2,1.2)
-      ;
-    }
-    50%{
-
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(-30deg)
-      		scale(1.2,1.2);
-    }
-    74%{
-
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-  	transform: rotate(30deg)
-  		scale(1.2, 1.2);
-	}
-	100%{
-      transform: rotate(0)
-      	scale(1,1);
-    }
-  }
-
 </style>
 <a class="card {search}" href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
 {#if icon_override || recipe.season.includes(current_month)}

src/lib/components/CardAdd.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 
 import Cross from '$lib/assets/icons/Cross.svelte'
+import "$lib/css/shake.css"
+import "$lib/css/icon.css"
 
 // all data shared with rest of page in card_data
 export let card_data
@@ -15,12 +17,6 @@ if(!card_data.tags){
 let new_tag
 let image_preview_url
 
-// Winter: ❄️
-// Weihnachten: 🎄
-// Ostern: 🐇
-// Fastenzeit: ✝️
-// Herbst: 🍂
-// Sommer: ☀️
 
 export function show_local_image(){
 	var file = this.files[0]

src/lib/components/EditRecipe.svelte

@@ -3,6 +3,7 @@
 	import Cross from '$lib/assets/icons/Cross.svelte';
 	import SeasonSelect from '$lib/components/SeasonSelect.svelte';
 	import '$lib/css/action_button.css'
+	import '$lib/css/shake.css'
 	import { redirect } from '@sveltejs/kit';
 	import { RecipeModelType } from '../../types/types';
 

src/lib/components/IconLayout.svelte

@@ -14,7 +14,9 @@
 		border-radius: 1000px;
     		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
 	}
-	a:hover{
+	a:hover,
+	a:focus-visible
+	{
 		--angle: 15deg;
 		animation: shake 0.5s ease forwards;
 	}

src/lib/components/MediaScroller.svelte

@@ -1,5 +1,5 @@
 <script>
-import "$lib/components/nordtheme.css"
+import "$lib/css/nordtheme.css"
 export let title
 </script>
 <style>

src/lib/css/action_button.css

@@ -1,3 +1,6 @@
+:root{
+	--angle: 15deg;
+}
 .action_button{
 	border: none;
 	cursor: pointer;
@@ -22,7 +25,6 @@
 .action_button:active{
 	transition: 50ms;
 	scale: 0.8 0.8;
-	rotate: 30deg;
 }
 
 
@@ -33,20 +35,20 @@
     }
     25%{
     	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(15deg)
+      	transform: rotate(--angle)
       		scale(1.2,1.2)
       ;
     }
     50%{
 
     	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(-15deg)
+      	transform: rotate(calc(-1 * --angle))
       		scale(1.2,1.2);
     }
     74%{
 
     	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-  	transform: rotate(15deg)
+  	transform: rotate(--angle)
   		scale(1.2, 1.2);
 	}
 	100%{

src/lib/js/randomize.js

@@ -0,0 +1,17 @@
+const time = new Date()
+const MS_PER_DAY = 86400000
+let seed = Math.floor(time.getTime()/MS_PER_DAY)
+function mulberry32(a) {
+	return function() {
+	  var t = a += 0x6D2B79F5;
+	  t = Math.imul(t ^ t >>> 15, t | 1);
+	  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+	  return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	}
+}
+let rand = mulberry32(seed)
+
+export function rand_array(array){
+	array.sort((a,b) => 0.5 - rand())
+	return array
+}

src/routes/rezepte/+page.svelte

@@ -7,6 +7,7 @@
     	export let data: PageData;
     	export let current_month = new Date().getMonth() + 1
 	const all_categories = [ ...new Set (data.all_brief.map(item => item.category))];
+	import { rand_array } from '$lib/js/randomize';
 </script>
 <style>
 h1{
@@ -20,7 +21,7 @@ h1{
 <h1>Rezepte</h1>
 <section>
 <MediaScroller title="In Saison:">
-{#each data.season as recipe}
+{#each rand_array(data.season) as recipe}
 	<Card {recipe} {current_month} search=""></Card>
 {/each}
 </MediaScroller>
@@ -29,7 +30,7 @@ h1{
 
 {#each all_categories as category}
 	<MediaScroller title={category}>
-	{#each data.all_brief.filter(recipe => recipe.category == category) as recipe}
+	{#each rand_array(data.all_brief.filter(recipe => recipe.category == category)) as recipe}
 		<Card {recipe} {current_month}></Card>
 	{/each}
 	</MediaScroller>

src/routes/rezepte/category/[category]/+page.svelte

@@ -5,13 +5,14 @@
     export let data: PageData;
     export let current_month = new Date().getMonth() + 1;
     import Card from '$lib/components/Card.svelte'
+    import { rand_array } from '$lib/js/randomize';
 </script>
 <h1>Rezepte</h1>
 <h2>In Kategorie {data.category}</h2>
 <Search></Search>
 <section>
 <Recipes>
-	{#each data.recipes as recipe}
+	{#each rand_array(data.recipes) as recipe}
 		<Card {recipe} {current_month}></Card>
 	{/each}
 </Recipes>

src/routes/rezepte/icon/+page.svelte

@@ -17,7 +17,9 @@
 		border-radius: 1000px;
     		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
 	}
-	a:hover{
+	a:hover,
+	a:focus-visible
+	{
 		--angle: 15deg;
 		animation: shake 0.5s ease forwards;
 	}

src/routes/rezepte/icon/[icon]/+page.svelte

@@ -6,11 +6,12 @@
     import Card from '$lib/components/Card.svelte';
     import Search from '$lib/components/Search.svelte';
     export let data: PageData;
+    import { rand_array } from '$lib/js/randomize';
 </script>
 <IconLayout icons={data.icons}>
 <h2 slot=test>Rezepte mit {data.icon}</h2>
 <Recipes slot=recipes>
-	{#each data.season as recipe}
+	{#each rand_array(data.season) as recipe}
 		<Card {recipe} icon_override=true></Card>
 	{/each}
 </Recipes>

src/routes/rezepte/season/+page.svelte

@@ -8,12 +8,13 @@
     import Search from '$lib/components/Search.svelte';
     export let data: PageData;
     export let current_month = new Date().getMonth() + 1
+    import { rand_array } from '$lib/js/randomize';
 </script>
 
 <SeasonLayout>
 <h2 slot=test>Rezepte des Monats </h2>
 <Recipes slot=recipes>
-	{#each data.season as recipe}
+	{#each rand_array(data.season) as recipe}
 		<Card {recipe} {current_month}></Card>
 	{/each}
 </Recipes>

src/routes/rezepte/season/[month]/+page.svelte

@@ -7,11 +7,12 @@
     import Search from '$lib/components/Search.svelte';
     export let data: PageData;
     let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
+    import { rand_array } from '$lib/js/randomize';
 </script>
 <SeasonLayout>
 <h2 slot=test>Rezepte die im {months[data.month-1]} in Saison sind</h2>
 <Recipes slot=recipes>
-	{#each data.season as recipe}
+	{#each rand_array(data.season) as recipe}
 		<Card {recipe} icon_override=true></Card>
 	{/each}
 </Recipes>

src/routes/rezepte/tag/[tag]/+page.svelte

@@ -5,13 +5,14 @@
     export let current_month = new Date().getMonth() + 1;
     import Card from '$lib/components/Card.svelte'
     import Search from '$lib/components/Search.svelte';
+    import { rand_array } from '$lib/js/randomize';
 </script>
 <h1>Rezepte</h1>
 <h2>In Tag {data.tag}</h2>
 <Search></Search>
 <section>
 <Recipes>
-	{#each data.recipes as recipe}
+	{#each rand_array(data.recipes) as recipe}
 		<Card {recipe} {current_month}></Card>
 	{/each}
 	</Recipes>