{% extends "_default/base.html" %}

{% block content %}
<img src="processed_images/threefold_img2.png" alt="">
<div class="sm:w-5/6 md:w-4/5 xl:w-1/2 mt-10 mr-auto ml-auto px-6 lg:px-16">
  <article class="article">
    <div class="border-blue-700 dark:border-white mx-auto my-auto w-4/5 border-solid border-b-4"></div>
    {{ page.content | safe }}
  </article>
</div>
{% if page.earlier or page.later %}
  <div class="font-sans w-full px-8 md:px-0 bg-blue-700 align-middle mt-10 mb-10">
    <h3 class="text-center text-3xl tracking-normal mb-2 pt-2"><a href="/posts" class="border-transparent text-blue-100 hover:text-white">Other posts</a></h3>
    {% if page.later %}
    <p class="text-center mt-2 mb-0 text-xl text-white leading-tight tracking-tight">
      <strong>Next</strong>: 
      <a class="border-transparent text-blue-100 hover:text-white hover:border-blue-100" href="{{ page.later.permalink }}">{{ page.later.title }}</a>
    </p>
    {% endif %}
    {% if page.earlier %}
    <p class="text-center pb-4 mt-2 text-xl text-white leading-tight tracking-tight">
      <strong>Previous</strong>: 
      <a class="border-transparent text-blue-100 hover:text-white hover:border-blue-100" href="{{ page.earlier.permalink }}">{{ page.earlier.title}}</a>
    </p>
    {% else %}
    <span class="text-xs">&nbsp;</span>
    {% endif %}
  </div>
{% endif %}
{% endblock content %}