This commit is contained in:
tree🌴 2023-02-12 18:08:06 +01:00
parent 956f7b62ae
commit 95e9134db0
8 changed files with 33 additions and 10 deletions

View file

@ -69,4 +69,10 @@
.external.external-mild::after { .external.external-mild::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.5' height='13.5' aria-hidden='true' viewBox='0 0 24 24' class='iconExternalLink_nPIU'%3E%3Cpath fill='silver' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'%3E%3C/path%3E%3C/svg%3E"); content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.5' height='13.5' aria-hidden='true' viewBox='0 0 24 24' class='iconExternalLink_nPIU'%3E%3Cpath fill='silver' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'%3E%3C/path%3E%3C/svg%3E");
} }
.person-item:hover img {
@apply grayscale-0 invert-0 blur-none;
}
.person-item:hover .text-mild {
@apply text-black;
}
} }

View file

@ -8,5 +8,6 @@
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
<script defer data-domain="prague.web3privacy.info" src="https://x.gwei.cz/js/script.js"></script>
</body> </body>
</html> </html>

View file

@ -1,6 +1,7 @@
<script> <script>
export let items; export let items;
export let people; export let people;
export let size = 'normal';
function getPerson(id) { function getPerson(id) {
return people.find((p) => p.id === id); return people.find((p) => p.id === id);
@ -11,10 +12,10 @@
</script> </script>
{#each items.map(getPerson) as item} {#each items.map(getPerson) as item}
<div class="hover:bg-white hover:text-black p-2 {size === 'small' ? 'w-48' : 'w-64'} person-item">
<div> <div>
<div> <a href={twitterLink(item.twitter)} target="_blank"
<a href={twitterLink(item.twitter)} ><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover" /></a
><img src="/people/{item.img}" class="grayscale hover:grayscale-0" /></a
> >
</div> </div>
<div class="mt-4">{item.name}</div> <div class="mt-4">{item.name}</div>

View file

@ -61,6 +61,17 @@ people:
name: Tree name: Tree
twitter: treecz twitter: treecz
img: tree.jpeg img: tree.jpeg
- id: juraj-bednar
name: Juraj Bednar
twitter: jurbed
img: juraj-bednar.jpeg
- id: mario-havel
name: Mario Havel
twitter: TMIYChao
img: mario-havel.jpeg
speakers:
- juraj-bednar
- mario-havel
hosts: hosts:
- mykola - mykola
- tree - tree

View file

@ -12,7 +12,7 @@
</script> </script>
<div class="relative w-full min-h-screen text-white"> <div class="relative w-full min-h-screen text-white">
<div class="fixed w-full h-18 bg-black pt-6 md:pt-2 pb-2"> <div class="fixed w-full h-18 bg-black pt-6 md:pt-2 pb-2 z-40">
<div class="middle-pane-big bg-black"> <div class="middle-pane-big bg-black">
<div class="flex"> <div class="flex">
<div class="flex items-center gap-4 grow"> <div class="flex items-center gap-4 grow">

View file

@ -31,16 +31,20 @@
<div class="" id="speakers"> <div class="" id="speakers">
<div class="middle-pane-medium pt-16 text-xl text-center mx-auto"> <div class="middle-pane-medium pt-16 text-xl text-center mx-auto">
<div class="section-header">Speakers</div> <div class="section-header">Speakers</div>
<div class="pb-16 text-mild">To-be-announced</div> <div class="mx-auto">
<div class="pb-16 flex justify-center sm:gap-6">
<PeopleList items={data.config.speakers} people={data.config.people} />
</div>
</div>
</div> </div>
</div> </div>
<div class="" id="hosts"> <div id="hosts">
<div class="middle-pane-medium pt-16 text-xl text-center mx-auto"> <div class="middle-pane-medium pt-0 text-xl text-center mx-auto">
<div class="section-header">Hosts</div> <div class="section-header">Hosts</div>
<div class="mx-auto sm:w-1/3"> <div class="mx-auto">
<div class="pb-16 grid grid-cols-2 gap-4 sm:gap-10"> <div class="pb-16 flex justify-center sm:gap-6">
<PeopleList items={data.config.hosts} people={data.config.people} /> <PeopleList items={data.config.hosts} people={data.config.people} size="small" />
</div> </div>
</div> </div>
</div> </div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB