From 1d7cf03d66b0ae651df8e1b8601a221e89c67711 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 19 Oct 2023 10:46:28 +0200
Subject: [PATCH] add category button to recipes

---
 .../(rezepte)/rezepte/[name]/+page.svelte     | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/routes/(rezepte)/rezepte/[name]/+page.svelte b/src/routes/(rezepte)/rezepte/[name]/+page.svelte
index 3306381..3a2034d 100644
--- a/src/routes/(rezepte)/rezepte/[name]/+page.svelte
+++ b/src/routes/(rezepte)/rezepte/[name]/+page.svelte
@@ -73,6 +73,25 @@ h1{
 	hyphens: auto;
 	text-wrap: balance;
 }
+.category{
+	--size: 1.75rem;
+	position: absolute;
+	top: calc(-1* var(--size) );
+	left:calc(-3/2 * var(--size));
+	background-color: var(--nord0);
+	color: var(--nord6);
+	text-decoration: none;
+	font-size: var(--size);
+	padding: calc(var(--size) * 2/3);
+	border-radius: 1000px;
+	transition: 100ms;
+	box-shadow: 0em 0em 1em 0.3em rgba(0,0,0,0.4);
+}
+.category:hover,
+.category:focus-visible{
+	background-color: var(--nord1);
+	scale: 1.1;
+}
 .tags{
 	margin-block: 1rem;
 	display: flex;
@@ -127,7 +146,6 @@ h1{
 		flex-direction:column;
 	}
 }
-
 .title{
 	position: relative;
 	width: min(800px, 80vw);
@@ -147,7 +165,7 @@ h1{
 	font-size: 1.5rem;
 	border-radius: 100000px;
 	transition: 100ms;
-	box-shadow: 0em 0em 1em 0.5em rgba(0,0,0,0.5);
+	box-shadow: 0em 0em 1em 0.3em rgba(0,0,0,0.4);
 }
 .icon:hover,
 .icon:focus-visible{
@@ -170,6 +188,9 @@ h4{
 	.icon{
 		right: 1rem;
 	}
+	.category{
+		left: 1rem;
+	}
 }
 @keyframes shake{
     0%{
@@ -207,7 +228,7 @@ h4{
 }
 </style>
 <svelte:head>
-	<title>Bocken - {stripHtmlTags(data.name)}</title>
+	<title>{stripHtmlTags(data.name)} - Bocken'sche Rezepte</title>
 	<meta name="description" content="{stripHtmlTags(data.description)}" />
 	<meta property="og:image" content="https://bocken.org/static/rezepte/thumb/{data.short_name}.webp" />
 	<meta property="og:image:secure_url" content="https://bocken.org/static/rezepte/thumb/{data.short_name}.webp" />
@@ -217,6 +238,7 @@ h4{
 
 <TitleImgParallax src={hero_img_src} {placeholder_src}>
 	<div class=title>
+		<a class="category" href='/rezepte/category/{data.category}'>{data.category}</a>
 		<a class="icon" href='/rezepte/icon/{data.icon}'>{data.icon}</a>
 		<h1>{@html data.name}</h1>
 		{#if data.description && ! data.preamble}