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

feat: 📱 improve responsive design of article header

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

8
src/includes/postmeta.macro.njk
View file

@ -1,19 +1,19 @@
{% macro postmeta(params) %} {% macro postmeta(params) %}
<ul <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" role="group"
aria-label="Published on {{ params.date | readableDate }}, written by {{ params.author.name }}, approximate reading time {{ params.content | readingtime }}" aria-label="Published on {{ params.date | readableDate }}, written by {{ params.author.name }}, approximate reading time {{ params.content | readingtime }}"
> >
<li aria-label="Published on"> <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> <time datetime="{{ params.date | isoDate }}">{{ params.date | readableDate }}</time>
</li> </li>
<li aria-label="Written by"> <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> <a href="{{ params.author.href }}">{{ params.author.name }}</a>
</li> </li>
<li aria-label="Approximate reading time"> <li aria-label="Approximate reading time">
{% lucide "glasses", {"size": "20"} %} {% lucide "glasses", { "class": "size-4 md:size-5 xl:size-6" } %}
{{ params.content | readingtime }} {{ params.content | readingtime }}
</li> </li>
</ul> </ul>

10
src/layouts/blogpost.njk
View file

@ -3,18 +3,18 @@ layout: base.njk
--- ---
<article> <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"> <header style="background-image: url({{ image.src }})" class="relative mb-8 grid 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-300 before:bg-opacity-65 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6 lg:mb-12 lg:h-160 lg:pb-12 2xl:h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65">
<div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal"> <div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl xl:prose-2xl dark:prose-invert prose-headings:font-normal">
<h1 class="text-balance text-center">{{ title }}</h1> <h1 class="text-balance text-center">{{ title }}</h1>
</div> </div>
<div class="not-prose space-y-6 self-end text-base"> <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 %} {%- from 'postmeta.macro.njk' import postmeta %}
{{ postmeta({ date: page.date, author: author, content: content, center: true }) }} {{ postmeta({ date: page.date, author: author, content: content, center: true }) }}
{% if tags.length > 0 %} {% if tags.length > 0 %}
<ul class="flex flex-wrap justify-center gap-1" aria-label="Tagged in"> <ul class="flex flex-wrap justify-center gap-1" aria-label="Tagged in">
{% for tag in tags %} {% 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"> <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" } %} {% lucide "tag", { "class": "size-4 md:size-5 xl:size-6" } %}
{{ tag }} {{ tag }}
</li> </li>
{%- endfor %} {%- endfor %}
@ -23,7 +23,7 @@ layout: base.njk
</div> </div>
</header> </header>
<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"> <section class="prose prose-slate mx-auto px-safe-offset-4 md:prose-lg lg:prose-xl xl:prose-2xl 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 md:px-safe-offset-6">
{{ content | safe }} {{ content | safe }}
</section> </section>
</article> </article>

4
tailwind.config.js
View file

@ -7,7 +7,9 @@ export default {
'article-header': '1fr auto 0' 'article-header': '1fr auto 0'
}, },
height: { height: {
'128': '32rem' '128': '32rem',
'160': '40rem',
'192': '48rem'
} }
} }
}, },