randomize order of recipes based on day

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/icon.css";
+import "$lib/css/shake.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/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
+}