feat: 📱 improve responsive design of article header

This commit is contained in:
Sebin Nyshkim 2024-10-20 16:59:31 +02:00
parent ceb7cdb3d9
commit 17d0a9f9c0
3 changed files with 12 additions and 10 deletions

View file

@ -1,19 +1,19 @@
{% macro postmeta(params) %}
<ul
class="flex flex-wrap items-center gap-4 {% if params.center %} justify-center {% else %} justify-start {% endif %} text-base *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600"
class="{% if params.center %} {% else %} {% endif %} flex flex-wrap items-center justify-start justify-center gap-4 text-sm *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600 md:text-base xl:text-lg 2xl:text-xl"
role="group"
aria-label="Published on {{ params.date | readableDate }}, written by {{ params.author.name }}, approximate reading time {{ params.content | readingtime }}"
>
<li aria-label="Published on">
{% lucide "calendar", {"size": "20"} %}
{% lucide "calendar", { "class": "size-4 md:size-5 xl:size-6" } %}
<time datetime="{{ params.date | isoDate }}">{{ params.date | readableDate }}</time>
</li>
<li aria-label="Written by">
{% lucide "user", {"size": "20"} %}
{% lucide "user", { "class": "size-4 md:size-5 xl:size-6" } %}
<a href="{{ params.author.href }}">{{ params.author.name }}</a>
</li>
<li aria-label="Approximate reading time">
{% lucide "glasses", {"size": "20"} %}
{% lucide "glasses", { "class": "size-4 md:size-5 xl:size-6" } %}
{{ params.content | readingtime }}
</li>
</ul>