fix: always show project title over hero image on mobile
All checks were successful
Docker / build-and-push-image (push) Successful in 1m58s

This commit is contained in:
Troy 2025-07-25 19:15:46 +01:00
parent c7be9f3aba
commit db23c4aee4
Signed by: troy
GPG key ID: DFC06C02ED3B4711
3 changed files with 10 additions and 6 deletions

View file

@ -41,7 +41,9 @@ const { information } = Astro.props;
)}
</div>
<div class="grow text-right">
<p class="text-tertiary font-mono text-sm text-nowrap">{item.date}</p>
<p class="text-secondary/70 font-mono text-sm font-light text-nowrap">
{item.date}
</p>
{item.date_opt ? (
<p class="text-secondary/70 text-sm">{item.date_opt}</p>
) : null}

View file

@ -22,9 +22,11 @@ const { collection } = Astro.props;
/>
</div>
<div
class="relative opacity-0 transition-all delay-100 duration-300 ease-in-out group-hover:opacity-100"
class="relative opacity-100 transition-all delay-100 duration-300 ease-in-out group-hover:opacity-100 md:opacity-0"
>
<p class="absolute right-5 bottom-5 font-medium text-white">
<p
class="bg-primary/50 absolute right-5 bottom-5 rounded-sm px-1 py-0.5 font-medium text-white md:bg-transparent"
>
{
collection.data.collection ? (
<span>
@ -39,7 +41,7 @@ const { collection } = Astro.props;
</div>
{
collection.data.highlight ? (
<div class="relative transition-all duration-300 ease-in-out group-hover:opacity-0">
<div class="relative transition-all duration-150 ease-in-out group-hover:opacity-0">
<div class="absolute bottom-5 left-5 flex w-fit items-center gap-0.5 rounded-full p-1 transition-transform duration-300 hover:scale-102 hover:-rotate-2">
<span class="mr-1 h-1.5 w-1.5 rounded-full bg-green-600 dark:bg-green-400" />
<p class="font-medium text-white">New</p>

View file

@ -31,8 +31,8 @@ const { interval = 3000, images } = Astro.props;
loading="eager"
{...(index === 0 && { priority: true })}
/>
<div class="relative opacity-0 transition-all delay-100 duration-300 ease-in-out group-hover:opacity-100">
<p class="absolute right-5 bottom-5 font-medium text-white">
<div class="relative opacity-100 transition-all delay-100 duration-300 ease-in-out group-hover:opacity-100 md:opacity-0">
<p class="bg-primary/50 absolute right-5 bottom-5 rounded-sm px-1 py-0.5 font-medium text-white md:bg-transparent">
{image.data.title}
</p>
</div>