{% extends "layout.html" %}

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

{% block body %}
<h1 class="logo"><a href="{{ config.base_url }}/" class="no-border hover-underline">👨‍💻 {{ config.title }}</a></h1>

<nav>
  {% for ancestor in page.ancestors %}
    {% set section = get_section(path=ancestor) %}
    {% if section.path == "/" %}
      <a href="{{ config.base_url }}{{ section.path }}" class="no-border hover-underline">Home</a>
    {% else %}
      <span class="breadcrumb-sep">/</span>
      <a href="{{ config.base_url }}/{{ section.path }}" class="no-border hover-underline">{{ section.title }}</a>
    {% endif %}
  {% endfor %}
</nav>

<article id="{{page.slug }}">
  <h2>
    <a href="{{ page.permalink }}">{{ page.title }}</a>
  </h2>
  {% if page.date %}
  <div class="post-metadata">
    <div class="date-published">
      <svg class="date-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1" x="0px" y="0px"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M38.6172116,78.6191533 L47.8030928,78.6191533 L47.8030928,69.4332721 L38.6172116,69.4332721 L38.6172116,78.6191533 Z M24.8586734,78.6191533 L34.0445546,78.6191533 L34.0445546,69.4332721 L24.8586734,69.4332721 L24.8586734,78.6191533 Z M66.1332478,64.2656288 L75.319129,64.2656288 L75.319129,55.0797476 L66.1332478,55.0797476 L66.1332478,64.2656288 Z M52.3757498,64.2656288 L61.561631,64.2656288 L61.561631,55.0797476 L52.3757498,55.0797476 L52.3757498,64.2656288 Z M38.6172116,64.2656288 L47.8030928,64.2656288 L47.8030928,55.0797476 L38.6172116,55.0797476 L38.6172116,64.2656288 Z M24.8586734,64.2656288 L34.0445546,64.2656288 L34.0445546,55.0797476 L24.8586734,55.0797476 L24.8586734,64.2656288 Z M66.1332478,49.9110641 L75.319129,49.9110641 L75.319129,40.7251829 L66.1332478,40.7251829 L66.1332478,49.9110641 Z M52.3757498,49.9110641 L61.561631,49.9110641 L61.561631,40.7251829 L52.3757498,40.7251829 L52.3757498,49.9110641 Z M38.6172116,49.9110641 L47.8030928,49.9110641 L47.8030928,40.7251829 L38.6172116,40.7251829 L38.6172116,49.9110641 Z M24.8586734,49.9110641 L34.0445546,49.9110641 L34.0445546,40.7251829 L24.8586734,40.7251829 L24.8586734,49.9110641 Z M13.1607434,90.8382164 L87.7337471,90.8382164 L87.7337471,30.2016227 L13.1607434,30.2016227 L13.1607434,90.8382164 Z M13.1617836,26.0408793 L87.7347873,26.0408793 L87.7347873,16.2662529 L13.1617836,16.2662529 L13.1617836,26.0408793 Z M73.5237682,12.1055095 L73.5237682,5 L69.3630249,5 L69.3630249,12.1055095 L31.5314656,12.1055095 L31.5314656,5 L27.3707222,5 L27.3707222,12.1055095 L9,12.1055095 L9,95 L91.8955307,95 L91.8955307,12.1055095 L73.5237682,12.1055095 Z" fill="currentColor"/></g></svg>
      <time datetime="{{ page.date }}">{{ page.date | date(format="%d %B %Y") }}</time>
    </div>
    {%- if page.extra.updated %}
    <div class="date-updated">
      <span class="ornament">&middot;</span><em><span class="updated small-caps">updated</span>
        <time datetime="{{ page.extra.updated }}">{{ page.extra.updated | date(format="%d %B %Y") }}</time>
      </em>
    </div>
    {% endif %}
  </div>
  {% endif %}

  <div class="post-body">
    {{ page.content | safe }}
  </div>
  <div class="respond">
    <h3>
      <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
        <title>Comment</title>
        <defs></defs>
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M2,3 L29,3 L29,20 L24,20 L16,28 L16,20 L2,20 L2,3 Z" id="comment" stroke="#484848" stroke-width="2" sketch:type="MSShapeGroup"></path>
        </g>
      </svg>
      Stay in touch!
    </h3>
    <p> Follow me on <a href="https://twitter.com/wezm">Twitter</a> or the <a href="https://decentralised.social/wezm">Fediverse</a>, <a href="{{ config.base_url }}/rss.xml">subscribe to the feed</a>, or <a href="mailto:wes@wezm.net">send me an email</a>.
    </p>
  </div>
</article>
{% endblock %}