bgg-ottawa-sell-club/src/routes/+page.svelte

<article>
    {#if $games.length == 0}
        <div class="medium-height middle-align center-align">
            <div class="center-align">
                <progress class="circle"></progress>

                <h5>gathering games...</h5>
            </div>
        </div>
    {:else}
        <GameList
            games={$games}
            sellers={$sellers}
            on:toggle_game_visibility={({ detail }) =>
                games.toggle_hidden(detail)} />
    {/if}
</article>

<script>
    import { getContext } from 'svelte';
    import GameList from './GameList.svelte';

    const games = getContext('games');
    const sellers = getContext('sellers');

    function pretty_date(date) {
        if (!date) return '';

        return date.replace(/T.*/, '');
    }
</script>

<style>
    p {
        font-size: var(--font-size-10);
        max-width: 60em;
        text-align: justify;
        margin-left: 3em;
        margin-right: 3em;
    }
    a {
        color: var(--primary);
        text-decoration: underline;
    }
    .game-cell {
        display: flex;
    }
    .game-cell > * {
        display: block;
    }
    .game-desc {
        flex: 1;
    }
    td {
        font-size: var(--font-size-10);
    }

    @media screen and (max-width: 730px) {
        h1 {
            font-size: var(--font-size-12);
        }
        p {
            font-size: inherit;
            margin-left: 1em;
            margin-right: 1em;
        }
    }
</style>