mirror of
https://github.com/web3privacy/w3ps1.git
synced 2024-10-15 16:26:26 +02:00
Update
This commit is contained in:
parent
b49cad2a27
commit
3a6ca7fe61
3 changed files with 19 additions and 17 deletions
|
@ -78,7 +78,7 @@
|
||||||
.person-item:hover img {
|
.person-item:hover img {
|
||||||
@apply grayscale-0 invert-0 blur-none;
|
@apply grayscale-0 invert-0 blur-none;
|
||||||
}
|
}
|
||||||
.person-item:hover .text-mild, .person-item:hover .text-supermild {
|
.person-item:hover .text-mild, .person-item:hover .text-supermild, .topic-item:hover .text-mild {
|
||||||
@apply text-black;
|
@apply text-black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,8 +27,8 @@
|
||||||
><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" /></a
|
><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" /></a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 speaker-name animate-speaker">{item.name.toUpperCase()}</div>
|
<div class="mt-4 speaker-name animate-speaker text-xl">{item.name.toUpperCase()}</div>
|
||||||
<div class="text-base text-mild">
|
<div class="text-lg text-mild">
|
||||||
<a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a>
|
<a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a>
|
||||||
</div>
|
</div>
|
||||||
{#if item.caption}
|
{#if item.caption}
|
||||||
|
|
|
@ -5,9 +5,11 @@
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
function animateTopic (el) {
|
function animateSection (interval = 50) {
|
||||||
for(const e of el.target.getElementsByClassName('animate-topic')) {
|
return (el) => {
|
||||||
animateText({ target: e })
|
for(const e of el.target.getElementsByClassName('animate-section')) {
|
||||||
|
animateText({ target: e }, interval)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -30,9 +32,9 @@
|
||||||
<div class="section-header">Key themes</div>
|
<div class="section-header">Key themes</div>
|
||||||
<div class="grid md:grid-cols-3 gap-4 md:gap-10">
|
<div class="grid md:grid-cols-3 gap-4 md:gap-10">
|
||||||
{#each data.config.themes as ti}
|
{#each data.config.themes as ti}
|
||||||
<div class="bg-[#0d1117] hover:text-black hover:bg-white px-4 py-6" on:mouseenter={animateTopic}>
|
<div class="bg-[#0d1117] hover:text-black hover:bg-white px-4 py-6 topic-item" on:mouseenter={animateSection(35)}>
|
||||||
<div class="text-2xl animate-topic">{ti.title.toUpperCase()}</div>
|
<div class="text-2xl animate-section">{ti.title.toUpperCase()}</div>
|
||||||
<div class="mt-4 text-lg markdown">
|
<div class="mt-4 text-lg text-mild markdown">
|
||||||
<SvelteMarkdown source={ti.desc} />
|
<SvelteMarkdown source={ti.desc} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -75,7 +77,7 @@
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each data.config.program as pi}
|
{#each data.config.program as pi}
|
||||||
<tr class="">
|
<tr class="" on:mouseenter={animateSection(35)}>
|
||||||
<td class="text-right time xl:whitespace-nowrap sm:w-16 xl:w-36"
|
<td class="text-right time xl:whitespace-nowrap sm:w-16 xl:w-36"
|
||||||
>{@html pi.time
|
>{@html pi.time
|
||||||
.split('-')
|
.split('-')
|
||||||
|
@ -83,7 +85,7 @@
|
||||||
.join('<div class="xl:inline-block hidden mx-1">-</div>')}
|
.join('<div class="xl:inline-block hidden mx-1">-</div>')}
|
||||||
</td>
|
</td>
|
||||||
<td class="text-left">
|
<td class="text-left">
|
||||||
<div class="text-xl">{pi.title} {pi.speakers ? '― ' + pi.speakers[0]?.name : ''}</div>
|
<div class="text-xl"><span class="animate-section">{pi.title}</span> {pi.speakers ? '― ' + pi.speakers[0]?.name : ''}</div>
|
||||||
{#if pi.desc}
|
{#if pi.desc}
|
||||||
<div class="mt-2 text-base description text-mild markdown">
|
<div class="mt-2 text-base description text-mild markdown">
|
||||||
<SvelteMarkdown source={pi.desc} />
|
<SvelteMarkdown source={pi.desc} />
|
||||||
|
@ -103,7 +105,7 @@
|
||||||
<div>
|
<div>
|
||||||
<a href={data.config.sponsorUrl} target="_blank"
|
<a href={data.config.sponsorUrl} target="_blank"
|
||||||
><button
|
><button
|
||||||
class="py-2 px-5 bg-white text-black hover:bg-black border border-bg-white hover:text-white"
|
class="py-2 px-5 bg-white text-black hover:bg-black border border-bg-white hover:text-white" on:mouseenter={animateText}
|
||||||
>Become a Sponsor</button
|
>Become a Sponsor</button
|
||||||
></a
|
></a
|
||||||
>
|
>
|
||||||
|
@ -118,10 +120,10 @@
|
||||||
<div class="grid lg:grid-cols-2 gap-10 md:w-2/3 mx-auto">
|
<div class="grid lg:grid-cols-2 gap-10 md:w-2/3 mx-auto">
|
||||||
{#each data.config.tickets as tt}
|
{#each data.config.tickets as tt}
|
||||||
<div
|
<div
|
||||||
class="bg-[#0d1117] hover:border-0 py-10 px-10 hover:text-black hover:bg-white"
|
class="bg-[#0d1117] hover:border-0 py-10 px-10 hover:text-black hover:bg-white" on:mouseenter={animateSection(40)}
|
||||||
>
|
>
|
||||||
<div class="text-3xl uppercase">{tt.title}</div>
|
<div class="text-3xl uppercase animate-section">{tt.title}</div>
|
||||||
<div class="text-xl mt-6 font-bold">{tt.price}</div>
|
<div class="text-xl mt-6 font-bold animate-section">{tt.price}</div>
|
||||||
<ul class="mt-6 text-lg text-left list-disc px-6">
|
<ul class="mt-6 text-lg text-left list-disc px-6">
|
||||||
{#each tt.includes as ti}
|
{#each tt.includes as ti}
|
||||||
<li>{ti}</li>
|
<li>{ti}</li>
|
||||||
|
@ -148,8 +150,8 @@
|
||||||
<div class="section-header">FAQ</div>
|
<div class="section-header">FAQ</div>
|
||||||
<div class="grid md:grid-cols-2 gap-2 md:gap-10">
|
<div class="grid md:grid-cols-2 gap-2 md:gap-10">
|
||||||
{#each data.config.faq as fi}
|
{#each data.config.faq as fi}
|
||||||
<div class="py-10 px-4 hover:bg-white hover:text-black">
|
<div class="py-10 px-4 hover:bg-white hover:text-black" on:mouseenter={animateSection(15)}>
|
||||||
<div class="text-2xl font-bold mb-6">{fi.title}</div>
|
<div class="text-2xl font-bold mb-6 animate-section">{fi.title}</div>
|
||||||
<div class="text-lg markdown"><SvelteMarkdown source={fi.text} /></div>
|
<div class="text-lg markdown"><SvelteMarkdown source={fi.text} /></div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
Loading…
Reference in a new issue