{{ define "main" }}
<div class="hx:mx-auto hx:flex hextra-max-page-width">
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true
    "displayPlaceholder" true) }}
    <main
        id="content"
        class="hx:w-full hx:break-words hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:pb-8 hx:px-6 hx:pt-4 hx:md:px-12"
    >
        <div class="hx:flex hx:flex-col hx:items-center hx:text-center">
            {{ .Content }}
        </div>

        {{- $pages := where .Site.RegularPages "Section" "blog" }} {{- $pages =
        $pages.ByDate.Reverse }} {{- $recent := first 6 $pages }} {{- $readMore
        := (T "readMore") | default "Read more →" }}

        <div class="hx:mt-16">
            {{- range $recent }}
            <div class="hx:mb-8">
                <h3>
                    <a
                        style="color: inherit; text-decoration: none"
                        class="hx:block hx:font-semibold hx:text-xl hx:hover:text-primary-600 hx:dark:hover:text-primary-400 hx:transition-colors"
                        href="{{ .RelPermalink }}"
                        >{{ .Title }}</a
                    >
                </h3>
                {{- if site.Params.blog.list.displayTags }}
                <div class="hx:text-sm hx:leading-7">
                    {{ partial "tags.html" (dict "context" .) }}
                </div>
                {{- end }}
                <p class="hx:opacity-80 hx:mt-2 hx:leading-7">
                    {{- partial "utils/page-description" . -}}
                </p>
                <p class="hx:opacity-50 hx:text-sm hx:mt-2 hx:leading-7">
                    {{ partial "utils/format-date" .Date }}
                </p>
            </div>
            {{- end }} {{- if gt (len $pages) 6 }}
            <p class="hx:mt-6">
                <a
                    href="/blog"
                    class="hx:font-medium hx:text-primary-600 hx:hover:text-primary-700 hx:dark:text-primary-400"
                >
                    {{ $readMore }}
                </a>
            </p>
            {{- end }}
        </div>
    </main>
    <div class="hx:max-xl:hidden hx:h-0 hx:w-64 hx:shrink-0"></div>
</div>
{{ end }}