dark theme implemented

2024-01-20 00:39:53 +01:00
parent e2a7de3e90
commit 7a7b19c02b
23 changed files with 848 additions and 118 deletions
--- a/src/routes/(main)/+page.svelte
+++ b/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>

-
-<section>
-<a href="/git" class=flex>
-<div class=text>
-<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>
-
-<section>
-<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>
-
-<section>
-<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>
+<div class=grid_section>
+	<a href="rezepte">
+		<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>
+		<h3>Rezepte</h3>
+	</a>
+	<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>
+		<h3>Git</h3>
 	</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>
-<section>
-<a href="/searx" class=flex>
-<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>
+	<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>
+		<h3>Streaming</h3>
+	</a>

-<section>
-<a href="/transmission" class=flex>
-<div class=text>
-	<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>
+	<a href="/bilder">
+		<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>
+		<h3>Familienbilder</h3>
+	</a>
+
+	<a href="https://cloud.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="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>
+		<h3>Cloud</h3>
+	</a>
+
+	<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>
-<div>
-<img src="/icons/Transmission.svg" alt="">
-</div>
-</a>
-</section>
--- a/src/routes/(main)/login/+page.svelte
+++ b/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>
--- a/src/routes/(rezepte)/rezepte/+page.svelte
+++ b/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;
--- a/src/routes/(rezepte)/rezepte/[name]/+page.svelte
+++ b/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>
--- a/src/routes/(rezepte)/rezepte/add/+page.svelte
+++ b/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>
--- a/src/routes/(rezepte)/rezepte/category/+page.svelte
+++ b/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>
-<h2>Kategorien</h2>
+<style>
+	h1 {
+		text-align: center;
+		font-size: 3rem;
+	}
+</style>
+<h1>Kategorien</h1>
 <section>
 <TagCloud>
 {#each data.categories as tag}
--- a/src/routes/(rezepte)/rezepte/category/[category]/+page.svelte
+++ b/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>
-<h2>In Kategorie {data.category}</h2>
+<style>
+	h1 {
+		text-align: center;
+		font-size: 3em;
+	}
+</style>
+<h1>Rezepte in Kategorie <q>{data.category}</q>:</h1>
 <Search></Search>
 <section>
 <Recipes>
--- a/src/routes/(rezepte)/rezepte/edit/[name]/+page.svelte
+++ b/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>
--- a/src/routes/(rezepte)/rezepte/icon/+page.svelte
+++ b/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
--- a/src/routes/(rezepte)/rezepte/tag/+page.svelte
+++ b/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>
-<h2>Kategorien</h2>
+<style>
+	h1 {
+		font-size: 3rem;
+		text-align: center;
+	}
+</style>
+<h1>Kategorien</h1>
 <section>
 <TagCloud>
 {#each data.tags as tag}
--- a/src/routes/(rezepte)/rezepte/tag/[tag]/+page.svelte
+++ b/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>
-<h2>In Tag {data.tag}</h2>
+<style>
+	h1 {
+		text-align: center;
+		font-size: 2em;
+	}
+</style>
+<h1>Rezepte mit Stichwort <q>{data.tag}</q>:</h1>
 <Search></Search>
 <section>
 <Recipes>