add category button to recipes
This commit is contained in:
parent
7244637ad7
commit
1d7cf03d66
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user