---
layout: base.njk
---

<article>
  <header style="background-image: url({{ image.src }})" class="relative mb-8 grid h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6 lg:mb-12 lg:h-160 lg:pb-12 2xl:h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65">
    <div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl xl:prose-2xl dark:prose-invert prose-headings:font-normal">
      <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:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
              {% lucide "tag", { "class": "size-4 md:size-5 xl:size-6" } %}
              {{ tag }}
            </li>
          {%- endfor %}
        </ul>
      {% endif %}
    </div>
  </header>

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