116 lines
2.7 KiB
Svelte
116 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import when from "$lib/when"
|
|
import Stars from "$lib/components/Stars.svelte"
|
|
|
|
export let data
|
|
|
|
const ratingCategories: { [k: string]: number } = data.rating
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta name="description" content="{data.name}: {when(data.date)}" />
|
|
<title>{data.name} • Revival Archive</title>
|
|
</svelte:head>
|
|
|
|
<div class="xl:max-w-300 flex flex-col xl:flex-row">
|
|
<article class="w-180 pt-8">
|
|
<div class="-ms-4 flex flex-col">
|
|
{#if data.logo}
|
|
<img
|
|
src="/logos/{data.logo}"
|
|
class="logo mx-a h-15 -mb-6"
|
|
alt="{data.name} Logo" />
|
|
{/if}
|
|
<a href="/revivals" class="hover:text-#888 mt-a">← Back to Index</a>
|
|
<div class="ms-4 mt-4">
|
|
<span class="flex">
|
|
<div class="flex flex-wrap">
|
|
<h1 class="text-2rem m-0 me-3">{data.name}</h1>
|
|
{#if data.defunct}
|
|
<p class="mb-a mt-0 text-red-500">[defunct]</p>
|
|
{/if}
|
|
</div>
|
|
<span class="mt-a ms-a mb-0.5">
|
|
{when(data.date)}
|
|
{#if data.updated}
|
|
<br />
|
|
<em>
|
|
{when(data.updated, true)}
|
|
</em>
|
|
{/if}
|
|
</span>
|
|
</span>
|
|
|
|
<hr class="mb-4 mt-3" />
|
|
|
|
<div class="content pt-0.01 text-justify">
|
|
<div class="mb-10">
|
|
<svelte:component this={data.content} />
|
|
</div>
|
|
|
|
<h1>Rating</h1>
|
|
|
|
<table>
|
|
{#each Object.keys(ratingCategories) as category}
|
|
<tr>
|
|
<td
|
|
class:pt-4={category == "overall"}
|
|
class="pe-6">
|
|
{category.charAt(0).toUpperCase() +
|
|
category.slice(1)}
|
|
</td>
|
|
<div class:pt-4={category == "overall"}>
|
|
<Stars
|
|
rating={ratingCategories[category]} />
|
|
</div>
|
|
</tr>
|
|
{/each}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
{#if data.revivals.length > 0}
|
|
<section class="w-120 xl:max-w-100 xl:ms-12 xl:mt-14">
|
|
<h2>Other revivals</h2>
|
|
{#each data.revivals as revival}
|
|
<a
|
|
href="/revival/{revival.path}"
|
|
class="txt bg-a @light:text-dark hover:text-#ccc
|
|
@light:hover:text-#555 rounded-3 box-border
|
|
block text-white transition hover:shadow-xl">
|
|
<article
|
|
class:opacity-50={revival.defunct}
|
|
class="mb-4 flex p-3 ps-5">
|
|
{#if revival.logo}
|
|
<img
|
|
src="/logos/{revival.logo}"
|
|
class="logo my-a me-5 h-14"
|
|
alt="{revival.name} Logo" />
|
|
{/if}
|
|
<div>
|
|
<div class="flex flex-wrap">
|
|
<h3 class="mb-2 me-3 mt-1">{revival.name}</h3>
|
|
{#if revival.defunct}
|
|
<p class="mb-a mt-0 text-sm text-red-500">
|
|
[defunct]
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
<small>
|
|
{when(revival.date)}
|
|
</small>
|
|
</div>
|
|
</article>
|
|
</a>
|
|
{/each}
|
|
</section>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="stylus">
|
|
section a:hover
|
|
transform translateY(-0.15rem)
|
|
</style>
|