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

add category button to recipes

Browse Source
This commit is contained in:
Alexander Bocken 2023-10-19 10:46:28 +02:00
parent 7244637ad7
commit 1d7cf03d66
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
1 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,6 +73,25 @@ h1{
hyphens: auto; hyphens: auto;
text-wrap: balance; 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{ .tags{
margin-block: 1rem; margin-block: 1rem;
display: flex; display: flex;
@ -127,7 +146,6 @@ h1{
flex-direction:column; flex-direction:column;
} }
} }
.title{ .title{
position: relative; position: relative;
width: min(800px, 80vw); width: min(800px, 80vw);
@ -147,7 +165,7 @@ h1{
font-size: 1.5rem; font-size: 1.5rem;
border-radius: 100000px; border-radius: 100000px;
transition: 100ms; 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:hover,
.icon:focus-visible{ .icon:focus-visible{
@ -170,6 +188,9 @@ h4{
.icon{ .icon{
right: 1rem; right: 1rem;
} }
.category{
left: 1rem;
}
} }
@keyframes shake{ @keyframes shake{
0%{ 0%{
@ -207,7 +228,7 @@ h4{
} }
</style> </style>
<svelte:head> <svelte:head>
<title>Bocken - {stripHtmlTags(data.name)}</title> <title>{stripHtmlTags(data.name)} - Bocken'sche Rezepte</title>
<meta name="description" content="{stripHtmlTags(data.description)}" /> <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" 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" /> <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}> <TitleImgParallax src={hero_img_src} {placeholder_src}>
<div class=title> <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> <a class="icon" href='/rezepte/icon/{data.icon}'>{data.icon}</a>
<h1>{@html data.name}</h1> <h1>{@html data.name}</h1>
{#if data.description && ! data.preamble} {#if data.description && ! data.preamble}