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

<article>
    <h1>Ottawa board games for sale and to trade</h1>

    <p>
        This is a list of games for sale or trade of people living in the Ottawa
        region, taken from their profiles on
        <a href="https://boardgamegeek.com">Board Game Geek</a>.
    </p>

    <p>
        If you want to be added to the list of sellers, you can send me a
        <a
            target="_blank"
            href="https://boardgamegeek.com/geekmail/compose?touser=yenzie">
            BGG mail</a
        >. All I need is your BGG username, and I'll be able to gather all your
        games tagged <em>For Trade</em>. If there is a price mentioned in the
        <em>Trading Notes</em>
        of the game (that is, any number prefixed with a <em>$</em>), it'll be
        assumed to be the asking price.
    </p>

    <p>
        Have questions, suggestions, anything else? Discussion of this service
        happens in the <a
            href="https://boardgamegeek.com/thread/3238117/auto-generating-ottawa-specific-saletrade-page"
            >Ottawa Guild</a
        >.
    </p>

    <GameList games={data.games} />
</article>

<script>
    // TODO hide games I'm not interested in
    // TODO add cart
    // TODO prettify via beercss
    import GameList from './GameList.svelte';

    export let data;

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

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

<style>
    :global(:root) {
        --font-size-10: 1rem;
        --font-size-11: 1.5rem;
        --font-size-12: 1.75rem;
        --font-size-13: 2rem;
        --font-size-14: 2.25rem;
    }
    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>