fix: update card image styling for improved visibility and layout
This commit is contained in:
@@ -25,7 +25,7 @@
|
||||
<div class="card-front absolute w-full h-full backface-hidden overflow-hidden shadow-lg">
|
||||
<f:if condition="{card.images}">
|
||||
<f:then>
|
||||
<picture class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
|
||||
<picture class="w-full h-full object-cover transition-all duration-500">
|
||||
<!-- WEBP source -->
|
||||
<source
|
||||
type="image/webp"
|
||||
@@ -59,9 +59,9 @@
|
||||
</div>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<div class="absolute inset-0 bg-black bg-opacity-40 flex flex-col items-center justify-center">
|
||||
<div class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center">
|
||||
<div class="w-full">
|
||||
<h3 class="text-white text-xl font-bold text-center px-4">{card.header}</h3>
|
||||
<h3 class="text-black text-xl font-bold text-center px-4">{card.header}</h3>
|
||||
</div>
|
||||
<div class="w-full text-center">
|
||||
<div class="w-6 h-6 bg-primary text-white rounded-full inline-flex items-center justify-center">
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
|
||||
<div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-light-grey border border-dark-grey p-6">
|
||||
<h4>{card.header}</h4>
|
||||
<h4 class="text-center">{card.header}</h4>
|
||||
<div class="text-sm">
|
||||
<f:format.html>{card.bodytext}</f:format.html>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user