src/lib/components/IconLayout.svelte

@@ -3,7 +3,6 @@
     import Recipes from '$lib/components/Recipes.svelte';
     import Search from './Search.svelte';
     export let icons
-    export let active_icon
 </script>
 
 <style>
@@ -16,12 +15,10 @@
     		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
 	}
 	a:hover,
-	a:focus-visible,
+	a:focus-visible
-	.active
 	{
 		--angle: 15deg;
 		animation: shake 0.5s ease forwards;
-		background-color: var(--nord2);
 	}
 	.flex{
 		display:flex;
@@ -64,10 +61,11 @@
   }
 
 </style>
+<slot name="test"></slot>
 
 <div class=flex>
-{#each icons as icon, i}
+{#each icons as icon}
-	<a class:active={active_icon == icon} href="/rezepte/icon/{icon}">{icon}</a>
+	<a href="/rezepte/icon/{icon}">{icon}</a>
 {/each}
 </div>
 <section>

src/lib/components/IngredientsPage.svelte

@@ -58,22 +58,18 @@ function findGCD(a, b) {
   return findGCD(b, a % b);
 }
 
-// "1-2 Kuchen (Durchmesser: 26cm", constant=2 ->  "2-4 Kuchen (Durchmesser: 26cm)"
+// For portions, not sure whether to keep or let it be
-function multiplyFirstAndSecondNumbers(inputString, constant) {
+function multiplyFirstNumberInString(inputString, constant) {
-  const regex = /(\d+(?:[\.,]\d+)?)(\s*-\s*\d+(?:[\.,]\d+)?)?/;
+  const firstNumberRegex = /\d+(?:[\.,]\d+)?/;
-  return inputString.replace(regex, (match, firstNumber, secondNumber) => {
+  const match = inputString.match(firstNumberRegex);
-    const numbersToMultiply = [firstNumber];
+  if (match) {
-    if (secondNumber) {
+    const number = match[0].includes(',') ? match[0].replace(/\./g, '').replace(',', '.') : match[0];
-      numbersToMultiply.push(secondNumber.replace(/-\s*/, ''));
-    }
-    const multipliedNumbers = numbersToMultiply.map(number => {
     const multiplied = (parseFloat(number) * constant).toString();
     const rounded = parseFloat(multiplied).toString();
-      const result = number.includes(',') ? rounded.replace('.', ',') : rounded;
+    const result = match[0].includes(',') ? rounded.replace('.', ',') : rounded;
-      return result;
+    return inputString.replace(firstNumberRegex, result);
-    });
+  }
-    return multipliedNumbers.join('-')
+  return inputString;
-  });
 }
 
 function adjust_amount(string, multiplier){
@@ -134,7 +130,7 @@ button.selected{
 <div class=ingredients>
 {#if data.portions}
 	<h3>Portionen:</h3>
-	{@html convertFloatingPointToFraction(multiplyFirstAndSecondNumbers(data.portions, multiplier))}
+	{@html convertFloatingPointToFraction(multiplyFirstNumberInString(data.portions, multiplier))}
 {/if}
 
 <h3>Menge anpassen:</h3>

src/lib/components/SeasonLayout.svelte

@@ -4,10 +4,8 @@
     import Search from './Search.svelte';
     let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
     let month : number;
-    export let active_index;
-    console.log(active_index)
-
 </script>
+
 <style>
 a.month{
 	text-decoration: unset;
@@ -20,11 +18,9 @@ a.month{
 	min-width: 4em;
 	text-align: center;
 }
-a.month:hover,
+a.month:hover{
-.active
+	transform: scale(1.1,1.1);
-{
+	background-color: var(--red);
-	transform: scale(1.1,1.1) !important;
-	background-color: var(--red) !important;
 }
 .months{
 	display:flex;
@@ -36,9 +32,11 @@ a.month:hover,
 }
 </style>
 
+<slot name="test"></slot>
+
 <div class=months>
 {#each months as month, i}
-	<a class:active={i == active_index}  class=month href="/rezepte/season/{i+1}">{month}</a>
+	<a class=month href="/rezepte/season/{i+1}">{month}</a>
 {/each}
 </div>
 <section>

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

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

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

@@ -11,7 +11,8 @@
     import { rand_array } from '$lib/js/randomize';
 </script>
 
-<SeasonLayout active_index={current_month-1}>
+<SeasonLayout>
+<h2 slot=test>Rezepte des Monats </h2>
 <Recipes slot=recipes>
 	{#each rand_array(data.season) as recipe}
 		<Card {recipe} {current_month}></Card>

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

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