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

STYLE refine layout and enhance card styling in revues-precedentes.css

Browse Source
This commit is contained in:
Antoine M 2025-05-23 18:03:27 +02:00
parent 45c065c4a4
commit a5f1a0625c
1 changed files with 49 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
resources/css/blocks/revues-precedentes.css
View File

@ -3,7 +3,7 @@
.block-revues-precedentes__header { .block-revues-precedentes__header {
} }
&__inner { &__inner {
@apply max-w-screen-2xl mx-auto px-12 xl:px-24; @apply max-w-screen-2xl mx-auto;
} }
&__header { &__header {
@ -23,8 +23,7 @@
} }
.card-revue { .card-revue {
@apply grid gap-12 2xl:gap-24 pb-24; @apply grid gap-y-12 2xl:gap-y-16 pb-24 gap-x-12 2xl:gap-x-24;
grid-template-columns: 61.8fr 38.2fr; grid-template-columns: 61.8fr 38.2fr;
.content-meta { .content-meta {
@ -35,7 +34,53 @@
} }
&__content { &__content {
@apply p-6; h4.title {
@apply uppercase text-7xl font-normal pb-8;
}
h5.edito-title {
@apply text-2xl font-bold uppercase pb-8;
}
}
&__issue-thumbnail-wrapper {
@apply relative w-full;
.card-background {
@apply absolute border-primary border bg-white top-20 left-8;
height: 94%;
width: 104%;
transform: perspective(800px) rotateY(10deg)
skewX(1deg) rotateZ(4deg) rotateX(1deg)
scale(0.98) translateY(-2px);
z-index: 0;
&::before {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
z-index: 0;
}
}
}
&__issue-thumbnail {
@apply bg-white border-primary border relative;
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
height: 330px;
position: relative;
z-index: 10;
img {
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
object-fit: cover;
position: relative;
z-index: 2;
}
} }
} }
} }