Sebin Nyshkim
ce7de30e5c
Excessive use of the prose- prefix bloats the resulting CSS bundle and makes styles rather hard to maintain
37 lines
2.1 KiB
Text
37 lines
2.1 KiB
Text
---
|
|
layout: base.njk
|
|
---
|
|
|
|
<article>
|
|
<header
|
|
{% if image and image.src != '' %}
|
|
style="background-image: image-set({% bgimgset image.src %})"
|
|
{% endif %}
|
|
{% if image and image.credit != '' %}
|
|
data-credit="{{ image.credit }}"
|
|
{% endif %}
|
|
class="relative mb-8 grid min-h-96 grid-flow-row grid-rows-article-header place-items-center gap-6 bg-cover bg-center pt-20 px-safe-offset-8 pb-8 *:z-10 before:absolute before:inset-0 before:bg-slate-300/65 after:absolute after:right-0 after:bottom-0 after:z-10 after:rounded-tl-md after:bg-black after:px-2 after:py-1 after:text-xs after:text-white after:content-[attr(data-credit)] sm:min-h-128 sm:pt-28 md:pt-32 md:after:text-sm lg:mb-12 lg:min-h-160 lg:px-safe-offset-12 lg:pb-12 2xl:min-h-192 dark:before:bg-slate-900/65"
|
|
>
|
|
<div class="mx-auto prose prose-slate md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-h1:m-0">
|
|
<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:bg-sky-950">
|
|
{% lucide "tag", { "class": "size-4 md:size-5 xl:size-6" } %}
|
|
{{ tag }}
|
|
</li>
|
|
{%- endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
<section class="mx-auto prose px-safe-offset-4 prose-slate md:prose-lg md:px-safe-offset-6 lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-figcaption:text-center prose-figcaption:text-balance prose-strong:font-bold prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl">
|
|
{{ content | safe }}
|
|
</section>
|
|
</article>
|