{{ partial "header.html" . }}

<body>

    <div class="section" id="top">
        <!-- Parent section -->
        <div class="container hero {{ if .Site.Params.fadeIn | default true }}fade-in one{{ end }}">
            <!-- Begin Title -->
            <h1 class="bold-title is-1">{{ .Title | default "Blog" }}</h1>
        </div>
        <!-- End Title -->

        <!-- Everything below fades in two! -->
        <div class="section no-padding {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }}">

            <div class="container">
                <!-- Begin Nav bar -->
                {{ partial "nav-list.html" . }}
            </div>
            <!-- End Nav bar -->

            <div class="container markdown {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }} top-pad">
                <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
                {{ .Content }}
            </div>
            <div class="container">
                {{ if .Site.Params.showLatest }}
                <h2 class="title is-2 top-pad">Latest Post</h2>
                {{ range first 1 (where .Data.Pages.ByPublishDate.Reverse "Section" "blog") }}
                <div class="summary">{{ .Date.Format (.Site.Params.dateForm | default "Jan 02, 2006") }}
                    <h3 class="title is-3 strong-post-title">
                        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                    </h3>
                    <div class="markdown">
                        {{ .Summary }} {{ if .Truncated }}
                        <a href="{{ .RelPermalink }}">...Read More</a>
                        {{ end }}
                    </div>
                </div>
                {{ end }} {{ end }}

                <h2 class="title is-2 top-pad">All Posts</h2>
                <ul>
                    {{ range .Data.Pages.ByPublishDate }} {{ if eq .Section "blog" }} {{ partial "li.html" . }} {{ end }} {{ end }}
                </ul>

            </div>
            <!-- End Blog container -->

            <div class="container has-text-centered top-pad">
                <hr>
                <a href="{{ .Permalink }}#top">
                    <i class="fa fa-arrow-up"></i>
                </a>
                <hr>
            </div>

            {{ partial "footer.html" . }}
        </div>
        <!-- End fade in two -->
    </div>
    <!-- End parent section -->

    <!-- Bitty scrolling links script -->
    <script>
        $('a[href^="{{ .Permalink }}#"]').click(function (e) {
            e.preventDefault();
            var target = this.hash;
            $('html, body').animate({
                scrollTop: $(target).offset().top
            }, 500);
            return false;
        })
    </script>

</body>