{{!< default}}

<header class="blog-header {{#if @site.cover_image}} has-cover{{/if}}">
    <div class="inner">
        <div class="box blog-box">
            <h1 class="blog-name">{{@site.title}}</h1>
            {{#if @site.description}}
            <span class="blog-description">{{@site.description}}</span>
            {{/if}}
        </div>
        {{#if @site.cover_image}}
        <div class="blog-cover cover">
            <img
                srcset="{{img_url @site.cover_image size="s"}} 320w,
                        {{img_url @site.cover_image size="m"}} 640w,
                        {{img_url @site.cover_image size="l"}} 960w,
                        {{img_url @site.cover_image size="xl"}} 1920w"
                src="{{img_url @site.cover_image size="xl"}}"
                alt="{{@site.title}}" />
        </div>
        {{/if}}
    </div>
</header>

<div id="index" class="container">
    <main class="content" role="main">
        {{!-- Menu --}}
        <nav>
            <ul>
                {{#foreach posts}}
                <li><a href="/#{{slug}}">{{title}}</a></li>
                {{/foreach}}
            </ul>
        </nav>

        {{!-- Main Content --}}
        {{> "loop"}}
    </main>
</div>