dark theme implemented

src/lib/components/CreateIngredientList.svelte

@@ -399,6 +399,18 @@ h3{
 .force_wrap{
 	overflow-wrap: break-word;
 }
+.button_arrow{
+	fill: var(--nord1);
+}
+@media (prefers-color-scheme: dark){
+	.button_arrow{
+		fill: var(--nord4);
+	}
+	.list_wrapper p[contenteditable]{
+		background-color: var(--accent-dark);
+
+	}
+}
 </style>
 
 <div class=list_wrapper>
@@ -411,10 +423,10 @@ h3{
 	<h3>
 	<div class=move_buttons_container>
 		<button on:click="{() => update_list_position(list_index, 1)}">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
+                        <svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
                 </button>
 		<button  on:click="{() => update_list_position(list_index, -1)}">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+                        <svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 		</button>
 	</div>
 
@@ -436,10 +448,10 @@ h3{
 		{#each list.list as ingredient, ingredient_index (ingredient_index)}
 		<div class=move_buttons_container>
 			<button on:click="{() => update_ingredient_position(list_index, ingredient_index, 1)}">
-                	        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
+                	        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
                 	</button>
 			<button  on:click="{() => update_ingredient_position(list_index, ingredient_index, -1)}">
-                	        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+                	        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 			</button>
 		</div>
 		<!-- svelte-ignore a11y-click-events-have-key-events -->

src/lib/components/CreateStepList.svelte

@@ -425,6 +425,22 @@ h3{
 		width: 80%;
 	}
 }
+@media (prefers-color-scheme: dark){
+	.additional_info div{
+		background-color: var(--accent-dark);
+	}
+	.instructions{
+		background-color: var(--nord6-dark);
+	}
+}
+.button_arrow{
+	fill: var(--nord1);
+}
+@media (prefers-color-scheme: dark){
+	.button_arrow{
+		fill: var(--nord4);
+	}
+}
 </style>
 
 <div class=instructions>
@@ -461,10 +477,10 @@ h3{
 	<h3>
 	<div class=move_buttons_container>
 		<button on:click="{() => update_list_position(list_index, 1)}">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
+                        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
                 </button>
 		<button  on:click="{() => update_list_position(list_index, -1)}">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+                        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 		</button>
 	</div>
 	<div on:click={() => show_modal_edit_subheading_step(list_index)}>
@@ -486,10 +502,10 @@ h3{
 		<li>
 			<div class="move_buttons_container step_move_buttons">
 				<button on:click="{() => update_step_position(list_index, step_index, 1)}">
-		                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
+		                        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
 		                </button>
 				<button  on:click="{() => update_step_position(list_index, step_index, -1)}">
-		                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+		                        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 				</button>
 			</div>
 			<div>

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/nordtheme.css'
 	import '$lib/css/shake.css'
 	import { redirect } from '@sveltejs/kit';
 	import { RecipeModelType } from '../../types/types';
@@ -214,6 +215,7 @@ h1{
 	margin-block: 2rem;
 	margin-inline: auto;
 	background-color: var(--nord6);
+	background-color: red;
 	padding: 1rem 2rem;
 }
 .title p{
@@ -254,6 +256,12 @@ h3{
 	bottom: 0;
 	margin: 2rem;
 }
+@media (prefers-color-scheme: dark){
+	.title{
+		background-color: var(--nord6-dark);
+		background-color: green;
+	}
+}
 </style>
 <h1>{title}</h1>
 

src/lib/components/Header.svelte

@@ -29,6 +29,12 @@ font-family: sans-serif;
 	background-color: #fbf9f3;
 	overflow-x: hidden;
 }
+@media (prefers-color-scheme: dark) {
+	:global(body){
+		color: white;
+		background-color: var(--background-dark);
+	}
+}
 
 nav{
 	position: sticky;

src/lib/components/Icon.svelte

@@ -12,6 +12,11 @@
 		border-radius: 1000px;
     		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
 	}
+	@media (prefers-color-scheme: dark) {
+		a{
+			background-color: var(--accent-dark);
+		}
+	}
 	a:hover{
 		--angle: 15deg;
 		animation: shake 0.5s ease forwards;

src/lib/components/IngredientListList.svelte

@@ -0,0 +1,565 @@
+<script lang='ts'>
+import { onMount } from 'svelte';
+
+import Pen from '$lib/assets/icons/Pen.svelte'
+import Cross from '$lib/assets/icons/Cross.svelte'
+import Plus from '$lib/assets/icons/Plus.svelte'
+import Check from '$lib/assets/icons/Check.svelte'
+
+import "$lib/css/action_button.css"
+
+export let list;
+export let list_index;
+
+let edit_ingredient = {
+	amount: "",
+	unit: "",
+	name: "",
+	sublist: "",
+	list_index: "",
+	ingredient_index: "",
+}
+
+let edit_heading = {
+	name:"",
+	list_index: "",
+	}
+
+function get_sublist_index(sublist_name, list){
+	for(var i =0; i < list.length; i++){
+		if(list[i].name == sublist_name){
+			return i
+		}
+	}
+	return -1
+}
+export function show_modal_edit_subheading_ingredient(list_index){
+	edit_heading.name = ingredients[list_index].name
+	edit_heading.list_index = list_index
+	const el = document.querySelector('#edit_subheading_ingredient_modal')
+	el.showModal()
+}
+export function edit_subheading_and_close_modal(){
+	ingredients[edit_heading.list_index].name = edit_heading.name
+	const el = document.querySelector('#edit_subheading_ingredient_modal')
+	el.close()
+}
+
+export function add_new_ingredient(){
+	if(!new_ingredient.name){
+		return
+	}
+	let list_index = get_sublist_index(new_ingredient.sublist, ingredients)
+	if(list_index == -1){
+		ingredients.push({
+			name: new_ingredient.sublist,
+			list: [],
+		})
+		list_index = ingredients.length - 1
+	}
+	ingredients[list_index].list.push({ ...new_ingredient})
+	ingredients = ingredients //tells svelte to update dom
+}
+export function remove_list(list_index){
+	if(ingredients[list_index].list.length > 1){
+		const response = confirm("Bist du dir sicher, dass du diese Liste löschen möchtest? Alle Zutaten der Liste werden hiermit auch gelöscht.");
+		if(!response){
+			return
+		}
+	}
+	ingredients.splice(list_index, 1);
+	ingredients = ingredients //tells svelte to update dom
+}
+export function remove_ingredient(list_index, ingredient_index){
+	ingredients[list_index].list.splice(ingredient_index, 1)
+	ingredients = ingredients //tells svelte to update dom
+}
+
+export function show_modal_edit_ingredient(list_index, ingredient_index){
+	edit_ingredient = {...ingredients[list_index].list[ingredient_index]}
+	edit_ingredient.list_index = list_index
+	edit_ingredient.ingredient_index = ingredient_index
+	edit_ingredient.sublist = ingredients[list_index].name
+	const modal_el = document.querySelector("#edit_ingredient_modal");
+	modal_el.showModal();
+}
+export function edit_ingredient_and_close_modal(){
+	ingredients[edit_ingredient.list_index].list[edit_ingredient.ingredient_index] = {
+	amount: edit_ingredient.amount,
+	unit: edit_ingredient.unit,
+	name: edit_ingredient.name,
+	}
+	ingredients[edit_ingredient.list_index].name = edit_ingredient.sublist
+	const modal_el = document.querySelector("#edit_ingredient_modal");
+	modal_el.close();
+}
+
+    let ghost;
+    let grabbed;
+
+    let lastTarget;
+
+    let mouseY = 0; // pointer y coordinate within client
+    let offsetY = 0; // y distance from top of grabbed element to pointer
+    let layerY = 0; // distance from top of list to top of client
+
+    function grab(clientY, element) {
+        // modify grabbed element
+        grabbed = element;
+        grabbed.dataset.grabY = clientY;
+
+        // modify ghost element (which is actually dragged)
+        ghost.innerHTML = grabbed.innerHTML;
+
+        // record offset from cursor to top of element
+        // (used for positioning ghost)
+        offsetY = grabbed.getBoundingClientRect().y - clientY;
+        drag(clientY);
+    }
+
+    // drag handler updates cursor position
+    function drag(clientY) {
+        if (grabbed) {
+            mouseY = clientY;
+            layerY = ghost.parentNode.getBoundingClientRect().y;
+        }
+    }
+
+    // touchEnter handler emulates the mouseenter event for touch input
+    // (more or less)
+    function touchEnter(ev) {
+        drag(ev.clientY);
+        // trigger dragEnter the first time the cursor moves over a list item
+        let target = document.elementFromPoint(ev.clientX, ev.clientY).closest(".item");
+        if (target && target != lastTarget) {
+            lastTarget = target;
+            dragEnter(ev, target);
+        }
+    }
+
+    function dragEnter(ev, target) {
+        // swap items in data
+        if (grabbed && target != grabbed && target.classList.contains("item")) {
+            moveDatum(parseInt(grabbed.dataset.index), parseInt(target.dataset.index));
+        }
+    }
+
+    // does the actual moving of items in data
+    function moveDatum(from, to) {
+        let temp = list[0].list[from];
+        list[0].list = [...list[0].list.slice(0, from), ...list[0].list.slice(from + 1)];
+        list[0].list= [...list[0].list.slice(0, to), temp, ...list[0].list.slice(to)];
+    }
+
+    function release(ev) {
+        grabbed = null;
+    }
+
+    function removeDatum(index) {
+        list= [...list.slice(0, index), ...list.slice(index + 1)];
+    }
+</script>
+
+<style>
+input::placeholder{
+	color: inherit;
+}
+
+.drag_handle{
+	cursor: grab;
+	display:flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+.drag_handle_header{
+	padding-right: 0.5em;
+}
+input{
+	color: unset;
+	font-size: unset;
+	padding: unset;
+	background-color: unset;
+}
+
+input.heading{
+	all: unset;
+	box-sizing: border-box;
+	background-color: var(--nord0);
+	padding: 1rem;
+	padding-inline: 2rem;
+	font-size: 1.5rem;
+	width: 100%;
+	border-radius: 1000px;
+	color: white;
+	justify-content: center;
+	align-items: center;
+	transition: 200ms;
+}
+input.heading:hover{
+	background-color: var(--nord1);
+}
+
+.heading_wrapper{
+	position: relative;
+	width: 300px;
+	margin-inline: auto;
+	transition: 200ms;
+}
+.heading_wrapper:hover
+{
+	transform:scale(1.1,1.1);
+}
+
+.heading_wrapper button{
+	position: absolute;
+	bottom: -1.5rem;
+	right: -2rem;
+}
+.adder{
+	box-sizing: border-box;
+	margin-inline: auto;
+	position: relative;
+	margin-block: 3rem;
+	width: 90%;
+	border-radius: 20px;
+	transition: 200ms;
+}
+.adder button{
+	position: absolute;
+	right: -1.5rem;
+	bottom: -1.5rem;
+}
+.category{
+	border: none;
+	position: absolute;
+	--font_size: 1.5rem;
+	top: -1em;
+	left: -1em;
+	font-family: sans-serif;
+	font-size: 1.5rem;
+	background-color: var(--nord0);
+	color: var(--nord4);
+	border-radius: 1000000px;
+	width: 23ch;
+	padding: 0.5em 1em;
+	transition: 100ms;
+	box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
+}
+.category:hover{
+	background-color: var(--nord1);
+	transform: scale(1.05,1.05);
+}
+.adder:hover,
+.adder:focus-within
+{
+	transform: scale(1.05, 1.05);
+}
+
+.add_ingredient{
+	font-family: sans-serif;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	font-size: 1.2rem;
+	padding: 2rem;
+	padding-top: 2.5rem;
+	border-radius: 20px;
+	background-color: var(--blue);
+	color: #bbb;
+	transition: 200ms;
+	gap: 0.5rem;
+}
+.add_ingredient input{
+	border: 2px solid var(--nord4);
+	color: var(--nord4);
+	border-radius: 1000px;
+	padding: 0.5em 1em;
+	transition: 100ms;
+}
+.add_ingredient input:hover,
+.add_ingredient input:focus-visible
+{
+	border-color: white;
+	color: white;
+	transform: scale(1.02, 1.02);
+
+}
+.add_ingredient input:nth-of-type(1){
+	max-width: 8ch;
+}
+.add_ingredient input:nth-of-type(2){
+	max-width: 8ch;
+}
+.add_ingredient input:nth-of-type(3){
+	max-width: 30ch;
+}
+
+dialog{
+	box-sizing: content-box;
+	width: 100%;
+	height: 100%;
+	background-color: transparent;
+	border: unset;
+	margin: 0;
+	transition: 500ms;
+}
+dialog[open]::backdrop{
+    animation: show 200ms ease forwards;
+}
+@keyframes show{
+    from {
+	backdrop-filter: blur(0px);
+    }
+    to {
+	backdrop-filter: blur(10px);
+    }
+}
+dialog .adder{
+	margin-top: 5rem;
+}
+dialog h2{
+	font-size: 3rem;
+	font-family: sans-serif;
+	color: white;
+	text-align: center;
+	margin-top: 30vh;
+	margin-top: 30dvh;
+	filter: drop-shadow(0 0 0.4em black)
+		drop-shadow(0 0 1em black)
+		;
+}
+.mod_icons{
+	display: flex;
+	flex-direction: row;
+	margin-left: 2rem;
+}
+.button_subtle{
+	padding: 0em;
+	animation: unset;
+	margin: 0.2em 0.1em;
+	background-color: transparent;
+	box-shadow: unset;
+}
+.button_subtle:hover{
+	scale: 1.2 1.2;
+}
+h3{
+	width: fit-content;
+	display: flex;
+	flex-direction: row;
+	max-width: 1000px;
+	justify-content: space-between;
+	user-select: none;
+	cursor: pointer;
+}
+.ingredients_grid > span{
+	box-sizing: border-box;
+	display: grid;
+	font-size: 1.1em;
+	grid-template-columns: 1em 2fr 3fr 2em;
+	grid-template-rows: auto;
+	grid-auto-flow: row;
+	align-items: center;
+	row-gap: 0.5em;
+	column-gap: 0.5em;
+}
+
+.ingredients_grid > *{
+	cursor: pointer;
+	user-select: none;
+}
+.ingredients_grid>*:nth-child(3n+1){
+	min-width: 5ch;
+}
+
+.list_wrapper{
+	padding-inline: 2em;
+	padding-block: 1em;
+}
+.list_wrapper p[contenteditable]{
+	border: 2px solid grey;
+	border-radius: 1000px;
+	padding: 0.25em 1em;
+	background-color: white;
+	transition: 200ms;
+}
+@media screen and (max-width: 500px){
+	dialog h2{
+	margin-top: 2rem;
+	}
+	dialog .heading_wrapper{
+		width: 80%;
+	}
+	.ingredients_grid .mod_icons{
+		margin-left: 0;
+	}
+}
+
+   .list {
+        cursor: grab;
+        z-index: 5;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .item {
+        min-height: 3em;
+        margin-bottom: 0.5em;
+        border-radius: 2px;
+        user-select: none;
+    }
+
+    .item:last-child {
+        margin-bottom: 0;
+    }
+
+    .item:not(#grabbed):not(#ghost) {
+        z-index: 10;
+    }
+
+    .item > * {
+        margin: auto;
+    }
+
+    .buttons {
+        width: 32px;
+        min-width: 32px;
+        margin: auto 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .buttons button {
+        cursor: pointer;
+        width: 18px;
+        height: 18px;
+        margin: 0 auto;
+        padding: 0;
+        border: 1px solid rgba(0, 0, 0, 0);
+        background-color: inherit;
+    }
+
+    .buttons button:focus {
+        border: 1px solid black;
+    }
+
+    .delete {
+        width: 32px;
+    }
+
+    #grabbed {
+        opacity: 0.0;
+    }
+
+    #ghost {
+        pointer-events: none;
+        z-index: -5;
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0.0;
+    }
+
+    #ghost * {
+        pointer-events: none;
+    }
+
+    #ghost.haunting {
+        z-index: 20;
+        opacity: 1.0;
+    }
+
+main {
+        position: relative;
+    }
+</style>
+
+
+<main>
+<div class=dragdroplist>
+
+<div
+        bind:this={ghost}
+        id="ghost"
+        class={grabbed ? "item haunting" : "item"}
+	style={"top: " + (mouseY + offsetY - layerY) + "px"}><p></p>
+</div>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<h3 on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
+	<div class="drag_handle drag_handle_header"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></div>
+	<div>
+		{#if list.name }
+			{list.name}
+		{:else}
+			Leer
+		{/if}
+	</div>
+	<div class=mod_icons>
+		<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
+			<Pen fill=var(--nord1)></Pen>	</button>
+		<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}">
+			<Cross fill=var(--nord1)></Cross></button>
+	</div>
+</h3>
+
+<div class="ingredients_grid list"
+        on:mousemove={function(ev) {ev.stopPropagation(); drag(ev.clientY);}}
+        on:touchmove={function(ev) {ev.stopPropagation(); drag(ev.touches[0].clientY);}}
+        on:mouseup={function(ev) {ev.stopPropagation(); release(ev);}}
+     on:touchend={function(ev) {ev.stopPropagation(); release(ev.touches[0]);}}
+     >
+{#each list.list as ingredient, ingredient_index}
+	<span
+                id={(grabbed && (ingredient.id ? ingredient.id : JSON.stringify(ingredient)) == grabbed.dataset.id) ? "grabbed" : ""}
+class="item"
+                data-index={ingredient_index}
+                data-id={(ingredient.id ? ingredient.id : JSON.stringify(ingredient))}
+                data-grabY="0"
+                on:mousedown={function(ev) {grab(ev.clientY, this);}}
+                on:touchstart={function(ev) {grab(ev.touches[0].clientY, this);}}
+                on:mouseenter={function(ev) {ev.stopPropagation(); dragEnter(ev, ev.target);}}
+                on:touchmove={function(ev) {ev.stopPropagation(); ev.preventDefault(); touchEnter(ev.touches[0]);}}
+		>
+	<div class=drag_handle><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.amount} {ingredient.unit}</div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{@html ingredient.name}</div>
+	<div class=mod_icons><button class="action_button button_subtle" on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
+		<Pen fill=var(--nord1) height=1em width=1em></Pen></button>
+		<button class="action_button button_subtle" on:click="{() => remove_ingredient(list_index, ingredient_index)}"><Cross fill=var(--nord1) height=1em width=1em></Cross></button></div>
+	</span>
+{/each}
+</div>
+
+</div>
+</main>
+
+<dialog id=edit_ingredient_modal>
+	<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:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<input type="text" placeholder="250..." bind:value={edit_ingredient.amount} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<input type="text" placeholder="mL..." bind:value={edit_ingredient.unit} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<input type="text" placeholder="Milch..." bind:value={edit_ingredient.name} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<button class=action_button on:keydown={(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>
+	</div>
+</dialog>
+
+<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:keydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} >
+		<button class=action_button on:keydown={(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>
+</dialog>

src/lib/components/IngredientsPage.svelte

@@ -151,6 +151,12 @@ font-family: sans-serif;
 	background-color: var(--nord5);
 	box-shadow: 0px 0px 0.4em 0.05em rgba(0,0,0, 0.2);
 }
+@media (prefers-color-scheme: dark){
+	.multipliers button{
+		color: var(--tag-font);
+		background-color: var(--nord6-dark);
+	}
+}
 .multipliers :is(button, div):is(:hover, :focus-within){
 	scale: 1.2;
 	background-color: var(--orange);

src/lib/components/InstructionsPage.svelte

@@ -38,6 +38,14 @@ ol li::marker{
 	box-shadow: 0.3em 0.3em 1em 0.2em rgba(0,0,0,0.3);
 	max-width: 30%
 }
+@media (prefers-color-scheme: dark){
+	.instructions{
+		background-color: var(--nord6-dark);
+	}
+	.additional_info > *{
+		background-color: var(--accent-dark);
+	}
+}
 @media screen and (max-width: 500px){
 	.additional_info > *{
 		max-width: 60%;

src/lib/components/PaymentCard.svelte

@@ -1,7 +0,0 @@
-<script>
-	export let payment;
-</script>
-<div>
-	<p>{payment.amount}</p>
-	<p>{payment.payee}</p>
-</div>

src/lib/css/form.css

@@ -10,6 +10,11 @@ form{
 	padding-block: 2rem;
 	margin-block: 2rem;
 }
+@media (prefers-color-scheme: dark){
+	form{
+		background-color: var(--accent-dark);
+	}
+}
 form label{
 	font-size: 1.2em;
 }

src/lib/css/nordtheme.css

@@ -22,4 +22,8 @@
 	--yellow: var(--nord13);
 	--green: var(--nord14);
 	--purple: var(--nord15);
+	--nord6-dark: #292c31;
+	--accent-dark: #1f1f21;
+	--background-dark: #21201b;
+	--font-default-dark: #ffffff;
 }

src/routes/(main)/+page.svelte

@@ -1,21 +1,34 @@
 <script>
+	import "$lib/css/nordtheme.css";
 </script>
 <style>
+
 section{
 	padding: 2rem 1rem;
 	min-height: 350px;
 	overflow: hidden;
 	transition: 200ms;
 }
-section:nth-child(3n){
+section:nth-child(3n),
+.grid_section a:nth-child(4n),
+.grid_section a:nth-child(4n) svg{
 	background-color: var(--nord4);
+	fill: var(--nord11);
 }
-section:nth-child(3n+1){
+section:nth-child(4n+1),
+.grid_section a:nth-child(4n+1),
+.grid_section a:nth-child(4n+1) svg{
 	background-color: var(--nord6);
+	fill: var(--nord10);
 }
-section:nth-child(3n+2){
+section:nth-child(3n+2),
+.grid_section a:nth-child(4n+2){
 	background-color: var(--nord5);
 }
+.grid_section a:nth-child(4n+3){
+	background-color: var(--nord5);
+}
+
 section:nth-child(2n) .flex{
 	flex-direction: row-reverse;
 }
@@ -60,6 +73,72 @@ section:hover{
 section:has(a:hover){
 	box-shadow: 1em 1em 1em 1em rgba(0,0,0, 0.3);
 }
+.grid_section a:hover{
+	box-shadow: 1em 1em 2em 1em rgba(0,0,0, 0.3);
+}
+.grid_section a{
+	box-shadow: 0.2em 0.2em 1em 1em rgba(0,0,0, 0.1);
+}
+.grid_section{
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	gap: 2rem;
+	max-width: 1000px;
+	margin-inline: auto;
+	padding: 2rem 1rem;
+}
+.grid_section a{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-decoration: unset;
+	color: var(--nord0);
+	transition: 200ms;
+	width: 100%;
+	padding: 1rem;
+}
+.grid_section a:hover{
+	scale: 1.02;
+}
+.grid_section a :is(svg, img){
+	height: 120px;
+	fill: var(--nord0);
+}
+.grid_section h3{
+	font-size: 1.5rem;
+}
+
+@media (prefers-color-scheme: dark){
+	*{
+		color: white;
+	}
+	section:nth-child(3n),
+	.grid_section a:nth-child(4n),
+	.grid_section a:nth-child(4n) svg{
+		background-color: var(--nord6-dark);
+		fill: var(--nord11);
+	}
+	section:nth-child(4n+1),
+	.grid_section a:nth-child(4n+1),
+	.grid_section a:nth-child(4n+1) svg{
+		background-color: var(--accent-dark);
+		fill: var(--nord9);
+	}
+	section:nth-child(3n+2),
+	.grid_section a:nth-child(4n+2),
+	.grid_section a:nth-child(4n+2) svg{
+		background-color: var(--nord1);
+		fill: var(--nord8);
+
+	}
+	.grid_section a:nth-child(4n+3),
+	.grid_section a:nth-child(4n+3) svg{
+		background-color: var(--background-dark);
+		fill: var(--nord7);
+	}
+}
+
 </style>
 
 <section>
@@ -74,85 +153,49 @@ section:has(a:hover){
 </a>
 </section>
 
-
+<div class=grid_section>
-<section>
+	<a href="rezepte">
-<a href="/git" class=flex>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M240 144A96 96 0 1 0 48 144a96 96 0 1 0 192 0zm44.4 32C269.9 240.1 212.5 288 144 288C64.5 288 0 223.5 0 144S64.5 0 144 0c68.5 0 125.9 47.9 140.4 112h71.8c8.8-9.8 21.6-16 35.8-16H496c26.5 0 48 21.5 48 48s-21.5 48-48 48H392c-14.2 0-27-6.2-35.8-16H284.4zM144 80a64 64 0 1 1 0 128 64 64 0 1 1 0-128zM400 240c13.3 0 24 10.7 24 24v8h96c13.3 0 24 10.7 24 24s-10.7 24-24 24H280c-13.3 0-24-10.7-24-24s10.7-24 24-24h96v-8c0-13.3 10.7-24 24-24zM288 464V352H512V464c0 26.5-21.5 48-48 48H336c-26.5 0-48-21.5-48-48zM48 320h80 16 32c26.5 0 48 21.5 48 48s-21.5 48-48 48H160c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V336c0-8.8 7.2-16 16-16zm128 64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160v32h16zM24 464H200c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>
-<div class=text>
+		<h3>Rezepte</h3>
-<h2>Git</h2>
-<p>Alle Möglichen eigene Codingprojekte kann man auf dieser eigenen gehosteten Gitea Instanz finden. So auch z.B. diese Website. Anki-Vokabelkarten oder auch nur kleinere Personalisierungen von Linux Desktopprogrammen à la DWM oder dmenu sind auch hier zu finden.</p>
-</div>
-<div>
-<img src="/icons/Git.svg" alt="The Git Icon in orange">
-</div>
 	</a>
-</section>
+	<a href=git>
-
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>
-<section>
+		<h3>Git</h3>
-<a href="https://stream.bocken.org" class=flex>
-<div class=text>
-	<h2>Strea&shy;ming</h2>
-<p>Die persönliche Filme und TV-Shows zum streamen gehosted via Jellyfin. Somit wird Netflix und Co. vollends ersetzt. Login notwendiged. (Zur Zeit noch separat von main-page login)</p>
-</div>
-<div>
-<img src="/icons/Jellyfin.svg" alt="">
-</div>
 	</a>
 
-</section>
+	<a href="https://stream.bocken.org">
-
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 32H361.9l-1 1-127 127h92.1l1-1L453.8 32.3c-1.9-.2-3.8-.3-5.8-.3zm64 128V96c0-15.1-5.3-29.1-14-40l-104 104H512zM294.1 32H201.9l-1 1L73.9 160h92.1l1-1 127-127zM64 32C28.7 32 0 60.7 0 96v64H6.1l1-1 127-127H64zM512 192H0V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V192z"/></svg>
-<section>
+		<h3>Streaming</h3>
-<a href="/bilder" class=flex>
-<div class=text>
-	<h2>Fa&shy;mil&shy;ien&shy;bil&shy;der</h2>
-<p></p>
-</div>
-<div>
-<img src="/icons/Photoprism.svg" alt="">
-</div>
-</a>
-</section>
-
-<section>
-	<a href="https://cloud.bocken.org" class=flex>
-		<div class=text>
-			<h2>Cloud</h2>
-			<p>Die priavte Cloud für Datensynchronisiserung, Kontakte und Kalender.</p>
-		</div>
-		<div><img src="/icons/Nextcloud.svg" alt=""></div>
-	</a>
-</section>
-<section>
-<a href="https://meet.bocken.org" class=flex>
-<div class=text>
-<h2>Jitsi</h2>
-<p>Für die eigenene Meetings ohne ein mithören von Zoom oder Microsoft</p>
-</div>
-<div>
-<img src="/icons/Jitsi.svg" alt="">
-</div>
 	</a>
 
-</section>
+	<a href="/bilder">
-<section>
+		<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>
-<a href="/searx" class=flex>
+		<h3>Familienbilder</h3>
-<div class=text>
-	<h2>Pri&shy;va&shy;te Such&shy;ma&shy;schi&shy;ne</h2>
-<p>Eine selbsgehostete Searx-Instanz für private Suche durch diese Metasuchmaschine. Überraschend gut für Manches, überraschend schlecht für Anderes.</p>
-</div>
-<div>
-<img src="/icons/Searx.svg" alt="">
-</div>
 	</a>
-</section>
 
-<section>
+	<a href="https://cloud.bocken.org">
-<a href="/transmission" class=flex>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 336c0 79.5 64.5 144 144 144H512c70.7 0 128-57.3 128-128c0-61.9-44-113.6-102.4-125.4c4.1-10.7 6.4-22.4 6.4-34.6c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192c0 2.7 .1 5.4 .2 8.1C40.2 219.8 0 273.2 0 336z"/></svg>
-<div class=text>
+		<h3>Cloud</h3>
-	<h2>Trans&shy;mis&shy;sion</h2>
-<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero doloremque atque totam nam voluptatum at facere itaque autem quae? Saepe hic iure delectus vero culpa maiores fuga, provident ipsam consectetur.</p>
-</div>
-<div>
-<img src="/icons/Transmission.svg" alt="">
-</div>
 	</a>
-</section>
+
+	<a href="https://meet.bocken.org">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"/></svg>
+		<h3>Videokonferenzen</h3>
+	</a>
+
+	<a href="/searx">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+		<h3>Suchmaschine</h3>
+	</a>
+
+	<a href="/transmission">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
+		<h3>Transmission</h3>
+
+	</a>
+
+	<a href="https://tree.bocken.org">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M335.5 4l288 160c15.4 8.6 21 28.1 12.4 43.5s-28.1 21-43.5 12.4L320 68.6 47.5 220c-15.4 8.6-34.9 3-43.5-12.4s-3-34.9 12.4-43.5L304.5 4c9.7-5.4 21.4-5.4 31.1 0zM320 160a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM144 256a40 40 0 1 1 0 80 40 40 0 1 1 0-80zm312 40a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM226.9 491.4L200 441.5V480c0 17.7-14.3 32-32 32H120c-17.7 0-32-14.3-32-32V441.5L61.1 491.4c-6.3 11.7-20.8 16-32.5 9.8s-16-20.8-9.8-32.5l37.9-70.3c15.3-28.5 45.1-46.3 77.5-46.3h19.5c16.3 0 31.9 4.5 45.4 12.6l33.6-62.3c15.3-28.5 45.1-46.3 77.5-46.3h19.5c32.4 0 62.1 17.8 77.5 46.3l33.6 62.3c13.5-8.1 29.1-12.6 45.4-12.6h19.5c32.4 0 62.1 17.8 77.5 46.3l37.9 70.3c6.3 11.7 1.9 26.2-9.8 32.5s-26.2 1.9-32.5-9.8L552 441.5V480c0 17.7-14.3 32-32 32H472c-17.7 0-32-14.3-32-32V441.5l-26.9 49.9c-6.3 11.7-20.8 16-32.5 9.8s-16-20.8-9.8-32.5l36.3-67.5c-1.7-1.7-3.2-3.6-4.3-5.8L376 345.5V400c0 17.7-14.3 32-32 32H296c-17.7 0-32-14.3-32-32V345.5l-26.9 49.9c-1.2 2.2-2.6 4.1-4.3 5.8l36.3 67.5c6.3 11.7 1.9 26.2-9.8 32.5s-26.2 1.9-32.5-9.8z"/></svg>
+		<h3>Stammbaum</h3>
+	</a>
+</div>

src/routes/(main)/login/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 import "$lib/css/form.css"
+import "$lib/css/nordtheme.css"
 </script>
 <form action="?/login" method=POST>
 	<h1>Log In</h1>

src/routes/(rezepte)/rezepte/+page.svelte

@@ -11,6 +11,7 @@
 <style>
 h1{
 	box-sizing: border-box;
+	text-align: center;
 	max-width: 1000px;
 	padding-left: 5rem;
 	margin-bottom: 0;

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

@@ -125,6 +125,12 @@ h1{
 	transition: 100ms;
 	box-shadow: 0em 0em 0.5em 0.05em rgba(0,0,0,0.3);
 }
+@media (prefers-color-scheme: dark) {
+	.tag{
+		background-color: var(--nord0);
+		color: white;
+	}
+}
 .tag:hover,
 .tag:focus-visible
 {
@@ -144,6 +150,11 @@ h1{
 	transform: translateY(-7rem);
 	z-index: -2;
 }
+@media (prefers-color-scheme: dark) {
+	.wrapper_wrapper{
+		background-color: var(--background-dark);
+	}
+}
 
 .wrapper{
 	display: flex;
@@ -167,6 +178,12 @@ h1{
 	translate: 0 1px; /*bruh*/
 	z-index: 1;
 }
+@media (prefers-color-scheme: dark) {
+	.title{
+		background-color: var(--nord6-dark);
+	}
+}
+
 .icon{
 	position: absolute;
 	top: -1em;
@@ -179,6 +196,12 @@ h1{
 	transition: 100ms;
 	box-shadow: 0em 0em 1em 0.3em rgba(0,0,0,0.4);
 }
+@media (prefers-color-scheme: dark) {
+	.icon{
+		background-color: var(--accent-dark);
+	}
+}
+
 .icon:hover,
 .icon:focus-visible{
 	scale: 1.2 1.2;
@@ -243,6 +266,7 @@ h4{
 .date{
 	margin-bottom: 0;
 }
+
 </style>
 <svelte:head>
 	<title>{stripHtmlTags(data.name)} - Bocken'sche Rezepte</title>

src/routes/(rezepte)/rezepte/add/+page.svelte

@@ -168,19 +168,6 @@ input:focus-visible
 		flex-direction: column;
 	}
 }
-.submit_wrapper{
-	position: relative;
-	margin-inline: auto;
-	width: max(300px, 50vw)
-}
-.submit_wrapper button{
-	position: absolute;
-	right:-1em;
-	bottom: -0.5em;
-}
-.submit_wrapper h2{
-	margin-bottom: 0;
-}
 h1{
 	text-align: center;
 	margin-bottom: 2rem;
@@ -250,6 +237,11 @@ button.action_button{
 	padding-right: 0.5em;
 	margin: 0;
 }
+@media (prefers-color-scheme: dark){
+	.title{
+		background-color: var(--nord6-dark);
+	}
+}
 </style>
 <svelte:head>
 	<title>Rezept erstellen</title>

src/routes/(rezepte)/rezepte/category/+page.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
     import type { PageData } from './$types';
+    import "$lib/css/nordtheme.css";
     export let data: PageData;
     import TagCloud from '$lib/components/TagCloud.svelte';
     import TagBall from '$lib/components/TagBall.svelte';
 </script>
-<h1>Rezepte</h1>
+<style>
-<h2>Kategorien</h2>
+	h1 {
+		text-align: center;
+		font-size: 3rem;
+	}
+</style>
+<h1>Kategorien</h1>
 <section>
 <TagCloud>
 {#each data.categories as tag}

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

@@ -7,8 +7,13 @@
     import Card from '$lib/components/Card.svelte'
     import { rand_array } from '$lib/js/randomize';
 </script>
-<h1>Rezepte</h1>
+<style>
-<h2>In Kategorie {data.category}</h2>
+	h1 {
+		text-align: center;
+		font-size: 3em;
+	}
+</style>
+<h1>Rezepte in Kategorie <q>{data.category}</q>:</h1>
 <Search></Search>
 <section>
 <Recipes>

src/routes/(rezepte)/rezepte/edit/[name]/+page.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/nordtheme.css'
 	import { redirect } from '@sveltejs/kit';
 	import EditRecipeNote from '$lib/components/EditRecipeNote.svelte';
 
@@ -285,6 +286,11 @@ h1{
 	background-color: var(--nord6);
 	padding: 1rem 2rem;
 }
+@media (prefers-color-scheme: dark){
+	.title{
+		background-color: var(--nord6-dark);
+	}
+}
 .title p{
 	border: 2px solid var(--nord1);
 	border-radius: 10000px;
@@ -336,6 +342,11 @@ button.action_button{
 	padding-right: 0.5em;
 	margin: 0;
 }
+@media (prefers-color-scheme: dark){
+	:global(body){
+		background-color: var(--background-dark);
+	}
+}
 </style>
 <h1>Rezept editieren</h1>
 <CardAdd {card_data} {image_preview_url} ></CardAdd>

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

@@ -10,12 +10,20 @@
 </script>
 <style>
 	a{
+		--padding: 0.5em;
 		font-size: 3rem;
 		text-decoration: none;
-		padding: 0.5em;
+		padding: var(--padding);
 		background-color: var(--nord4);
 		border-radius: 1000px;
     		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
+		text-align: center;
+		--width: calc(1.2em + var(--padding) * 2);
+		width: var(--width);
+		line-height: calc(var(--width) - 2*var(--padding));
+		height: var(--width);
+
+
 	}
 	a:hover,
 	a:focus-visible

src/routes/(rezepte)/rezepte/tag/+page.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
     import type { PageData } from './$types';
     export let data: PageData;
+    import "$lib/css/nordtheme.css";
     import TagCloud from '$lib/components/TagCloud.svelte';
     import TagBall from '$lib/components/TagBall.svelte';
 </script>
-<h1>Rezepte</h1>
+<style>
-<h2>Kategorien</h2>
+	h1 {
+		font-size: 3rem;
+		text-align: center;
+	}
+</style>
+<h1>Kategorien</h1>
 <section>
 <TagCloud>
 {#each data.tags as tag}

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

@@ -7,8 +7,13 @@
     import Search from '$lib/components/Search.svelte';
     import { rand_array } from '$lib/js/randomize';
 </script>
-<h1>Rezepte</h1>
+<style>
-<h2>In Tag {data.tag}</h2>
+	h1 {
+		text-align: center;
+		font-size: 2em;
+	}
+</style>
+<h1>Rezepte mit Stichwort <q>{data.tag}</q>:</h1>
 <Search></Search>
 <section>
 <Recipes>