Update build process

src/lib/components/CardAdd.svelte

@@ -340,7 +340,7 @@ input::placeholder{
 
 <div class=card href="" >
 
-	<input class=icon placeholder=😀 bind:value={card_data.icon}/>
+	<input class=icon placeholder=🥫 bind:value={card_data.icon}/>
 	{#if image_preview_url}
 		<img src={image_preview_url} class=img_preview width=300px height=300px />
 	{/if}

src/lib/components/CreateIngredientList.svelte

@@ -109,10 +109,13 @@ export function show_keys(event){
 
 <style>
 input::placeholder{
-	all:unset;
+	color: inherit;
 }
 input{
-	all:unset;
+	color: unset;
+	font-size: unset;
+	padding: unset;
+	background-color: unset;
 }
 
 input.heading{
@@ -170,7 +173,7 @@ input.heading:hover{
 	bottom: -1.5rem;
 }
 .category{
-	all: unset;
+	border: none;
 	position: absolute;
 	--font_size: 1.5rem;
 	top: -1em;
@@ -292,6 +295,8 @@ h3{
 	flex-direction: row;
 	max-width: 1000px;
 	justify-content: space-between;
+	user-select: none;
+	cursor: pointer;
 }
 .ingredients_grid{
 	box-sizing: border-box;
@@ -307,6 +312,7 @@ h3{
 
 .ingredients_grid > *{
 	cursor: pointer;
+	user-select: none;
 }
 .ingredients_grid>*:nth-child(3n+1){
 	min-width: 5ch;
@@ -346,7 +352,7 @@ h3{
 
 <h2>Zutaten</h2>
 {#each ingredients as list, list_index}
-	<h3>
+	<h3 on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
 	<div>
 	{#if list.name }
 		{list.name}
@@ -388,11 +394,11 @@ h3{
 	<h2>Zutat verändern</h2>
 	<div class=adder>
 	<input class=category type="text" bind:value={edit_ingredient.sublist} placeholder="Kategorie (optional)">
-	<div class=add_ingredient on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-	<input type="text" placeholder="250..." bind:value={edit_ingredient.amount} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-	<input type="text" placeholder="mL..." bind:value={edit_ingredient.unit} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
+	<div class=add_ingredient on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<input type="text" placeholder="250..." bind:value={edit_ingredient.amount} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<input type="text" placeholder="mL..." bind:value={edit_ingredient.unit} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
 	<input type="text" placeholder="Milch..." bind:value={edit_ingredient.name} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
-	<button class=action_button on:click={edit_ingredient_and_close_modal}>
+	<button class=action_button on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)} on:click={edit_ingredient_and_close_modal}>
 		<Check fill=white style="width: 2rem; height: 2rem;"></Check>
 		</button>
 	</div>
@@ -402,8 +408,8 @@ h3{
 <dialog id=edit_subheading_ingredient_modal>
 	<h2>Kategorie umbenennen</h2>
 	<div class=heading_wrapper>
-		<input class=heading type="text" bind:value={edit_heading.name} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-		<button class=action_button on:click={edit_subheading_and_close_modal}>
+		<input class=heading type="text" bind:value={edit_heading.name} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} >
+		<button class=action_button on:keypress={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} on:click={edit_subheading_and_close_modal}>
 		<Check fill=white style="width:2rem; height:2rem;"></Check>
 		</button>
 	</div>

src/lib/components/CreateStepList.svelte

@@ -129,6 +129,7 @@ li > div{
 	flex-direction: row;
 	justify-items: space-between;
 	align-items:center;
+	user-select: none;
 }
 li > div > div:first-child{
 	flex-grow: 1;
@@ -139,7 +140,6 @@ li > div > div:last-child{
 	flex-direction: row;
 }
 input.heading{
-	all: unset;
 	box-sizing: border-box;
 	background-color: var(--nord0);
 	padding: 1rem;
@@ -197,8 +197,8 @@ dialog .adder{
 	bottom: -1.5rem;
 }
 .category{
-	all: unset;
 	position: absolute;
+	border: none;
 	--font_size: 1.5rem;
 	top: -1em;
 	left: -1em;
@@ -266,6 +266,10 @@ dialog h2{
 		drop-shadow(0 0 1em black)
 		;
 }
+dialog .adder input::placeholder{
+	font-size: 1.2rem;
+}
+
 @media screen and (max-width: 500px){
 	dialog h2{
 		margin-top: 2rem;
@@ -277,9 +281,6 @@ dialog h2{
 	dialog .adder .category{
 		width: 70%;
 	}
-	dialog .adder input::placeholder{
-		font-size: 1.2rem;
-	}
 }
 dialog[open]{
     animation: show 200ms ease forwards;
@@ -346,6 +347,8 @@ h4{
 h3{
 	display:flex;
 	gap: 1rem;
+	cursor: pointer;
+	user-select: none;
 }
 .additional_info input{
 	all:unset;
@@ -409,7 +412,7 @@ h3{
 
 <h2>Zubereitung</h2>
 {#each instructions as list, list_index}
-	<h3>
+	<h3 on:click={() => show_modal_edit_subheading_step(list_index)}>
 	{#if list.name}
 		{list.name}
 	{:else}
@@ -454,7 +457,7 @@ h3{
 	<div class=adder>
 	<input class=category type="text" bind:value={edit_step.name} placeholder="Unterkategorie (optional)" on:keypress={(event) => do_on_key(event, 'Enter', false , edit_step_and_close_modal)}>
 	<div class=add_step>
-		<p id=step contenteditable bind:innerHTML={edit_step.step} on:keypress={(event) => do_on_key(event, 'Enter', true , edit_step_and_close_modal)}></p>
+		<p id=step contenteditable bind:innerText={edit_step.step} on:keypress={(event) => do_on_key(event, 'Enter', true , edit_step_and_close_modal)}></p>
 	<button class=action_button on:click="{() => edit_step_and_close_modal()}" >
 		<Check fill=white style="height: 2rem; width: 2rem"></Check>
 	</button>

src/lib/components/MediaScroller.svelte

@@ -1,5 +1,6 @@
 <script>
 import "$lib/components/nordtheme.css"
+export let title
 </script>
 <style>
 .media-scroller {
@@ -9,11 +10,24 @@ import "$lib/components/nordtheme.css"
   overflow-x: auto;
   gap: 2rem;
   padding: 3rem;
+}
+.wrapper{
   background-color: var(--nord2);
 }
+h2{
+	color: var(--nord6);
+	padding-top: 2rem;
+ 	margin: 1em 0em 0em 4rem;
+	font-size: 3rem;
+}
 
 
 </style>
+<div class=wrapper>
+{#if title}
+	<h2>{title}</h2>
+{/if}
 <div class="media-scroller snaps-inline">
 	<slot></slot>
 </div>
+</div>

src/lib/components/Recipes.svelte

@@ -1,13 +1,36 @@
-
+<script>
+export let title
+let overflow
+</script>
 <style>
+
 .wrapper{
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: 3rem;
+	gap: 2.5rem;
 	justify-content: center;
 }
+h2{
+	max-width: 1000px;
+	margin-left: 5rem;
+	margin-bottom: 0;
+	font-size: 3rem;
+	margin-bottom: 1rem;
+}
+section:not(:has(h2)){
+	padding-top: 4rem;
+}
+section{
+	overflow: hidden;
+	padding-bottom: 3.7rem;
+}
 </style>
+<section>
+{#if title}
+	<h2>{title}</h2>
+{/if}
 <div class=wrapper>
 	<slot></slot>
 </div>
+</section>

src/lib/components/SeasonSelect.svelte

@@ -2,6 +2,7 @@
 import "$lib/components/nordtheme.css"
 import { season } from '$lib/js/season_store.js'
 import {onMount} from "svelte";
+    import {do_on_key} from "./do_on_key";
 let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
 
 
@@ -30,6 +31,9 @@ function write_season(season){
 	}
 }
 
+function toggle_checkbox_on_key(event){
+	event.path[0].children[0].checked = !event.path[0].children[0].checked
+}
 onMount(() => {
 	write_season(season_local)
 });
@@ -44,15 +48,20 @@ label{
 	cursor: pointer;
 	position: relative;
 	transition: 100ms;
+	user-select: none;
 }
 
 .checkbox_container{
 	transition: 100ms;
 }
-.checkbox_container:hover{
+.checkbox_container:hover,
+.checkbox_container:focus-within
+{
 	transform: scale(1.1,1.1);
 }
-label:hover{
+label:hover,
+label:focus-visible
+{
 	background-color: var(--lightblue);
 }
 
@@ -64,6 +73,7 @@ input[type=checkbox]::before,
 input[type=checkbox]::after
 {
 	all: unset;
+	user-select: none;
 }
 
 #labels{
@@ -78,7 +88,7 @@ input[type=checkbox]::after
 <div id=labels>
 {#each months as month}
 	<div class=checkbox_container>
-		<label><input type="checkbox" name="checkbox" value="value" on:click={set_season}>{month}</label>
+		<label tabindex="0" on:keypress={(event) => do_on_key(event, 'Enter', false, () => {toggle_checkbox_on_key(event)}) } ><input tabindex=-1 type="checkbox" name="checkbox" value="value" on:click={set_season}>{month}</label>
 	</div>
 {/each}
 </div>

src/lib/css/action_button.css

@@ -1,5 +1,5 @@
 .action_button{
-	all: unset;
+	border: none;
 	cursor: pointer;
 	background-color: var(--red);
 	transition: 200ms;

src/routes/+layout.svelte

@@ -61,10 +61,10 @@ nav{
 footer{
 padding-block: 1rem;
 text-align: center;
-margin-top: 3rem;
+margin-top: auto;
 }
 </style>
-<div class=wrapper style="">
+<div class=wrapper>
 <div>
 <nav>
 <ul>

src/routes/rezepte/+page.svelte

@@ -8,18 +8,31 @@
     export let data: PageData;
     export let current_month = new Date().getMonth() + 1
 </script>
+<style>
+h1,
+h2{
+	max-width: 1000px;
+	margin-left: 5rem;
+	margin-bottom: 0;
+}
+h1{
+font-size: 4rem;
+}
+h2{
+	font-size: 3rem;
+	margin-bottom: 1rem;
+}
+</style>
 <h1>Rezepte</h1>
-<h2>In Saison</h2>
 <section>
-<MediaScroller>
+<MediaScroller title="In Saison:">
 {#each data.season as recipe}
 	<Card {recipe} {current_month} search=""></Card>
 {/each}
 </MediaScroller>
 </section>
 <Search></Search>
-<h2>Alle Rezepte</h2>
-<Recipes>
+<Recipes title="Alle Rezepte:">
 	{#each data.all_brief as recipe}
 	<Card {recipe} {current_month}></Card>
 	{/each}

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

@@ -8,7 +8,9 @@
 	import EditButton from '$lib/components/EditButton.svelte';
 	import InstructionsPage from '$lib/components/InstructionsPage.svelte';
 	import IngredientsPage from '$lib/components/IngredientsPage.svelte';
+
     	export let data: PageData;
+
 	let hero_img_src = "/images/" + data.images[0].mediapath
     	export let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
 	function season_intervals() {