{{ define "header" }}
  {{ partial "masthead.html" . }}
{{ end }}
{{ define "main" }}
  <header>
    <h1>{{ .Title }}</h1>
    {{ if .Description }}
      <blockquote itemprop="description">{{ .Description }}</blockquote>
    {{ end }}
  </header>
  {{ .Content }}
  <style>
    dl {
      display: grid;
      grid-template-columns: repeat(1, 1fr 2fr);
      grid-gap: 1rem;
    }
    dt {
      text-align: right;
    }
    dd {
      margin-inline-start: unset;
      margin-bottom: 2rem;
    }
    .hack article:first-of-type h2 {
      margin-top: 30px;
    }
    .hack h2 {
      position: sticky;
      top: 20px;
      padding: 5px;
      background-color: #1976d215;
      margin: -20px 0 30px;
    }
    .hack h2:before {
      content: ">> ";
    }
    .hack h2:after {
      content: " <<";
    }
    @media screen and (min-width: 30em) {
      dl {
        grid-template-columns: repeat(2, 1fr 2fr);
      }
      .hack h2 {
        text-align: center;
      }
    }
  </style>
  {{ $scratch := newScratch }}
  {{ range .Paginator.Pages }}
    {{ $scratch.Add "categories" .Params.categories | first 1 }}
  {{ end }}
  {{ $categories := $scratch.Get "categories" | uniq }}
  <nav class="alert alert-info">
    <b>Category:</b>
    {{ range $categories }}
      <a href="#{{ . | anchorize }}">{{ . | title }}</a>
    {{ end }}
  </nav>
  {{ range $categories }}
    <article>
      <h2 id="{{ . | anchorize }}">{{ . | title }}</h2>
      <dl>
        {{ range where $.Paginator.Pages "Params.categories" "intersect" (slice .)  }}
          <dt><a href="{{ .RelPermalink }}">{{ .Title }}</a>
          <dd>{{ .Description }}
        {{ end }}
      </dl>
    </article>
  {{ end }}
{{ end }}
{{ define "footer" }}
  {{ partial "pagination.html" . }}
  {{ partial "powered-by.html" . }}
  {{ partial "cookie-disclaimer.html" . }}
{{ end }}