less noticable shadows on tags

README.md

@@ -1,38 +1,38 @@
-# create-svelte
+# Personal Homepage
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+My own homepage, bocken.org (new.bocken.org for now), built with svelte-kit.
 
-## Creating a project
+## TODO
+### General
+- [] Admin user management
+- [] upload/change pfp
+- [] registration only with minimal permissions
+- [] logout without /logout page
+- [] no DB request for every Layout change if session already got the username once
+- [] preferences page
+- [] change password
 
-If you're seeing this, you've probably already done this step. Congrats!
+### Rezepte
+- [] nutrition facts
+- [] verify randomize arrays based on day
+- [] notes for next time
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+### Abrechnungen
+- [] DB setup
+- [] create new entries
+- [] delete entries
+- [] edit entries
+- [] upload img
 
-# create a new project in my-app
-npm create svelte@latest my-app
-```
+### Flims
+- [] Calendar layout
+- [] DB setup
+- [] create new entries
+- [] delete entries
+- [] edit entries
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+### Glaube
+- [] just keep it as MD rendering for now?
+- [] DB setup
+- [] Google Speech to Text API integration?
+- [] Gebete

src/lib/components/EditRecipeNote.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+</script>
+<style>
+div{
+	background-color: var(--red);
+	color: white;
+	padding: 1em;
+	font-size: 1.1rem;
+	max-width: 400px;
+	margin-inline: auto;
+	box-shadow: 0.2em 0.2em 0.5em 0.1em rgba(0, 0, 0, 0.3);
+	margin-bottom: 1em;
+}
+h3{
+	margin-block: 0;
+}
+</style>
+
+<div>
+	<h3>Notiz:</h3>
+	<slot></slot>
+</div>

src/lib/components/RecipeNote.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let note : string;
+</script>
+<style>
+div{
+	background-color: var(--red);
+	color: white;
+	padding: 1em;
+	font-size: 1.1rem;
+	max-width: 400px;
+	margin-inline: auto;
+	box-shadow: 0.2em 0.2em 0.5em 0.1em rgba(0, 0, 0, 0.3);
+	margin-bottom: 1em;
+}
+h3{
+	margin-block: 0;
+}
+</style>
+
+<div {...$$restProps} >
+	<h3>Notiz:</h3>
+	{@html note}
+</div>

src/lib/components/SeasonSelect.svelte

@@ -44,6 +44,8 @@ label{
 	background-color: var(--nord0);
 	color: white;
 	padding: 0.25em 1em;
+	margin-inline: 0.1em;
+	line-height: 2em;
 	border-radius: 1000px;
 	cursor: pointer;
 	position: relative;
@@ -81,7 +83,8 @@ input[type=checkbox]::after
 	flex-wrap: wrap;
 	flex-direction: row;
 	justify-content: center;
-	gap: min(1rem, 1dvh);
+	margin-bottom: 1em;
+
 }
 </style>
 

src/models/Recipe.ts

@@ -14,6 +14,7 @@ const RecipeSchema = new mongoose.Schema(
 	    caption: String,
     }],
     description: {type: String, required: true},
+    note: {type: String},
     tags : [String],
     season : [Number],
     baking: { temperature: {type:String, default: ""},

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

@@ -10,6 +10,7 @@
 	import TitleImgParallax from '$lib/components/TitleImgParallax.svelte';
 	import { afterNavigate } from '$app/navigation';
     	import {season} from '$lib/js/season_store';
+	import RecipeNote from '$lib/components/RecipeNote.svelte';
 
     	export let data: PageData;
 
@@ -90,7 +91,7 @@ h1{
 	border-radius: 10000px;
 	padding: 0.25em 1em;
 	transition: 100ms;
-	box-shadow: 0.2em 0.2em 0.4em 0.1em rgba(0,0,0,0.3);
+	box-shadow: 0em 0em 0.5em 0.05em rgba(0,0,0,0.3);
 }
 .tag:hover,
 .tag:focus-visible
@@ -98,7 +99,7 @@ h1{
 	cursor: pointer;
 	transform: scale(1.1,1.1);
 	background-color: var(--orange);
-	box-shadow: 0.1em 0.1em 0.2em 0.2em rgba(0,0,0,0.3);
+	box-shadow: 0.1em 0.1em 0.5em 0.1em rgba(0,0,0,0.3);
 }
 
 .wrapper_wrapper{
@@ -226,8 +227,10 @@ h4{
 				<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
 			{/each}
 		</div>
-
-	</div>
+		{#if data.note}
+			<RecipeNote note={data.note}></RecipeNote>
+		{/if}
+</div>
 
 <div class=wrapper_wrapper>
 <div class=wrapper>

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

@@ -4,11 +4,13 @@
 	import SeasonSelect from '$lib/components/SeasonSelect.svelte';
 	import '$lib/css/action_button.css'
 	import { redirect } from '@sveltejs/kit';
+	import EditRecipeNote from '$lib/components/EditRecipeNote.svelte';
 
     	export let data: PageData;
 	let preamble = data.recipe.preamble
 	let addendum = data.recipe.addendum
 	let image_preview_url="https://new.bocken.org/static/rezepte/thumb/" + data.recipe.short_name + ".webp"
+	let note = data.recipe.note
 
 	import { season } from '$lib/js/season_store';
 	import { portions } from '$lib/js/portions_store';
@@ -212,7 +214,8 @@
 					instructions,
 					ingredients,
 					addendum,
-					preamble
+					preamble,
+					note,
 				},
 				old_short_name,
 			headers: {
@@ -347,6 +350,7 @@ button.action_button{
 <div class=tags>
 <h4>Saison:</h4>
 <SeasonSelect></SeasonSelect>
+<EditRecipeNote><p contenteditable bind:innerText={note}></p></EditRecipeNote>
 </div>
 
 </div>