{{ template "wheeljam_2022_base.html" . }}

{{ define "content" }}
    <style>
        :root {
            --theme-color: white;
            --theme-color-dimmer: rgba(255, 255, 255, 0.1);
        }

        #title {
            margin-top: 0;
        }
    </style>

    <div id="top-container" class="flex flex-column items-center ph3">
        <h1 id="title">Wheel Reinvention Jam</h1>
        <h2 id="dates">August 15 - 21, 2O22</h2>
        <div id="tagline" class="center">
            A one-week jam to change the status quo.
        </div>
    </div>

    <div class="section bg-black-20 pt4 pb3 pb4-ns">
        <div class="mw8 margin-center ph3 ph4-l flex flex-column flex-row-ns g3">
            <div class="flex-grow-1 overflow-hidden">
                {{ if eq .DaysUntilEnd 0 }}
                    <h3 class="mt0 mb3">Project updates</h3>
                {{ else }}
                    <h3 class="mt0 mb3">Recent updates</h3>
                {{ end }}
                <div class="timeline">
                    {{ range .TimelineItems }}
                    {{ template "timeline_item.html" . }}
                    {{ end }}
                </div>
            </div>
            <div class="w-40-ns flex-shrink-0">
                <h3 class="mt0 mb3">Projects</h3>
                <div class="projects flex flex-column g3 back-to-normal">
                    {{ range .JamProjects }}
                        {{ template "project_card.html" projectcarddata . "" }}
                    {{ end }}
                </div>
            </div>
        </div>
    </div>
{{ end }}