{{ define "main" }}
<main aria-role="main">
  <section class="hero ">
    <div class="hero-body">
      <div class="container">

       <!-- index page content included from content folder -->
       {{ if .Site.Params.useIndexContent }}
        <div class="columns">
          <div class="column">
            <div class="content">
                <h1 class="title">{{ .Title | title }}</h1>
                <p>{{ .Content }}</p>
            </div>
          </div>
        </div>
        {{ end}}


        <!-- first post content -->
        {{ range first 3 (where .Site.RegularPages "Type" "blog")  }}
        <div class="columns">
          <div class="column">
            <figure class="image ">
              {{ with .Resources.GetMatch "header.*" }}
                <img src="data:{{ .MediaType }};base64,{{ .Content | base64Encode }}">
              {{ end }}
            </figure>
          </div>
        </div>

          <div class="columns">
            <div class="column">
                <p class="title"><a class="nope" href="{{ .RelPermalink }}"> {{ .Title | title }}</a></h1>

              <div class="content">
                <h2 class="subtitle is-5"><time>{{ .Date.Format "January 2, 2006" }}{{ if ne .Lastmod .PublishDate }} / Updated {{ .Lastmod.Format "January 2, 2006" }}{{ end }}</time></h2>
                <p class="subtitle is-4">{{.Page.Description}}</p>
                <p>{{ .Summary }}</p>
                {{ if .Truncated }}
                  <div class="read-more">
                    <i class="fas fa fa-bookmark"></i><a class="is-italic" href="{{ .RelPermalink }}"> Read More…</a>
                  </p>
                {{ end }}
                </div>
              </div>
            </div>
        </div>
        {{ end }}

      </div>
    </div>
  </section>

</main>
{{ end }}