1
1
Fork 0
portfolio/_includes/category.njk
2024-03-27 22:29:18 -05:00

35 lines
1.5 KiB
Text

{% include "base-header.html" %}
<main class="mt-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
<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="mt-6 pt-10 grid gap-8 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
{%- for content in collections[ page.fileSlug ] | reverse -%}
<div class="motion-safe:animate-fade-up motion-safe:animate-delay-[{{loop.index * 100}}ms] animate-once">
<a href="{{ content.url }}" class="bg-base/75 px-5 pt-3 pb-px motion-safe:transition-colors block outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
<h3 class="text-xl font-semibold text-subtext0 underline">
{{ content.data.title }}
</h3>
<p class="text-sm text-mauve">
<time datetime="{{ content.data.date | date('YYYY-MM-DD') }}">{{ content.data.date | date }}</time>
</p>
<p class="mt-3 text-base text-text">
{{ content.data.description | markdown | safe }}
</p>
</a>
</div>
{%- endfor -%}
</div>
</div>
</main>
{% include "base-footer.html" %}