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

feat: ✨ add responsiveness to article header images

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-20 23:32:30 +02:00
parent 4a18fadb67
commit 20e3d71b2a
3 changed files with 23 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/layouts/blogpost.njk
View file

@ -3,7 +3,12 @@ layout: base.njk
---
<article>
<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">
<header
{% if image and image.src != '' %}
style="background-image: image-set({% bgimgset image.src %})"
{% endif %}
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 xl:prose-2xl dark:prose-invert prose-headings:font-normal">
<h1 class="text-balance text-center">{{ title }}</h1>
</div>

2
src/posts.njk
View file

@ -20,7 +20,7 @@ pagination:
</div>
{% if post.data.image and post.data.image.src != '' %}
<img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
<img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}" sizes="(min-width: 1280px) 960px, (min-width: 1024px) 768px, (min-width: 640px) 640px, 480px">
{% endif %}
<p>{{ post.data.description }}</p>