65 lines
3.4 KiB
Text
65 lines
3.4 KiB
Text
{% include "base-header.html" %}
|
|
|
|
<main class="max-w-7xl mx-auto px-2">
|
|
<div class="relative max-w-lg mx-auto lg:max-w-7xl flex flex-col gap-12">
|
|
<div class="pt-2 px-4 sm:pt-8 sm:px-8 sm:pb-4 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
|
|
<h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading flex flex-row gap-1 motion-safe:animate-fade">
|
|
<span>{{ title | markdown | safe }}</span><div class="typing"></div>
|
|
</h1>
|
|
<div class="mt-3 max-w-2xl">
|
|
{{ content | safe }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
|
|
{%- for content in collections.pinned | reverse -%}
|
|
<div class="motion-safe:animate-fade-up motion-safe:animate-delay-[{{loop.index * 100}}ms] animate-once">
|
|
<div>
|
|
<a href="/{{ content.data.tags[0] }}/" class="motion-safe:transition-colors inline-block outline-link underline inline-flex items-center px-3 py-0.5 rounded-full text-sm bg-mantle text-teal hover:text-sky hover:bg-base">
|
|
{{ content.data.tags[0] | capitalize }}
|
|
</a>
|
|
</div>
|
|
<a href="{{ content.url }}" class="motion-safe:transition-colors bg-gradient-to-br from-10% to-80% from-mauve via-yellow to-sky block mt-4 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">
|
|
<div class="rounded-tl rounded-tr h-16 w-full bg-center bg-105% opacity-50 saturate-0 contrast-50 overflow-hidden" style="background-image: url('{{ content.data.image }}')">
|
|
</div>
|
|
<h3 class="font-serif bg-mauve h-20 p-3 text-lg text-base">
|
|
<span class="line-clamp-2" title="{{ content.data.title }}">
|
|
{{ content.data.title }}
|
|
</span>
|
|
</h3>
|
|
<div class="py-2 px-3 h-24 rounded-bl rounded-br text-text bg-crust line-clamp-3" title="{{ content.data.description }}">
|
|
{{ content.data.description | markdown | safe }}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{%- endfor -%}
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
{%- set top = 3 -%}
|
|
{%- for content in collections.posts | reverse -%}
|
|
{%- if (loop.index <= top) and (top <= loop.length) -%}
|
|
<a href="{{ content.url }}" class="flex flex-row h-[4em] blog-link relative" >
|
|
{%- if content.data.coverImage -%}
|
|
<img src="{{ content.data.coverImage }}" alt="{{ content.data.imageDescription }}" class="w-40 h-full object-cover saturate-50 contrast-50 hover:saturate-100 hover:contrast-100 fancy-pinned-blog-image rounded-tl rounded-bl" />
|
|
{%- else -%}
|
|
<div class="w-40 h-full rounded-tl rounded-bl bg-gradient-to-r from-mauve via-sky to-transparent opacity-50"></div>
|
|
{%- endif -%}
|
|
<div class="flex flex-col gap-1 absolute left-40">
|
|
<h2 class="text-md text-blue line-clamp-2 outline-link">
|
|
{{ content.data.title }}
|
|
</h2>
|
|
<div class="text-xs hidden sm:block text-subtext1 line-clamp-2">
|
|
{{ content.data.description }}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
<p class="text-subtext0">...read more in the <a href="/blog" class="link outline-link">blog</a></p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% include "base-footer.html" %}
|
|
|