{% extends "base.html" %}


{% block extra_head %}
<link rel="canonical" href="{{ page.permalink }}">
{% endblock extra_head %}

{% block title %}
{{ page.title }}
{% endblock title %}

{% block content %}

<div class="mx-auto px-4 max-w-3xl py-8">
  <div class="py-2">
  {{ prev_macros::page_back_link(page=page) }}
  </div>

<article class="blog-content">
  <h1 class="title">
    {{ page.title }}
  </h1>
  <a href="https://github.com/kjuulh" target="_blank" rel="noopener noreferrer" class="text-peach hover:text-orange-400">
      @kjuulh
  </a>
  <p class="subtitle"><strong>{{ page.date }}</strong></p>
  {{ page.content | safe }}
</article>

{% if page.lower or page.higher %}
    <div class="flex place-content-around max-w-lg mx-auto">
        {% if page.lower %}
            <a class="previous" href="{{ page.lower.permalink }}">‹ {{ page.lower.title }}</a>
        {% endif %}
        {% if page.higher %}
            <a class="next" href="{{ page.higher.permalink }}">{{ page.higher.title }} ›</a>
        {% endif %}
    </div>
{% endif %}
</div>

{% endblock content %}