{% include header.html %}

{% if site.layout == 'stacked' %}
  <div class="container-lg py-6 p-responsive text-center">
    {% include masthead.html metadata=true %}

    <div {% if site.style == 'dark' %}class="text-white"{% endif %}>
      {{ content }}
    </div>

    <div class="my-6">
      {% include projects.html %}
    </div>

    {% if site.topics %}
      <div class="my-6">
        {% include interests.html %}
      </div>
    {% endif %}

    {% unless posts_total == 0 %}
      <div class="my-6">
        {% include thoughts.html %}
      </div>
    {% endunless %}
  </div>
{% else %}
  <div class="d-md-flex min-height-full {% unless site.style == 'dark' %}border-md-bottom{% endunless %}">
    <div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
      {% include masthead.html metadata=true %}
    </div>

    <div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7 border-top border-md-top-0 bg-gray-light" {% if site.style == 'dark' %}style="background-color: #2f363d !important"{% endif %}>
      <div class="mx-auto" style="max-width: 900px;">
        {% unless content == ""  %}
          <div class="f4 {% if site.style == 'dark' %}text-white{% endif %} mb-6">
            {{ content }}
          </div>
        {% endunless %}

        {% include projects.html %}

        {% if site.topics %}
          {% include interests.html %}
        {% endif %}

        {% unless posts_total == 0 %}
          {% include thoughts.html %}
        {% endunless %}
      </div>
    </div>
  </div>
{% endif %}

{% include footer.html %}