{{ define "body" }}
<section id="body-wrapper" class="section blog-listing">
    <section class="container {{ site.Params.GridSize }}">

        <div class="columns">
            <div id="item" class="column col-12 extra-spacing">
                <div class="bricklayer">
                    {{ range .Pages.ByPublishDate.Reverse }}
                    <div class="card">
                        {{ $ctx := . }}
                        {{ with .Params.image }}
                        <div class="card-image">
                            <a href="{{ $ctx.RelPermalink }}">
                                <img alt="" src="{{ . | relURL }}">
                            </a>
                        </div>
                        {{ end }}
                        <div class="card-header">
                            <div class="card-title">
                                <h5 class="p-name mt-1">
                                    <a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a>
                                </h5>
                            </div>
                        </div>
                        <div class="card-body">
                            {{ .Summary }} <a href="{{ .RelPermalink }}">Read More…</a>
                        </div>
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
    </section>
</section>
{{ end }}

{{ define "javascripts" }}
<script src="/js/bricklayer.min.js"></script>
<script src="/js/scopedQuerySelectorShim.min.js"></script>
<script>
    //Bricklayer
    var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))
</script>
{{ end }}