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

fix: 🐛 header image not visible after upgrade to tailwind v4

Browse source
This commit is contained in:
Sebin Nyshkim 2025-02-01 20:12:33 +01:00
parent 984ecb559a
commit bff5e2aae6
2 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/css/style.css
View file

@ -5,7 +5,7 @@
@plugin 'tailwindcss-safe-area';
@theme {
--grid-template-rows-article-header: 1fr auto 0;
--grid-template-rows-article-header: 1fr auto;
--min-height-128: 32rem;
--min-height-160: 40rem;

4
src/layouts/blogpost.njk
View file

@ -10,9 +10,9 @@ layout: base.njk
{% if image and image.credit != '' %}
data-credit="{{ image.credit }}"
{% endif %}
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-8 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 after:absolute after:bottom-0 after:right-0 after:z-10 after:rounded-tl-md after:bg-black after:px-2 after:py-1 after:text-xs after:text-white after:content-[attr(data-credit)] sm:min-h-128 sm:pt-28 md:pt-32 md:after:text-sm lg:mb-12 lg:min-h-160 lg:pb-12 lg:px-safe-offset-12 2xl:min-h-192 dark:before:bg-slate-900 dark:before:bg-opacity-65"
class="relative mb-8 grid min-h-96 grid-flow-row grid-rows-article-header place-items-center gap-6 bg-cover bg-center pt-20 px-safe-offset-8 pb-8 *:z-10 before:absolute before:inset-0 before:bg-slate-300/65 after:absolute after:right-0 after:bottom-0 after:z-10 after:rounded-tl-md after:bg-black after:px-2 after:py-1 after:text-xs after:text-white after:content-[attr(data-credit)] sm:min-h-128 sm:pt-28 md:pt-32 md:after:text-sm lg:mb-12 lg:min-h-160 lg:px-safe-offset-12 lg:pb-12 2xl:min-h-192 dark:before:bg-slate-900/65"
>
<div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal">
<div class="mx-auto prose prose-slate md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-h1:m-0">
<h1 class="text-balance text-center">{{ title }}</h1>
</div>
<div class="not-prose space-y-6 self-end text-sm md:text-base xl:text-lg 2xl:text-xl">