Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

fix: update card image styling for improved visibility and layout
Some checks failed
Build / build (push) Successful in 4m26s
Details
Build / deploy-stage (push) Failing after 2m30s
Details
Build / switch-stage (push) Has been skipped
Details

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-06-23 16:54:04 +02:00
parent c552021c35
commit b65377dee4
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
View File

@@ -25,7 +25,7 @@
<div class="card-front absolute w-full h-full backface-hidden overflow-hidden shadow-lg"> <div class="card-front absolute w-full h-full backface-hidden overflow-hidden shadow-lg">
<f:if condition="{card.images}"> <f:if condition="{card.images}">
<f:then> <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 --> <!-- WEBP source -->
<source <source
type="image/webp" type="image/webp"
@@ -59,9 +59,9 @@
</div> </div>
</f:else> </f:else>
</f:if> </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"> <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>
<div class="w-full text-center"> <div class="w-full text-center">
<div class="w-6 h-6 bg-primary text-white rounded-full inline-flex items-center justify-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>
<div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-light-grey border border-dark-grey p-6"> <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"> <div class="text-sm">
<f:format.html>{card.bodytext}</f:format.html> <f:format.html>{card.bodytext}</f:format.html>
</div> </div>