From e064c58fcc65689961f75162fd2c0c6880b99ea8 Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Sun, 25 Jun 2023 12:15:20 +0200
Subject: [PATCH] Image parallax on recipes

---
 src/lib/components/TitleImgParallax.svelte | 83 ++++++++++++++++++++++
 src/routes/+layout.svelte                  | 10 ++-
 src/routes/rezepte/[name]/+page.svelte     | 76 ++++++++++----------
 src/routes/test/+page.svelte               | 11 +++
 4 files changed, 139 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/components/TitleImgParallax.svelte
 create mode 100644 src/routes/test/+page.svelte

diff --git a/src/lib/components/TitleImgParallax.svelte b/src/lib/components/TitleImgParallax.svelte
new file mode 100644
index 0000000..9049140
--- /dev/null
+++ b/src/lib/components/TitleImgParallax.svelte
@@ -0,0 +1,83 @@
+<script>
+	export let src
+</script>
+<style>
+:root {
+  --scale: 0.3;
+  --space: 10vw;
+  --font-primary: 'Lato', sans-serif;
+  --font-heading: 'Playfair Display', serif;
+}
+
+@media (prefers-reduced-motion) {
+  :root {
+    --scale: 0;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.section {
+  margin-bottom: -20vh;
+  transform-origin: center top;
+  transform:	translateY(-1rem)
+  	scaleY(calc(1 - var(--scale)));
+}
+
+.section > * {
+  transform-origin: center top;
+  transform: scaleY(calc(1 / (1 - var(--scale))));
+}
+
+.content {
+  position: relative;
+  margin: 30vh auto 0;
+}
+.blocker{
+	display:block;
+	z-index: 10;
+	background-color: white;
+	width: 100%;
+	height: 20vh;
+}
+
+.image-container {
+  position: sticky;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  height: max(50dvh, 500px);
+  z-index: -10;
+}
+
+.image-container img {
+  display: block;
+  position: absolute;
+  top: 0;
+  width: min(1000px, 100dvw);
+  z-index: -1;
+  height: max(60dvh,600px);
+  object-fit: cover;
+  /*object-position: top;*/
+  object-position: 50% 20%;
+}
+
+.image-container::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 50%;
+}
+:global(h1){
+	width: 100%;
+}
+
+</style>
+<section class="section">
+    <figure class="image-container"><img {src} alt=""/></figure>
+    <div class=content><slot></slot></div>
+</section>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ae106ce..f7b5153 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -15,12 +15,15 @@ li{
 	list-style-type:none;
 	transition: 100ms;
 	color: white;
+	user-select: none;
 }
 li>a{
 	text-decoration: none;
 	font-family: sans-serif;
 	font-size: 1.2rem;
-	color: inherit
+	color: inherit;
+	border-radius: 1000px;
+	padding: 0.5rem 1rem;
 }
 
 li:hover,
@@ -31,7 +34,7 @@ li:focus-within
 	transform: scale(1.1,1.1);
 }
 ul {
-	padding-block: 2rem;
+	padding-block: 1.5rem;
 	display: flex;
 	flex-direction: row;
 	gap: 1rem;
@@ -51,7 +54,10 @@ ul {
 }
 
 nav{
+	position: sticky;
 	background-color: var(--nord0);
+	top: 0;
+	z-index: 10;
 }
 .wrapper{
 	display:flex;
diff --git a/src/routes/rezepte/[name]/+page.svelte b/src/routes/rezepte/[name]/+page.svelte
index d3c3375..d01c0e6 100644
--- a/src/routes/rezepte/[name]/+page.svelte
+++ b/src/routes/rezepte/[name]/+page.svelte
@@ -8,6 +8,7 @@
 	import EditButton from '$lib/components/EditButton.svelte';
 	import InstructionsPage from '$lib/components/InstructionsPage.svelte';
 	import IngredientsPage from '$lib/components/IngredientsPage.svelte';
+	import TitleImgParallax from '$lib/components/TitleImgParallax.svelte';
 
     	export let data: PageData;
 
@@ -86,6 +87,16 @@ h1{
 	box-shadow: 0.1em 0.1em 0.2em 0.2em rgba(0,0,0,0.3);
 }
 
+.wrapper_wrapper{
+	background-color: #fbf9f3;
+	width: 100svw;
+	padding-top: 3rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 3rem;
+}
+
 .wrapper{
 	display: flex;
 	flex-direction: row;
@@ -100,26 +111,14 @@ h1{
 	}
 }
 
-.title_container{
-	max-width: 1000px;
-	display: flex;
-	flex-direction: column;
-	margin-inline: auto;
-}
 .title{
 	position: relative;
 	width: min(800px, 80vw);
 	margin-inline: auto;
-	transform: translateY(-4rem);
 	background-color: var(--nord6);
 	padding: 1rem 2rem;
-}
-.title_container .img{
-	width: 100%;
-	height: 700px;
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center;
+	translate: 0 1px; /*bruh*/
+	z-index: -1;
 }
 .icon{
 	position: absolute;
@@ -198,33 +197,29 @@ h4{
 {/each}
 </MultiImgWrapper>-->
 
+<TitleImgParallax src=/images/{data.images[0].mediapath}>
+	<div class=title>
+		<a class="icon" href='/rezepte/season/{data.season[0]}'>{data.icon}</a>
+		<h1>{data.name}</h1>
+		{#if data.preamble}
+			<p>{data.preamble}</p>
+		{/if}
+		<div class=tags>
+			<h4>Saison:</h4>
+			{#each season_iv as season}
+				<a class=tag href="/rezepte/season/{season[0]}">{months[season[0] - 1]}-{months[season[1] - 1]}</a>
+			{/each}
+		</div>
+		<div class=tags>
+			<h4>Stichwörter:</h4>
+			{#each data.tags as tag}
+				<a class=tag href="/rezepte/tag/{tag}">{tag}</a>
+			{/each}
+		</div>
 
-<div class=title_container>
-<div class=img style="background-image: url({hero_img_src})"></div>
-<div class=title>
-<a class="icon" href='/rezepte/season/{data.season[0]}'>{data.icon}</a>
-<h1>{data.name}</h1>
-{#if data.preamble}
-	<p>{data.preamble}</p>
-{/if}
-<div class=tags>
-<h4>Saison:</h4>
-{#each season_iv as season}
-	<a class=tag href="/rezepte/season/{season[0]}">{months[season[0] - 1]}-{months[season[1] - 1]}</a>
-{/each}
-</div>
-
-
-<h4>Stichwörter:</h4>
-<div class=tags>
-{#each data.tags as tag}
-	<a href="/rezepte/tag/{tag}" class=tag>{tag}</a>
-{/each}
-</div>
-
-</div>
-</div>
+	</div>
 
+<div class=wrapper_wrapper>
 <div class=wrapper>
 <IngredientsPage {data}></IngredientsPage>
 <InstructionsPage {data}></InstructionsPage>
@@ -234,4 +229,7 @@ h4{
 	{@html data.addendum}
 {/if}
 </div>
+</div>
+</TitleImgParallax>
+
 <EditButton href="/rezepte/edit/{data.short_name}"></EditButton>
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
new file mode 100644
index 0000000..43ee5b2
--- /dev/null
+++ b/src/routes/test/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+import TitleImgParallax from "$lib/components/TitleImgParallax.svelte";
+</script>
+<style>
+div{
+	transform: translateY(-1rem);
+}
+</style>
+<div>
+<TitleImgParallax></TitleImgParallax>
+</div>