{{ define "main" }}
  {{- partial "background.html" . -}}

  <main class="page-content">
    <header class="article-header">
      <div class="article-meta">
        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
        <span class="meta-sep">·</span>
        <span>{{ math.Round (div (countwords .Content) 200.0) }} min read</span>
      </div>
      <h1>{{ .Title }}</h1>
      <p class="tags">
        {{ range .Params.tags }}
          <span class="tag">{{ . }}</span>
        {{ end }}
      </p>
      <div class="project-links">
        {{ with .Params.code }}<a href="{{ . }}">Code ↗</a>{{ end }}
        {{ with .Params.demo }}<a href="{{ . }}">Live Demo ↗</a>{{ end }}
      </div>
    </header>

    <article class="project-body">
      {{ .Content }}
    </article>

    <footer class="article-footer">
      <a href="/projects/">← all projects</a>
    </footer>
  </main>
{{ end }}