{% include "base-header.html" %}

<main class="max-w-4xl mx-auto sm:px-6 lg:px-8">
  <div class="max-w-3x1 mx-auto mb-4 px-2 py-1 sm:rounded contrast-more:bg-base">
    <div class="flex flex-wrap items-baseline">
      <h1 class="my-2 text-5xl tracking-tight fancy-heading inline-block motion-safe:animate-fade-right">
        <span class="font-serif">{{ title }}</span>
        <small class="inline-block h-1 mt-0 text-xl text-text font-light">
          in
          {% if '/blog' in page.url %}
            <a href="/blog" class="link">Blog</a>
          {% else %}
            <a href="/{{tags[0]}}" class="link">{{ tags[0] | capitalize }}</a>
          {% endif %}
        </small>
      </h1>
    </div>
    {{description | markdown | safe}}
  </div>

  <div class="markdown-content mx-2 bg-base dark:bg-base/85 rounded contrast-more:bg-crust shadow border-l-2 border-yellow flex flex-col gap-2">
    <img src="{{coverImage or image}}" alt="" rel="presentation" class="border-b border-yellow" />
    <div class="p-4 sm:p-6 contrast-more:contrast-150">
      {{ content | safe }}
    </div>
    {% if '/blog' in page.url %}
      <hr class="border-yellow" />
      <footer class="p-4 pt-0 sm:p-6 sm:pt-2 contrast-more:contrast-150 text-text">
        Thanks for reading! This blog has a <a href="/blog/rss" rel="me" class="link">RSS feed</a> if you'd like to stay up to date.
      </footer>
    {% endif %}
  </div>
</main>

{% include "base-footer.html" %}