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); 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; @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 %} {% 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"> <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">
<h1>{{ post.data.title }}</h1> <a href="{{ post.url }}">
<h1>{{ post.data.title }}</h1>
</a>
<div class="not-prose"> <div class="not-prose">
{%- from 'postmeta.macro.njk' import postmeta %} {%- from 'postmeta.macro.njk' import postmeta %}
{{ postmeta({ date: post.date, author: post.data.author, content: post.content, center: false }) }} {{ postmeta({ date: post.date, author: post.data.author, content: post.content, center: false }) }}
</div> </div>
{% if post.data.image and post.data.image.src != '' %} {% if post.data.image and post.data.image.src != '' %}
<figure class="relative"> <a href="{{ post.url }}">
<img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}"> <figure class="relative">
{% if post.data.image and post.data.image.credit != '' %} <img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
<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"> {% if post.data.image and post.data.image.credit != '' %}
{{ 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">
</figcaption> {{ post.data.image.credit }}
{% endif %} </figcaption>
</figure> {% endif %}
</figure>
</a>
{% endif %} {% endif %}
{{ post.data.page.excerpt | safe }} {{ 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> </article>
{% endfor %} {% endfor %}