45 lines
2 KiB
Text
45 lines
2 KiB
Text
{% include "base-header.html" %}
|
|
|
|
<main class="max-w-7xl mx-auto p-2">
|
|
<div class="relative max-w-lg mx-auto divide-y-2 divide-overlay2 lg:max-w-7xl">
|
|
<div class="p-2 bg-base/75 shadow rounded border-2 border-base border-l-yellow">
|
|
<h1 class="text-yellow mt-2 mb-8 text-3xl tracking-tight sm:text-4xl">
|
|
{{ title }}
|
|
</h1>
|
|
<div class="mt-3">
|
|
{{ content | safe }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 grid gap-8 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
|
|
{%- for content in collections.pinned | reverse -%}
|
|
<div>
|
|
<div>
|
|
<a href="/{{ content.data.tags[0] }}/" class="inline-block focus:outline-link">
|
|
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-pink-100 text-pink-700 hover:underline">
|
|
{{ content.data.tags[0] | capitalize }}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<a href="{{ content.url }}" class="block mt-4 focus:outline-link">
|
|
<h3 class="relative bg-pink-100 h-20 overflow-hidden rounded-tl-lg rounded-tr-lg text-xl font-semibold text-pink-700">
|
|
<span class="absolute z-10 inset-3">{{ content.data.title }}</span>
|
|
<img class="absolute grayscale opacity-20 contrast-50 scale-110 bottom-1/2 left-0 right-0 translate-y-1/2" src="{{ content.data.image }}" alt="" role="presentation" />
|
|
</h3>
|
|
<div class="relative overflow-hidden h-24 rounded-bl-lg rounded-br-lg pt-3 text-base text-slate-500">
|
|
<div class="absolute contrast-50 scale-110 bottom-1/2 left-0 -right-0 translate-y-1/2">
|
|
<img class="mb-40 grayscale opacity-10" src="{{ content.data.image }}" alt="" role="presentation" />
|
|
</div>
|
|
<p class="px-3 relative z-10">
|
|
{{ content.data.description }}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{%- endfor -%}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% include "base-footer.html" %}
|
|
|