{{- define "main" -}}
<header>
  <hgroup>
    <h1>
      Principle product <span color="blue">designer</span> building <span color="red">thoughtful</span> and <span color="yellow">accessible</span> interfaces.
    </h1>
    <p class="lede">
      <b>20 years experience</b> designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, &amp; WCAG to <b>bridge design and engineering</b>. Performance, accessibility, and the semantic web still matter!
    </p>
    <p class="lede">
      Read more about my <a href="design" out>design philosophy</a> or take a look at some <a href="#studies" in>case studies</a> below.
    </p>
  </hgroup>
  <div id="semicircle"></div>
  <div id="square"></div>
  <div id="circle"></div>
  <div id="rectangle"></div>
  <div id="triangle"></div>
</header>
<section id="studies">
  <h1>Case studies</h1>
  {{ range where .Site.RegularPages "Section" "studies" }}
    {{- $page := . -}}
    {{- $cardImage := "" -}}
    {{- with .Params.list.img -}}
      {{- $match := $page.Resources.GetMatch . -}}
      {{- if not $match -}}
        {{- $match = $page.Resources.GetMatch (printf "img/%s" .) -}}
      {{- end -}}
      {{- with $match -}}
        {{- $cardImage = .RelPermalink -}}
      {{- end -}}
    {{- end -}}
  <article{{ with $cardImage }} style="--card-bg: url('{{ . }}');"{{ end }}>
    <a href="{{ .RelPermalink }}">
      <h2>{{ .Title }}</h2>
      <p>{{ .Summary }}</p>
      {{ with .Params.list.more }}<p>{{ . }}</p>{{ end }}
      {{- with .Params.study.facts -}}
      <div>
        {{- range . -}}
          {{- if or (eq .label "Role") (eq .label "Tools") (eq .label "Industry") -}}
            {{- $fact := . -}}
            {{- $iconColor := "" -}}
            {{- range $page.Params.list.facts -}}
              {{- if eq (lower .key) (lower $fact.label) -}}
                {{- $iconColor = .color -}}
              {{- end -}}
            {{- end -}}
        <figure>
            {{- with $fact.icon -}}
              {{ partial "icon.html" (dict "name" . "color" $iconColor) }}
            {{- end -}}
          <figcaption {{ with $fact.class }}class='{{ . }}'{{ end }}>{{ $fact.value | markdownify }}</figcaption>
        </figure>
          {{- end -}}
        {{- end -}}
      </div>
      {{- end -}}
    </a>
  </article>
  {{- end -}}
</section>
{{ end }}