New classes .pbw-text-color-base/primary/secondary

This commit is contained in:
tree 2023-01-31 10:31:21 +01:00
rodič 0f197b34ad
revize ff3898fa92
8 změnil soubory, kde provedl 41 přidání a 39 odebrání

Zobrazit soubor

@ -55,4 +55,14 @@
body.dark .page-body { body.dark .page-body {
@apply bg-pbw-dark; @apply bg-pbw-dark;
} }
.pbw-text-color-base {
@apply text-gray-800 dark:text-gray-200;
}
.pbw-text-color-primary {
@apply text-gray-600 dark:text-gray-100;
}
.pbw-text-color-secondary {
@apply text-gray-500 dark:text-gray-300;
}
} }

Zobrazit soubor

@ -66,26 +66,26 @@
<a href={_url(col, item)} class="hover:underline">{item.shortname || item.name}</a> <a href={_url(col, item)} class="hover:underline">{item.shortname || item.name}</a>
</h3> </h3>
{#if col === 'event'} {#if col === 'event'}
<div class="text-xl text-gray-500 dark:text-gray-200 my-2"> <div class="text-xl pbw-text-color-secondary my-2">
<span class="font-bold">{formatItemDate(item)}</span> <span class="font-bold">{formatItemDate(item)}</span>
{#if item.attendees}<br />{item.attendees} ppl{/if} {#if item.attendees}<br />{item.attendees} ppl{/if}
</div> </div>
{/if} {/if}
{#if col === 'media-partner'} {#if col === 'media-partner'}
<div class="text-base text-gray-500 dark:text-gray-200 my-2">{item.description}</div> <div class="text-base pbw-text-color-secondary my-2">{item.description}</div>
{/if} {/if}
{#if col === 'speaker'} {#if col === 'speaker'}
<div class="text-base text-gray-500 dark:text-gray-200 my-2"> <div class="text-base pbw-text-color-secondary my-2">
<SvelteMarkdown source={item.caption} /> <SvelteMarkdown source={item.caption} />
</div> </div>
{/if} {/if}
{#if col === 'union'} {#if col === 'union'}
<div class="text-base text-gray-500 dark:text-gray-200 my-2"> <div class="text-base pbw-text-color-secondary my-2">
<SvelteMarkdown source={item.description} /> <SvelteMarkdown source={item.description} />
</div> </div>
{/if} {/if}
{#if col === 'place'} {#if col === 'place'}
<div class="text-xl text-gray-500 dark:text-gray-200 my-2">{item.capacity} ppl</div> <div class="text-xl pbw-text-color-secondary my-2">{item.capacity} ppl</div>
{/if} {/if}
</div> </div>
{/if} {/if}

Zobrazit soubor

@ -128,7 +128,7 @@
: 'hidden'}" : 'hidden'}"
style="left: {selectedSegment.event.layerX}px;" style="left: {selectedSegment.event.layerX}px;"
> >
<div class="uppercase text-gray-500 dark:text-gray-300 text-lg">{selectedSegment.title}</div> <div class="uppercase pbw-text-color-secondary text-lg">{selectedSegment.title}</div>
<div class="text-xl mt-4"> <div class="text-xl mt-4">
{#each selectedSegment.data.events.map((e) => { {#each selectedSegment.data.events.map((e) => {
return [eventDetail(e[0]), e[1]]; return [eventDetail(e[0]), e[1]];

Zobrazit soubor

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

Zobrazit soubor

@ -69,10 +69,10 @@
<div class="w-full"> <div class="w-full">
<div class="max-w-7xl mx-auto pt-5 md:pt-10"> <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">
<h2 class="text-2xl uppercase font-bold text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold pbw-text-color-secondary">
{tc.title} ({processedItems.length}) {tc.title} ({processedItems.length})
</h2> </h2>
<div class="text-xl mt-6 text-gray-800 dark:text-gray-200"> <div class="text-xl mt-6 pbw-text-color-base">
<table class="w-full table-auto"> <table class="w-full table-auto">
<thead> <thead>
<tr class="text-left"> <tr class="text-left">

Zobrazit soubor

@ -61,9 +61,9 @@
/> />
<div class="flex-grow"> <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--> <!--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-100 mt-4 md:mt-0"> <h1 class="pbw-text-color-primary text-4xl md:text-5xl font-bold mt-4 md:mt-0">
{item.name} {item.name}
</h2> </h1>
{#if col === 'event'} {#if col === 'event'}
<div class="text-2xl flex gap-4 mt-2 flex-wrap"> <div class="text-2xl flex gap-4 mt-2 flex-wrap">
<div class="flex gap-1 items-center"> <div class="flex gap-1 items-center">
@ -289,9 +289,7 @@
{#if col === 'event'} {#if col === 'event'}
{#if item.tracks} {#if item.tracks}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">Tracks</h2>
Tracks
</h2>
<div class="flex flex-wrap gap-2 mt-4"> <div class="flex flex-wrap gap-2 mt-4">
{#each item.tracks as track} {#each item.tracks as track}
<div <div
@ -304,9 +302,7 @@
</div> </div>
{/if} {/if}
{#if item.segments} {#if item.segments}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">Schedule</h2>
Schedule
</h2>
{#each eventDates(item) as date} {#each eventDates(item) as date}
<div class="mb-6"> <div class="mb-6">
<h3 class="mt-4 text-xl uppercase text-gray-500 dark:text-gray-400"> <h3 class="mt-4 text-xl uppercase text-gray-500 dark:text-gray-400">
@ -325,7 +321,7 @@
{/each} {/each}
{/if} {/if}
{#if item.speakers} {#if item.speakers}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
Speakers ({item.speakers?.length || 0}) Speakers ({item.speakers?.length || 0})
</h2> </h2>
<div <div
@ -335,7 +331,7 @@
</div> </div>
{/if} {/if}
{#if item.events} {#if item.events}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
Sub-Events ({item.events?.length || 0}) Sub-Events ({item.events?.length || 0})
</h2> </h2>
<div <div
@ -345,7 +341,7 @@
</div> </div>
{/if} {/if}
{#if item.venues} {#if item.venues}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
Venues ({item.venues?.length || 0}) Venues ({item.venues?.length || 0})
</h2> </h2>
<div <div
@ -360,7 +356,7 @@
{/if} {/if}
{/if} {/if}
{#if col === 'union'} {#if col === 'union'}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
Big events ({item.events?.map((eId) => data.bundle.events.find((e) => e.id === eId)) Big events ({item.events?.map((eId) => data.bundle.events.find((e) => e.id === eId))
.length}) .length})
</h2> </h2>
@ -375,7 +371,7 @@
</div> </div>
{/if} {/if}
{#if col === 'speaker'} {#if col === 'speaker'}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
Events ({data.bundle.events.filter((e) => e.speakers?.find((s) => s.id === item.id)) Events ({data.bundle.events.filter((e) => e.speakers?.find((s) => s.id === item.id))
.length || 0}) .length || 0})
</h2> </h2>
@ -390,7 +386,7 @@
</div> </div>
{/if} {/if}
{#if col === 'place'} {#if col === 'place'}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
Events ({data.bundle.events.filter((e) => e.venues?.includes(item.id)).length || 0}) Events ({data.bundle.events.filter((e) => e.venues?.includes(item.id)).length || 0})
</h2> </h2>
<div <div
@ -404,7 +400,7 @@
</div> </div>
{/if} {/if}
{#if col === 'chain'} {#if col === 'chain'}
<h2 class="text-2xl uppercase font-bold mt-10 text-gray-500 dark:text-gray-300"> <h2 class="text-2xl uppercase font-bold mt-10 pbw-text-color-secondary">
Events ({data.bundle.events.filter((e) => e.chains?.includes(item.id)).length || 0}) Events ({data.bundle.events.filter((e) => e.chains?.includes(item.id)).length || 0})
</h2> </h2>
<div <div

Zobrazit soubor

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

Zobrazit soubor

@ -67,7 +67,7 @@
<a href="/{$page.params.entry}/day/{day.date}" class=" text-pbw-red hover:underline" <a href="/{$page.params.entry}/day/{day.date}" class=" text-pbw-red hover:underline"
>{format(new Date(day.date), 'MMMM d, yyyy')}</a >{format(new Date(day.date), 'MMMM d, yyyy')}</a
> >
<span class="dark:text-gray-500">- {format(new Date(day.date), 'EEEE')}</span> <span class="pbw-text-color-primary">- {format(new Date(day.date), 'EEEE')}</span>
</h2> </h2>
<div class="mt-6"> <div class="mt-6">
<CalendarList <CalendarList