{% extends "base.html" %}

{% block header %}
    <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header id="blog-header" class="has-cover">
      <div class="inner">
        <nav id="navigation">
          {% if SITE_LOGO %}
          <span class="blog-logo">
            <a href="{{ SITEURL }}"><img src="{{SITE_LOGO}}" alt="Blog Logo" /></a>
          </span>
          {% endif %}
          <span id="menu-button" class="nav-button">
            <a class="menu-button"><i class="ic ic-menu"></i> Menu</a>
          </span>
        </nav>
        <h1 class="blog-name"><a href="{{ SITEURL }}">{{ SITENAME }}</a></h1>
        {% if SITESUBTITLE %}
        <span class="blog-description">{{ SITESUBTITLE }}</span>
        {% endif %}
        {% if HEADER_COVER %}
            <div class="blog-cover cover" style="background-image: url('{{ HEADER_COVER }}')">
        {% elif HEADER_COLOR %}
            <div class="blog-cover cover" style="background-color: {{ HEADER_COLOR }}">
        {% else %}
            <div class="blog-cover cover" style="background-image: url('{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/home-bg.jpg')">
        {% endif %}        
      </div>
    </header>

{% endblock header %}

{% block content %}

<div id="index" class="container">
  <main class="content" role="main">
    {% include "partials/loop.html" %}
  </main>
</div>
{% endblock content %}