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

feat: 💄 update post list preview styling

Browse source
This commit is contained in:
Sebin Nyshkim 2025-07-27 16:26:11 +02:00
parent 9c6902197e
commit b32d029675
Signed by: SebinNyshkim
SSH key fingerprint: SHA256:LG1WHMySL/4iW/Yci+0eHgbf0te5beRiLlmyoY8E5D0
2 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/css/style.css
View file

@ -52,7 +52,7 @@ code {
font-family: var(--font-monospace);
}
a:not(nav a, .button) {
a:not(nav a, .button, :has(h1)) {
@apply font-normal text-inherit underline decoration-sky-600 decoration-2 underline-offset-4 transition-colors duration-300 hover:text-sky-600;
}

28
src/posts.njk
View file

@ -12,28 +12,28 @@ pagination:
---
{% for post in blogposts %}
<article class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:rounded-3xl md:px-safe-offset-6">
<h1>{{ post.data.title }}</h1>
<article 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:my-4 prose-headings:font-normal prose-headings:duration-300 prose-headings:hover:text-inherit lg:prose-headings:my-6 prose-a:no-underline prose-a:hover:text-sky-600 prose-figure:my-4 lg:prose-figure:my-6 prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:rounded-3xl">
<a href="{{ post.url }}">
<h1>{{ post.data.title }}</h1>
</a>
<div class="not-prose">
{%- from 'postmeta.macro.njk' import postmeta %}
{{ postmeta({ date: post.date, author: post.data.author, content: post.content, center: false }) }}
</div>
{% if post.data.image and post.data.image.src != '' %}
<figure class="relative">
<img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
{% if post.data.image and post.data.image.credit != '' %}
<figcaption class="absolute bottom-0 right-0 rounded-tl-md rounded-br-3xl bg-black px-2 py-1 pe-4 text-xs text-white md:text-sm">
{{ post.data.image.credit }}
</figcaption>
{% endif %}
</figure>
<a href="{{ post.url }}">
<figure class="relative">
<img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
{% if post.data.image and post.data.image.credit != '' %}
<figcaption class="absolute bottom-0 right-0 rounded-tl-md rounded-br-3xl bg-black px-2 py-1 pe-4 text-xs text-white md:text-sm">
{{ post.data.image.credit }}
</figcaption>
{% endif %}
</figure>
</a>
{% endif %}
{{ post.data.page.excerpt | safe }}
<a href="{{ post.url }}" class="button inline-flex items-center gap-2 rounded-xl bg-sky-600 px-5 py-2 font-bold text-white no-underline transition-colors duration-300 *:stroke-[2.5] hover:bg-sky-700 2xl:rounded-2xl 2xl:px-6 2xl:py-3">
Read on {% lucide "chevron-right", { "class": "size-6 md:size-7 xl:size-8" } %}
</a>
</article>
{% endfor %}