This commit is contained in:
tree🌴 2023-04-25 07:55:41 +02:00
parent 9f37c73cd6
commit 948e456faa
2 changed files with 33 additions and 18 deletions

View file

@ -161,4 +161,16 @@
.ticket-item:hover .ticket-img {
filter: invert(100%);
}
.ticket-item:hover .ticket-bg {
@apply bg-white;
}
.ticket-item .ticket-bg {
z-index: -2;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #010101;
}
}

View file

@ -135,31 +135,34 @@
<div class="grid lg:grid-cols-2 gap-10 mx-auto">
{#each data.config.tickets as tt}
<div
class="ticket-item {tt.ticketTypeClass} border py-10 px-10 hover:text-black hover:bg-white {data
.config.ticketing
class="ticket-item {tt.ticketTypeClass} border py-10 px-10 hover:text-black {data.config
.ticketing
? 'cursor-pointer'
: ''}"
on:mouseenter={animateSection(40)}
on:click={() => (data.config.ticketing ? goto(data.config.ticketingUrl) : false)}
>
<div class="ticket-bg" />
<div class="ticket-img" />
<div class="text-2xl uppercase">
<a href={data.config.ticketingUrl} class="animate-section">{tt.title}</a>
<div style="z-index: 1;">
<div class="text-2xl uppercase">
<a href={data.config.ticketingUrl} class="animate-section">{tt.title}</a>
</div>
<div class="text-2xl mt-5 font-bold">
<a href={data.config.ticketingUrl}>{tt.price}</a>
</div>
<ul class="mt-8 text-left list-disc px-6">
{#each tt.includes as ti}
<li class="mb-2 pl-2 text-sm">{ti}</li>
{/each}
</ul>
{#if tt.note}
<div class="mt-10 text-sm">{tt.note}</div>
{/if}
{#if tt.hint}
<div class="mt-10 markdown text-sm"><SvelteMarkdown source={tt.hint} /></div>
{/if}
</div>
<div class="text-2xl mt-5 font-bold">
<a href={data.config.ticketingUrl}>{tt.price}</a>
</div>
<ul class="mt-8 text-left list-disc px-6">
{#each tt.includes as ti}
<li class="mb-2 pl-2 text-sm">{ti}</li>
{/each}
</ul>
{#if tt.note}
<div class="mt-10 text-sm">{tt.note}</div>
{/if}
{#if tt.hint}
<div class="mt-10 markdown text-sm"><SvelteMarkdown source={tt.hint} /></div>
{/if}
</div>
{/each}
</div>