Dark mode tweaks

This commit is contained in:
tree 2023-01-31 09:47:58 +01:00
parent e098e6d175
commit 952a46aebe
19 changed files with 223 additions and 161 deletions

View File

@ -1,5 +1,4 @@
pipeline:
build:
image: node
commands:
@ -10,11 +9,10 @@ pipeline:
when:
branch: [dev]
deploy_dev:
image: rclone/rclone
commands:
- "rclone sync build/ :sftp:dev/ --sftp-host frontier.gwei.cz --sftp-user pbw-deploy --sftp-port 2022 --sftp-pass $RCLONE_PASS -v"
- 'rclone sync build/ :sftp:dev/ --sftp-host frontier.gwei.cz --sftp-user pbw-deploy --sftp-port 2022 --sftp-pass $RCLONE_PASS -v'
secrets: [RCLONE_PASS]
when:
branch: [dev]
@ -32,7 +30,7 @@ pipeline:
deploy_mirror:
image: rclone/rclone
commands:
- "rclone sync build/ :sftp:production/ --sftp-host frontier.gwei.cz --sftp-user pbw-deploy --sftp-port 2022 --sftp-pass $RCLONE_PASS -v"
- 'rclone sync build/ :sftp:production/ --sftp-host frontier.gwei.cz --sftp-user pbw-deploy --sftp-port 2022 --sftp-pass $RCLONE_PASS -v'
secrets: [RCLONE_PASS]
when:
branch: [main]
branch: [main]

View File

@ -14,4 +14,4 @@ The production version is available at [explore.prgblockweek.com](https://explor
## Authors
- [tree](https://github.com/burningtree)
- [cryptonda](https://github.com/cryptonda)
- [cryptonda](https://github.com/cryptonda)

View File

@ -44,7 +44,15 @@
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='white' 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");
}
body.dark{
background-color: #252525;
}
body {
@apply bg-pbw-red;
}
.page-body {
@apply bg-pbw-white;
}
body.dark .page-body {
@apply bg-pbw-dark;
}
}

View File

@ -13,7 +13,7 @@
<div class="text-2xl">
{#each segments as segment}
<div
class="md:flex flex-wrap mb-2 gap-3 items-center text-gray-800 border dark:text-gray-400 border-gray-300 rounded-lg md:border-none px-3 py-2 md:px-0 md:py-0"
class="md:flex flex-wrap mb-2 gap-3 items-center text-gray-800 border dark:text-gray-200 border-gray-300 rounded-lg md:border-none px-3 py-2 md:px-0 md:py-0"
>
<div class="flex gap-2">
<div class="text-xl md:w-32 md:text-right">

View File

@ -66,33 +66,33 @@
<a href={_url(col, item)} class="hover:underline">{item.shortname || item.name}</a>
</h3>
{#if col === 'event'}
<div class="text-xl text-gray-500 dark:text-gray-400 my-2">
<div class="text-xl text-gray-500 dark:text-gray-200 my-2">
<span class="font-bold">{formatItemDate(item)}</span>
{#if item.attendees}<br />{item.attendees} ppl{/if}
</div>
{/if}
{#if col === 'media-partner'}
<div class="text-base text-gray-500 dark:text-gray-400 my-2">{item.description}</div>
<div class="text-base text-gray-500 dark:text-gray-200 my-2">{item.description}</div>
{/if}
{#if col === 'speaker'}
<div class="text-base text-gray-500 dark:text-gray-400 my-2">
<div class="text-base text-gray-500 dark:text-gray-200 my-2">
<SvelteMarkdown source={item.caption} />
</div>
{/if}
{#if col === 'union'}
<div class="text-base text-gray-500 dark:text-gray-400 my-2">
<div class="text-base text-gray-500 dark:text-gray-200 my-2">
<SvelteMarkdown source={item.description} />
</div>
{/if}
{#if col === 'place'}
<div class="text-xl text-gray-500 dark:text-gray-400 my-2">{item.capacity} ppl</div>
<div class="text-xl text-gray-500 dark:text-gray-200 my-2">{item.capacity} ppl</div>
{/if}
</div>
{/if}
</div>
{/each}
{#if offer}
<div class="flex text-gray-400 self-start {col === 'event' ? 'mt-8' : ''}">
<div class="flex text-gray-400 dark:text-gray-200 self-start {col === 'event' ? 'mt-8' : ''}">
<div class="p-4">
<div class="text-6xl">+</div>
<div>

View File

@ -1,21 +1,39 @@
<script>
let dark = false;
function toggleDarkMode() {
dark = !dark;
document.body.classList.toggle('dark', dark);
}
let dark = false;
function toggleDarkMode() {
dark = !dark;
document.body.classList.toggle('dark', dark);
}
</script>
<button
class="flex items-center text-white py-1 px-2 rounded-full hover:bg-pbw-yellow/20 dark:hover:bg-pbw-white/10"
on:click={toggleDarkMode}
>
{#if dark}
<svg id="theme-toggle-dark-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<span class="px-2">Dark mode</span>
{:else}
<svg id="theme-toggle-light-icon" class=" w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
<span class="px-2">Light mode</span>
{/if}
</button>
class="flex items-center text-white py-1 px-2 rounded-full hover:bg-pbw-yellow/20 dark:hover:bg-pbw-white/10"
on:click={toggleDarkMode}
>
{#if dark}
<svg
id="theme-toggle-dark-icon"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
>
<span class="px-2">Dark mode</span>
{:else}
<svg
id="theme-toggle-light-icon"
class=" w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"
/></svg
>
<span class="px-2">Light mode</span>
{/if}
</button>

View File

@ -4,7 +4,7 @@
</script>
<div
class="text-sm uppercase rounded px-1.5 py-0.5 text-black"
class="badge text-sm uppercase rounded px-1.5 py-0.5 text-black"
style="background-color: {config.eventTypeColors[type]};"
>
{type}

View File

@ -11,67 +11,83 @@
let showSource = false;
</script>
<div class="mt-20">
<div class="bg-gray-100 dark:bg-gray-400 p-4 text-lg text-gray-600 dark:text-gray-800">
<div>
⚙ This page is automatically generated using the structured dataset which can be consumed as a
single JSON file → <a
href="https://data.prgblockweek.com/23/index.json"
class="underline hover:no-underline"
target="_blank">data.prgblockweek.com/23/index.json</a
>.
<div class="h-4" />
📖 The source data GitHub repository →<a
href="https://github.com/utxo-foundation/prague-blockchain-week"
class="underline hover:no-underline"
target="_blank">utxo-foundation/prague-blockchain-week</a
>. Go ahead and do PRs!
</div>
</div>
{#if bundle}
<div class="mt-4 text-gray-400">
<div class="mt-2">
Last update: <a
href="https://github.com/utxo-foundation/prague-blockchain-week/commits/main"
target="_blank"
class="underline hover:no-underline">{formatDistanceToNow(new Date(bundle.time))} ago</a
>
&nbsp;|&nbsp;
<a
href="https://analytics.gwei.cz/explore.prgblockweek.com"
class="underline hover:no-underline"
target="_blank">Analytics</a
>
&nbsp;|&nbsp;
<a
href="https://github.com/utxo-foundation/pbw-explore"
class="underline hover:no-underline"
target="_blank">pbw-explore {__VERSION__}</a
>
{#if item}
&nbsp;|&nbsp; ID: <a
href="https://github.com/utxo-foundation/prague-blockchain-week/tree/main/data/23/{cc}/{item.id}"
class="underline hover:no-underline"
target="_blank">{item.id}</a
>
[{cc}] &nbsp;|&nbsp;
<button
class="cursor-pointer underline hover:no-underline"
on:click={() => {
showSource = !showSource;
return false;
}}>Toggle JSON source</button
<div class="w-full dark:text-gray-600">
<div class="max-w-7xl mx-auto mt-5 md:mt-10 pt-10">
<div class="mx-4 xl:mx-0">
<div class="pt-0">
<div class="bg-gray-100 dark:bg-gray-600 p-4 text-lg text-gray-600 dark:text-gray-200">
<div>
⚙ This page is automatically generated using the structured dataset which can be
consumed as a single JSON file → <a
href="https://data.prgblockweek.com/23/index.json"
class="underline hover:no-underline"
target="_blank">data.prgblockweek.com/23/index.json</a
>.
<div class="h-4" />
📖 The source data GitHub repository →<a
href="https://github.com/utxo-foundation/prague-blockchain-week"
class="underline hover:no-underline"
target="_blank">utxo-foundation/prague-blockchain-week</a
>. Go ahead and do PRs!
</div>
</div>
{#if showSource}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">JSON source-code</h2>
<div
class="mt-4 font-mono whitespace-pre-wrap p-4 rounded-md bg-slate-200 text-sm text-black"
>
{JSON.stringify(item, null, 2)}
</div>
{/if}
</div>
{#if showSource}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">JSON source-code</h2>
<div
class="mt-4 font-mono whitespace-pre-wrap p-4 rounded-md bg-slate-200 text-sm text-black"
>
{JSON.stringify(item, null, 2)}
</div>
{/if}
</div>
{/if}
</div>
</div>
<div class="w-full dark:text-gray-400 bg-pbw-red pb-20">
<div class="max-w-7xl mx-auto mt-5 md:mt-10">
<div class="mx-4 xl:mx-0">
<div class="pt-2">
{#if bundle}
<div class="mt-4 text-white">
<div class="mt-2">
Last update: <a
href="https://github.com/utxo-foundation/prague-blockchain-week/commits/main"
target="_blank"
class="underline hover:no-underline"
>{formatDistanceToNow(new Date(bundle.time))} ago</a
>
&nbsp;|&nbsp;
<a
href="https://analytics.gwei.cz/explore.prgblockweek.com"
class="underline hover:no-underline"
target="_blank">Analytics</a
>
&nbsp;|&nbsp;
<a
href="https://github.com/utxo-foundation/pbw-explore"
class="underline hover:no-underline"
target="_blank">pbw-explore {__VERSION__}</a
>
{#if item}
&nbsp;|&nbsp; ID: <a
href="https://github.com/utxo-foundation/prague-blockchain-week/tree/main/data/23/{cc}/{item.id}"
class="underline hover:no-underline"
target="_blank">{item.id}</a
>
[{cc}] &nbsp;|&nbsp;
<button
class="cursor-pointer underline hover:no-underline"
on:click={() => {
showSource = !showSource;
return false;
}}>Toggle JSON source</button
>
{/if}
</div>
</div>
{/if}
</div>
</div>
</div>
</div>

View File

@ -1,8 +1,8 @@
<script>
import { page } from '$app/stores';
export let path;
export let type;
export let path;
export let type;
</script>
<div class="w-full dark:text-gray-400 bg-pbw-red">
@ -11,7 +11,7 @@
<div class="flex gap-8 pb-6">
<h1 class="text-4xl md:text-5xl font-bold text-pbw-white">
<a href="/{$page.params.entry}">#PBW23</a><a
href="/{$page.params.entry}{path ? '/' + path : ""}"
href="/{$page.params.entry}{path ? '/' + path : ''}"
><span class="text-pbw-yellow">.{type}</span></a
>
</h1>
@ -19,4 +19,3 @@
</div>
</div>
</div>

View File

@ -123,12 +123,12 @@
<div class="w-full mb-10 relative">
{#if selectedSegment}
<div
class="absolute top-[81px] w-[300px] border bg-white z-50 py-2 px-4 {selectedSegment
class="absolute top-[81px] w-[300px] border dark:border-gray-400 bg-white dark:bg-pbw-dark dark:text-gray-200 z-50 py-2 px-4 {selectedSegment
? 'hidden md:block'
: 'hidden'}"
style="left: {selectedSegment.event.layerX}px;"
>
<div class="uppercase">{selectedSegment.title}</div>
<div class="uppercase text-gray-500 dark:text-gray-300 text-lg">{selectedSegment.title}</div>
<div class="text-xl mt-4">
{#each selectedSegment.data.events.map((e) => {
return [eventDetail(e[0]), e[1]];

View File

@ -1,7 +1,7 @@
import localData from '$lib/data.json';
function isMirror (host) {
return host === "mirror.explore.prgblockweek.com"
function isMirror(host) {
return host === 'mirror.explore.prgblockweek.com';
}
export async function load(entry = '23', host = null) {
@ -10,7 +10,9 @@ export async function load(entry = '23', host = null) {
if (host === 'localhost') {
data = localData;
} else {
const resp = await fetch(`https://${isMirror(host) ? 'mirror.' : ''}data.prgblockweek.com/${entry}/index.json`);
const resp = await fetch(
`https://${isMirror(host) ? 'mirror.' : ''}data.prgblockweek.com/${entry}/index.json`
);
data = await resp.json();
}
data.events.sort((a, b) => ((a.attendees || 0) < (b.attendees || 0) ? 1 : -1));
@ -28,6 +30,8 @@ export async function load(entry = '23', host = null) {
}
export async function loadSchema(host) {
const resp = await fetch(`https://${isMirror(host) ? 'mirror.' : ''}data.prgblockweek.com/schema/1/bundle.json`);
const resp = await fetch(
`https://${isMirror(host) ? 'mirror.' : ''}data.prgblockweek.com/schema/1/bundle.json`
);
return resp.json();
}

View File

@ -7,22 +7,22 @@
</script>
<div class="w-full h-full bg-pbw-red">
<div class="flex max-w-7xl items-right justify-end p-2 m-auto h-[50px] -mb-[30px]">
<DarkModeToggle />
</div>
<div class="flex max-w-7xl items-right justify-end p-2 m-auto h-[50px] -mb-[30px]">
<DarkModeToggle />
</div>
{#if homepage}
<div class="px-6 xl:px-0">
<div class="max-w-7xl mx-auto pt-10 pb-6">
<h1 class="text-5xl uppercase font-bold text-pbw-white">
<a href="https://prgblockweek.com">Prague Blockchain Week 2023</a>
</h1>
<div class="text-4xl text-pbw-yellow">June 2-11, 2023</div>
</div>
</div>
{/if}
{#if homepage}
<div class="px-6 xl:px-0">
<div class="max-w-7xl mx-auto pt-10 pb-6">
<h1 class="text-5xl uppercase font-bold text-pbw-white">
<a href="https://prgblockweek.com">Prague Blockchain Week 2023</a>
</h1>
<div class="text-4xl text-pbw-yellow">June 2-11, 2023</div>
</div>
</div>
{/if}
</div>
<div class="pb-24">
<slot />
</div>
<div class="page-body">
<slot />
</div>

View File

@ -46,7 +46,7 @@
<TimelineHeatmap {data} />
<h2 class="text-2xl uppercase font-bold text-gray-500">
<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
<a href="/{entry}/events">Conferences & Hackathons</a> ({conferences.length})
</h2>
<div
@ -54,7 +54,7 @@
>
<CollectionList arr={conferences} img="logo" col="event" {entry} offer={true} />
</div>
<h2 class="text-2xl uppercase font-bold text-gray-500">
<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
<a href="/{entry}/events">Other events</a> ({otherEvents.length})
</h2>
<div
@ -62,10 +62,12 @@
>
<CollectionList arr={otherEvents} img="logo" col="event" {entry} />
</div>
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
<a href="/{entry}/speakers">Speakers</a> ({data.bundle.speakers.length})
</h2>
<h2 class="text-xl uppercase font-bold mt-10 text-gray-500">International 🌎</h2>
<h2 class="text-xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
International 🌎
</h2>
<div
class="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-6 xl:grid-cols-8 my-6 text-center text-xl"
>
@ -74,7 +76,9 @@
{entry}
/>
</div>
<h2 class="text-xl uppercase font-bold mt-10 text-gray-500">Local - Czech 🇨🇿 & Slovak 🇸🇰</h2>
<h2 class="text-xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Local - Czech 🇨🇿 & Slovak 🇸🇰
</h2>
<div
class="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-6 xl:grid-cols-8 my-6 text-center text-xl"
>
@ -83,7 +87,7 @@
{entry}
/>
</div>
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
<a href="/{entry}/places">Places</a> ({data.bundle.places.length})
</h2>
<div
@ -92,7 +96,7 @@
<CollectionList arr={data.bundle.places} col="place" img="photo" {entry} />
</div>
{#if data.bundle.benefits}
<h2 class="text-2xl uppercase font-bold text-gray-500">
<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
<a href="/{entry}/benefits">Benefits for visitors</a> ({data.bundle.benefits.length})
</h2>
<div
@ -109,12 +113,14 @@
</div>
{/if}
{#if data.bundle['media-partners']}
<h2 class="text-2xl uppercase font-bold text-gray-500">
<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
<a href="/{entry}/media-partners">Media Partners & Communities</a> ({data.bundle[
'media-partners'
].length})
</h2>
<h2 class="text-xl uppercase font-bold mt-10 text-gray-500">International 🌎</h2>
<h2 class="text-xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
International 🌎
</h2>
<div
class="grid grid-cols-3 sm:grid-cols-5 md:grid-cols-7 xl:grid-cols-9 my-6 text-center text-2xl mb-8"
>
@ -129,7 +135,9 @@
size="small"
/>
</div>
<h2 class="text-xl uppercase font-bold mt-10 text-gray-500">Local - Czech 🇨🇿 & Slovak 🇸🇰</h2>
<h2 class="text-xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Local - Czech 🇨🇿 & Slovak 🇸🇰
</h2>
<div
class="grid grid-cols-3 sm:grid-cols-5 md:grid-cols-7 xl:grid-cols-9 my-6 text-center text-2xl mb-8"
>
@ -154,7 +162,7 @@
<div class="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-10 xl:grid-cols-12 my-6 text-center text-xl">
<CollectionList arr={data.bundle.chains} col="chain" img="logo" entry={entry} />
</div-->
<Footer bundle={data.bundle} />
</div>
</div>
<Footer bundle={data.bundle} />

View File

@ -6,7 +6,7 @@
import { goto } from '$app/navigation';
import SvelteMarkdown from 'svelte-markdown';
import Footer from '$lib/components/Footer.svelte';
import Header from '$lib/components/Header.svelte';
import Header from '$lib/components/Header.svelte';
import EventTypeBadge from '$lib/components/EventTypeBadge.svelte';
import { formatItemDate, bareDomain, getFlagEmoji } from '$lib/utils.js';
import makeBlockie from 'ethereum-blockies-base64';
@ -69,10 +69,10 @@
<div class="w-full">
<div class="max-w-7xl mx-auto pt-5 md:pt-10">
<div class="mx-4 xl:mx-0">
<h2 class="text-2xl uppercase font-bold text-gray-500">
<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300">
{tc.title} ({processedItems.length})
</h2>
<div class="text-xl mt-6 text-gray-800 dark:text-gray-400">
<div class="text-xl mt-6 text-gray-800 dark:text-gray-200">
<table class="w-full table-auto">
<thead>
<tr class="text-left">
@ -245,8 +245,9 @@
</tbody>
</table>
</div>
<Footer bundle={data.bundle} />
</div>
</div>
</div>
{/if}
<Footer bundle={data.bundle} />

View File

@ -48,9 +48,9 @@
<Header path={colsDef[$page.params.type]} type={$page.params.type} />
<div class="w-full dark:text-gray-400">
<div class="w-full dark:text-gray-200">
<div class="max-w-7xl mx-auto pt-5 md:pt-10">
<div class="mx-4 xl:mx-0">
<div class="mx-4 xl:mx-0">
<div class="flex flex-wrap md:flex-nowrap w-full">
<ItemLogo
{item}
@ -61,7 +61,7 @@
/>
<div class="flex-grow">
<!--div class="font-normal text opacity-50 mt-4 md:mt-0 mb-1" style="line-height: 0.6em;"><a href="/{entry}/{col}">{col.toUpperCase()}</a></div-->
<h2 class="text-4xl md:text-5xl font-bold text-gray-600 dark:text-gray-400 mt-4 md:mt-0">
<h2 class="text-4xl md:text-5xl font-bold text-gray-600 dark:text-gray-100 mt-4 md:mt-0">
{item.name}
</h2>
{#if col === 'event'}
@ -289,10 +289,14 @@
{#if col === 'event'}
{#if item.tracks}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">Tracks</h2>
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Tracks
</h2>
<div class="flex flex-wrap gap-2 mt-4">
{#each item.tracks as track}
<div class="border rounded-lg bg-gray-50 items-center py-1.5 px-2">
<div
class="border rounded-lg bg-gray-50 dark:text-gray-300 dark:border-gray-300 dark:bg-transparent items-center py-1.5 px-2"
>
<div class="text-xl" title={track.name}>{track.shortname || track.name}</div>
<!--div class="text-lg markdown"><SvelteMarkdown source={track.examples} /></div-->
</div>
@ -300,10 +304,12 @@
</div>
{/if}
{#if item.segments}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">Schedule</h2>
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Schedule
</h2>
{#each eventDates(item) as date}
<div class="mb-6">
<h3 class="mt-4 text-xl uppercase text-gray-500">
<h3 class="mt-4 text-xl uppercase text-gray-500 dark:text-gray-400">
<a href="/{entry}/day/{date}">{format(new Date(date), 'EEEE - MMMM d, yyyy')}</a>
</h3>
<div class="mt-4">
@ -319,7 +325,7 @@
{/each}
{/if}
{#if item.speakers}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Speakers ({item.speakers?.length || 0})
</h2>
<div
@ -329,7 +335,7 @@
</div>
{/if}
{#if item.events}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Sub-Events ({item.events?.length || 0})
</h2>
<div
@ -339,7 +345,7 @@
</div>
{/if}
{#if item.venues}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Venues ({item.venues?.length || 0})
</h2>
<div
@ -354,7 +360,7 @@
{/if}
{/if}
{#if col === 'union'}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Big events ({item.events?.map((eId) => data.bundle.events.find((e) => e.id === eId))
.length})
</h2>
@ -369,7 +375,7 @@
</div>
{/if}
{#if col === 'speaker'}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Events ({data.bundle.events.filter((e) => e.speakers?.find((s) => s.id === item.id))
.length || 0})
</h2>
@ -384,7 +390,7 @@
</div>
{/if}
{#if col === 'place'}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Events ({data.bundle.events.filter((e) => e.venues?.includes(item.id)).length || 0})
</h2>
<div
@ -398,7 +404,7 @@
</div>
{/if}
{#if col === 'chain'}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500">
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300">
Events ({data.bundle.events.filter((e) => e.chains?.includes(item.id)).length || 0})
</h2>
<div
@ -411,8 +417,8 @@
/>
</div>
{/if}
<Footer {col} {item} bundle={data.bundle} />
</div>
</div>
</div>
<Footer {col} {item} bundle={data.bundle} />

View File

@ -54,7 +54,7 @@
<div class="max-w-7xl mx-auto pt-5 md:pt-10">
<div class="mx-4 xl:mx-0">
<TimelineHeatmap {data} highlightDay={$page.params.date} />
<h2 class="text-3xl md:text-4xl font-bold text-gray-600 dark:text-gray-500">
<h2 class="text-3xl md:text-4xl font-bold text-gray-600 dark:text-gray-100">
{format(new Date($page.params.date), 'MMMM d, yyyy - EEEE')}
</h2>
<div class="mt-10">
@ -65,7 +65,8 @@
bundle={data.bundle}
/>
</div>
<Footer bundle={data.bundle} />
</div>
</div>
</div>
<Footer bundle={data.bundle} />

View File

@ -56,6 +56,7 @@
</svelte:head>
<Header path={false} type="schedule" />
<div class="w-full">
<div class="max-w-7xl mx-auto pt-5 md:pt-10">
<div class="mx-4 xl:mx-0">
@ -78,7 +79,8 @@
</div>
</div>
{/each}
<Footer bundle={data.bundle} />
</div>
</div>
</div>
<Footer bundle={data.bundle} />

View File

@ -1,8 +1,8 @@
{
"name": "#PBW23 Explore",
"theme_color": "#ff1616",
"background_color": "#FF1616",
"display": "browser",
"scope": "/",
"start_url": "/"
}
"name": "#PBW23 Explore",
"theme_color": "#ff1616",
"background_color": "#FF1616",
"display": "browser",
"scope": "/",
"start_url": "/"
}

View File

@ -14,6 +14,7 @@ module.exports = {
red: '#ff1616',
yellow: '#ffde59',
white: '#ffffff',
dark: '#252525'
}
}
}