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

FEATURE Handling the block styles

Browse Source
This commit is contained in:
Antoine M 2025-06-30 16:01:02 +02:00
parent 84a0359a4a
commit 0e10fb2ed8
1 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,28 +1,53 @@
.narrative-card { .narrative-card {
@apply bg-white border border-primary p-12 mx-auto max-w-screen-lg; @apply p-12 py-24 mx-auto max-w-screen-lg;
> * {
position: relative;
z-index: 1;
}
&:after {
content: '';
background-image: url('../resources/img/skew-background.svg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
@apply absolute inset-0;
transform: scaleX(-1);
}
.narrative-card__cover {
@apply rotate-3;
}
&--even,
&:nth-of-type(even) {
&:after {
transform: scaleX(1);
}
.narrative-card__cover {
@apply rotate-[-3deg];
}
}
&--has-cover { &--has-cover {
@apply grid grid-cols-2 gap-32 items-center; @apply grid grid-cols-2 gap-24 items-center;
grid-template-columns: 4fr 1fr; grid-template-columns: 3.5fr 1fr;
&--left { &--left {
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 3.5fr;
} }
} }
&__cover { &__cover {
@apply w-full h-auto object-cover border border-primary mx-auto; --margin: 1rem;
@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;
}
&:nth-child(odd) { img {
.narrative-card__cover { @apply w-full h-full object-cover;
@apply rotate-3; width: calc(100% - var(--margin));
} height: calc(100% - var(--margin));
} object-position: center;
&:nth-child(even) {
.narrative-card__cover {
@apply rotate-[-3deg];
} }
} }