{{ partial "header.html" . }}
    <main id="main">
        <div class="container">
            <div class="row justify-content-center text-center my-5">
                <div class="col-lg-10">
                    {{ range .Params.categories }}
                    <a href="{{ $.Site.BaseURL }}categories/{{ . | urlize }}/" class="d-inline-block link-cta mb-4 text-uppercase">{{ . }}</a>
                    {{ end }}
                    <h1 class="mb-4 text-center">{{ .Title }}</h1>
                    <p class="small mb-5 text-center"><span class="text-uppercase">{{.Date.Format "January 2, 2006"}}</span></p>
                </div>
            </div>
        </div>
        <div class="bg-skew bg-skew-light">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <article class="pb-2">
                            {{ .Content }}
                            <p class="mt-5 text-center">
                                {{ with .Params.tags }}
                                <span class="text-secondary">Tagged: </span>
                                {{ end }}
                                {{ range .Params.tags }}
                                <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}/" class="link-tag text-dark">#{{ . }}</a>
                                {{ end }}
                            </p>
                        </article>
                        <div class="row pt-5 pb-5">
                            <div class="col-6 text-left">
                            {{ with .PrevInSection }}
                              <a class="text-reset" href="{{ .Permalink }}">&larr; {{ .Title }}</a>
                            {{ end }}
                            </div>
                            <div class="col-6 text-right">
                            {{ with .NextInSection }}
                              <a class="text-reset" href="{{ .Permalink }}">{{ .Title }} &rarr;</a>
                            {{ end }}
                            </div>
                        </div>                                                
                    </div>
                </div>
            </div>
        </div>
    </main>
{{ partial "footer.html" . }}