---
layout: base.njk
---

<article>
  <header
    {% if image and image.src != '' %}
      style="background-image: image-set({% bgimgset image.src %})"
    {% endif %}
    {% if image and image.credit != '' %}
      data-credit="{{ image.credit }}"
    {% endif %}
    class="relative mb-8 grid min-h-96 grid-flow-row grid-rows-article-header place-items-center gap-6 bg-cover bg-center pt-20 px-safe-offset-8 pb-8 *:z-10 before:absolute before:inset-0 before:bg-slate-300/65 after:absolute after:right-0 after:bottom-0 after:z-10 after:rounded-tl-md after:bg-black after:px-2 after:py-1 after:text-xs after:text-white after:content-[attr(data-credit)] sm:min-h-128 sm:pt-28 md:pt-32 md:after:text-sm lg:mb-12 lg:min-h-160 lg:px-safe-offset-12 lg:pb-12 2xl:min-h-192 dark:before:bg-slate-900/65"
  >
    <div class="mx-auto prose prose-slate md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-h1:m-0">
      <h1 class="text-balance text-center">{{ title }}</h1>
    </div>
    <div class="not-prose space-y-6 self-end text-sm md:text-base xl:text-lg 2xl:text-xl">
      {%- from 'postmeta.macro.njk' import postmeta %}
      {{ postmeta({ date: page.date, author: author, content: content, center: true }) }}
      {% if tags.length > 0 %}
        <ul class="flex flex-wrap justify-center gap-1" aria-label="Tagged in">
          {% for tag in tags %}
            <li class="inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:bg-sky-950">
              {% lucide "tag", { "class": "size-4 md:size-5 xl:size-6" } %}
              {{ tag }}
            </li>
          {%- endfor %}
        </ul>
      {% endif %}
    </div>
  </header>

  <section class="mx-auto prose px-safe-offset-4 prose-slate md:prose-lg md:px-safe-offset-6 lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-figcaption:text-center prose-figcaption:text-balance prose-strong:font-bold prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl">
    {{ content | safe }}
  </section>
</article>