Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RESPONSIVE FIX
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2025-10-15 17:25:43 +02:00
parent 7cb5f40a29
commit b60292bb20
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
resources/css/blocks/narrative-card.css
View File

@ -1,11 +1,12 @@
.narrative-card { .narrative-card {
@apply p-12 py-24 mx-auto max-w-screen-lg; @apply p-12 py-24 mx-auto max-w-screen-lg relative;
overflow: hidden;
> * { > * {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
&:after { /* &:after {
content: ''; content: '';
background-image: url('../resources/img/skew-background.svg'); background-image: url('../resources/img/skew-background.svg');
background-size: 100% 100%; background-size: 100% 100%;
@ -13,6 +14,10 @@
background-position: center; background-position: center;
@apply absolute inset-0; @apply absolute inset-0;
transform: scaleX(-1); transform: scaleX(-1);
} */
&__background {
@apply absolute inset-0 w-full h-full;
/* transform: scaleX(-1); */
} }
.narrative-card__cover { .narrative-card__cover {
@ -56,11 +61,16 @@
--margin: 1rem; --margin: 1rem;
@apply flex justify-center items-center w-full h-auto object-cover border border-primary mx-auto; @apply flex justify-center items-center w-full h-auto object-cover border border-primary mx-auto;
aspect-ratio: 1/1; aspect-ratio: 1/1;
max-width: 300px;
@screen lg {
aspect-ratio: 1/1;
}
img { img {
@apply w-full h-full object-cover; @apply w-full h-full object-cover;
width: calc(100% - var(--margin)); width: calc(100% - var(--margin));
height: calc(100% - var(--margin)); height: calc(100% - var(--margin));
object-position: center; object-position: center;
} }
} }
@ -78,6 +88,9 @@
.narrative-card__content h6 { .narrative-card__content h6 {
@apply !text-primary uppercase; @apply !text-primary uppercase;
font-size: 2.25rem; @apply text-3xl;
@screen lg {
font-size: 2.25rem;
}
} }
} }