SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 💄 redesign blogpost header

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-20 02:44:02 +02:00
parent 1fb1591a03
commit ceb7cdb3d9
7 changed files with 37 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/layouts/blogpost.njk
View file

@ -2,26 +2,28 @@
layout: base.njk
---
<article class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
<h1 class="text-4xl">{{ title }}</h1>
<div class="not-prose space-y-4 text-base">
{%- from 'postmeta.macro.njk' import postmeta %}
{{ postmeta({ date: page.date, author: author, content: content}) }}
{% if tags.length > 0 %}
<ul class="flex 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:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
{% lucide "tag", {"size": "20"} %}
{{ tag }}
</li>
{%- endfor %}
</ul>
{% endif %}
</div>
<article>
<header style="background-image: url({{ image.src }})" class="relative mb-8 grid min-h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-900 before:bg-opacity-85 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6">
<div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal">
<h1 class="text-balance text-center">{{ title }}</h1>
</div>
<div class="not-prose space-y-6 self-end text-base">
{%- 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:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
{% lucide "tag", { "size": "20" } %}
{{ tag }}
</li>
{%- endfor %}
</ul>
{% endif %}
</div>
</header>
{% if image and image.src != '' %}
<img src="{{ image.src }}" alt="{{ image.alt }}">
{% endif %}
{{ content | safe }}
<section class="px-safe-offset-4 md:px-safe-offset-6 prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:font-bold prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
{{ content | safe }}
</section>
</article>