{% 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>
      <h1 class="text-6xl tracking-tight text-pink">
        {{ page.fileSlug | capitalize }}
      </h1>
      <div class="mt-3 text-xl text-subtext1 sm:mt-4">
        {{ description | markdown | safe }}
      </div>
    </div>


  <div class="mx-2 bg-base dark:bg-base/85 rounded contrast-more:bg-crust shadow border-l-2 border-yellow">
    <div class="flex flex-col gap-4 p-4 sm:p-6 contrast-more:contrast-150">
      {%- for post in collections.posts | reverse -%}
        <div>
          <a href="{{ post.url }}" class="link text-2xl">{{ post.data.title }}</a>
          <p class="text-sm text-mauve">
            <time datetime="{{ post.data.date | date('YYYY-MM-DD') }}">{{ post.data.date | date }}</time>
          </p>
          <p class="text-text">
            {{ post.data.description }}
          </p>
        </div>
      {%- endfor -%}
    </div>
  </div>
</main>

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