<!DOCTYPE html>
<html>

{% include head.html %}

<body>

  <div>

    <header class="header-background">

      <div class="clearfix border-bottom-thick header-border">
        <ul class="list-reset right py-1 header-text font-smoothing">
          {% assign pages = site.pages | sort: "sort_index" %}
          {% for my_page in pages %}
          {% if my_page.title %}
          <li class="inline-block">
            <a class="align-middle link-primary header-link mr-2" href="{{ my_page.url | prepend: site.baseurl }}">{{
              my_page.title }}</a>
          </li>
          {% endif %}
          {% endfor %}
        </ul>
      </div>

      <div class="container mx-auto px-2 mb-2 clearfix header-text">
        <h1 class="h0 inline-block col-9 sm-width-full py-2 mt-3 header-title">{{ site.title }}</h1>

        <div class="clearfix mb-4">
          <div class="sm-width-full border-top-thin">
            <div class="table">
              {% for badge in site.badges %}
              <div class="inline-block mt-3 mr-1">
                <a href="{{ badge.href }}">
                  <img src="{{ badge.img }}">
                </a>
              </div>
              {% endfor %}
            </div>
            <!-- Set site description in config.yml -->
            <p class="h4 lh-condensed font-smoothing mt-2 py-1">{{ site.description }}</p>
          </div>
        </div>

      </div>
    </header>

    <article class="container mx-auto px-2 mt2 mb4">
      <div class="prose mb-4 py-4">
        {{ content }}
      </div>
    </article>

  </div>

  {% include footer.html %}

</body>

</html>