{% layout 'layouts/html.liquid' %}

{% block head %}
<title>games</title>
{% endblock %}

{% block content %}

<h1>Games</h1>

{% for game in gamesArray %}
    <div class="game-card">
        <div class="card-left">
            <a href="{{ pageUrl }}/{{ game.slug }}">
            <img class="game-image" src="{{ game.image }}" alt="{{ game.imageAlt }}" />
            </a>
        </div>
        <div class="game-title"><a href="{{ pageUrl }}/{{ game.slug }}">{{ game.title }}</a></div>
        <div class="game-description">{{ game.description }}</div>
        <div class="game-maker">by {{ game.maker }}</div>
    </div>
{% endfor %}

<style>
    .game-card { }
    .game-card:not(:last-of-type) { margin-bottom: 20px; }
    .card-left { float: left; padding: 10px; margin-right: 10px; }
    .game-image { width: 50px; float: left; }

</style>

<script>

</script>
{% endblock %}