Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lots of changes, started on working /add

Browse Source
This commit is contained in:
Alexander Bocken
2023-06-21 19:50:27 +02:00
parent 4e6291fa5d
commit dc6fd3fad5
140 changed files with 489 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/routes/rezepte/[name]/+page.svelte
View File

@ -1,13 +1,77 @@
<script lang="ts">
import type { PageData } from './$types';
import MultiImgWrapper from './MultiImgWrapper.svelte'
export let data: PageData;
</script>
import { writable } from 'svelte/store';
export const multiplier = writable(0);
import type { PageData } from './$types';
import "$lib/components/nordtheme.css"
import MultiImgWrapper from './MultiImgWrapper.svelte'
import EditButton from '$lib/components/EditButton.svelte';
export let data: PageData;
export let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
function season_intervals() {
let interval_arr = []
let start = 0
for(var i = 0; i < data.season.length - 1; i++)
{
if(Math.abs(data.season[i] - data.season[i + 1])%11 > 1){
interval_arr.push([data.season[start], data.season[i]])
start=i+1
}
}
interval_arr.push([data.season[start], data.season[data.season.length -1]])
return interval_arr
}
export let season_iv = season_intervals();
</script>
<style>
*{
font-family: sans-serif;
}
h1{
text-align: center;
padding: 0.5em 2em;
border-radius: 10000px;
margin:0;
font-size: 3rem;
}
.wrapper{
margin-inline: auto;
max-width: 700px;
padding-inline: 2rem;
}
.tags{
margin-block: 1rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.tag{
all:unset;
color: var(--nord0);
font-size: 1.1rem;
background-color: var(--nord5);
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);
}
.tag:hover,
.tag:focus-visible
{
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);
}
</style>
<div class="wrapper">
<h1>{data.name}</h1>
<MultiImgWrapper wrap={data.images.length>1} class=double>
{#each data.images as img}
<img width=100% src="/images/{img.mediapath}" alt="{img.alt}">
<figure>
{#if img.caption}
<caption>{img.caption}</caption>
@ -16,6 +80,46 @@
{/each}
</MultiImgWrapper>
<div class=tags>
Saison:
{#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>
Stichwörter:
{#each data.tags as tag}
<a href="/rezepte/tag/{tag}" class=tag>{tag}</a>
{/each}
</div>
{#if data.preparation}
<div>Vorbereitung: {data.preparation}</div>
{/if}
{#if data.fermentation}
{#if data.fermentation.bulk}
<div>Stockgare: {data.fermentation.bulk}</div>
{/if}
{#if data.fermentation.final}
<div>Stückgare: {data.fermentation.final}</div>
{/if}
{/if}
{#if data.baking}
<div>Backen: {data.baking.length} bei {data.baking.temperature} °C {data.baking.mode}</div>
{/if}
{#if data.total_time}
<div>Gesamtzeit: {data.total_time}</div>
{/if}
{#if data.ingredients}
<h2>Zutaten</h2>
{#each data.ingredients as list}
@ -24,7 +128,7 @@
{/if}
<ul>
{#each list.list as item}
<li>{item.amount} {item.unit} {item.name}</li>
<li>{item.amount} {item.unit} {@html item.name}</li>
{/each}
</ul>
{/each}
@ -39,8 +143,13 @@
{/if}
<ol>
{#each list.steps as step}
<li>{step}</li>
<li>{@html step}</li>
{/each}
</ol>
{/each}
{/if}
{#if data.addendum}
{@html data.addendum}
{/if}
</div>
<EditButton href="/rezepte/edit/{data.short_name}"></EditButton>