{{ template "jam_2023_visibility_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">Visibility Jam</h1>
  <h2 id="dates">April 14 - 16, 2023</h2>
  <div id="tagline" class="center">See things in a new way.</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 }}