{% 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-6xl tracking-tight text-pink contrast-more:contrast-150">
        {{ title }}
        <small class="inline-block h-1 text-xl text-text">
          in <a href="/{{tags[0]}}" class="link">{{ tags[0] | capitalize }}</a>
        </small>
      </h1>
    </div>
    <p class="ml-8 text-sm text-gray-500 contrast-more:contrast-150">
      {{description | markdown | safe}}
    </p>
  </div>

  <div class="mx-2 bg-base dark:bg-base/85 rounded contrast-more:bg-crust shadow border-l-2 border-yellow">
    <div class="p-4 sm:p-6 contrast-more:contrast-150">
      <img src="{{coverImage}}" alt="" rel="presentation" class="mb-8 rounded" />
      {{ content | safe }}
    </div>
  </div>
</main>

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