{{ template "base.html" . }}

{{ define "extrahead" }}
<style>
    .jam-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    }
</style>
{{ end }}

{{ define "content" }}
<div class="ph3 ph0-ns">
    <h2>Jams</h2>

    <p>Since 2020, we have been running programming jams to encourage community members to explore new ideas and start projects. You can view all the past submissions and results here.</p>

    <div class="jam-grid g3">
        <a href="{{ .VJ2023Url }}">
            <div class="br2 overflow-hidden flex">
                <img src="{{ static "visjam2023/TwitterCard.png" }}">
            </div>
        </a>
        <a href="{{ .WRJ2022Url }}">
            <div class="br2 overflow-hidden flex">
                <img src="{{ static "wheeljam2022/TwitterCard.png" }}">
            </div>
        </a>
        <a href="{{ .WRJ2021Url }}">
            <div class="br2 overflow-hidden flex">
                <img src="{{ static "wheeljam2021/TwitterCard.png" }}">
            </div>
        </a>
        <a href="{{ .LispJamUrl }}" class="br2 overflow-hidden relative aspect-ratio--2x1 bg--card">
            <div class="aspect-ratio--object flex flex-column flex justify-center items-center f3 c--dim">
                <h3>LISP Jam</h3>
            </div>
        </a>
    </div>
</div>
{{ end }}
