STYLE refine styles for block-dernieres-dynamiques and introduce new variations for website themes

This commit is contained in:
Antoine M 2025-11-25 15:12:37 +01:00
parent fdf5da229e
commit b5a3785574

View File

@ -1,5 +1,5 @@
.block-dernieres-dynamiques { .block-dernieres-dynamiques {
@apply bg-primary text-white pt-2 md:pt-20 px-4 md:px-16; @apply pt-2 md:pt-20 px-4 md:px-16;
/* overflow: visible !important; */ /* overflow: visible !important; */
overflow: hidden !important; overflow: hidden !important;
@ -8,15 +8,14 @@
} }
&__header { &__header {
@apply flex flex-wrap items-end justify-between gap-8 gap-y-2 uppercase text-4xl mb-6 md:mb-12; @apply flex flex-wrap items-end justify-between gap-8 gap-y-2 uppercase text-4xl mb-6 md:mb-12;
.block-title { .block-title {
@apply flex grow items-end justify-between gap-8 uppercase text-2xl md:text-4xl lg:text-5xl; @apply flex grow items-end justify-between gap-8 uppercase text-2xl md:text-4xl lg:text-5xl;
span { span {
@apply block shrink-0; @apply block shrink-0;
} }
&:after { &:after {
@apply w-full z-20 bg-white block mb-2; @apply w-full z-20 block mb-2;
height: 1px; height: 1px;
content: ' '; content: ' ';
} }
@ -144,7 +143,6 @@
&:after { &:after {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-screen left-1/2 -translate-x-1/2; @apply content-[''] absolute inset-0 bg-carhop-purple-100 w-screen left-1/2 -translate-x-1/2;
z-index: 0; z-index: 0;
/* opacity: 0.5; */
top: 100px; top: 100px;
@screen lg { @screen lg {
@ -160,8 +158,41 @@
@apply text-base font-extrabold uppercase pb-8 tracking-bigbig nunito text-primary text-center mx-auto block mt-12; @apply text-base font-extrabold uppercase pb-8 tracking-bigbig nunito text-primary text-center mx-auto block mt-12;
} }
} }
}
.is-website-dynamiques .block-dernieres-dynamiques {
@apply bg-primary text-white;
&__header {
.block-title:after {
@apply bg-white;
}
}
:is(p, span, h1, h2, h3, h4, h5, h6):not(.article-card *) { :is(p, span, h1, h2, h3, h4, h5, h6):not(.article-card *) {
@apply text-white; @apply text-white;
} }
.related-articles:after {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-screen left-1/2 -translate-x-1/2;
z-index: 0;
top: 100px;
@screen lg {
height: calc(100% - 150px);
transform: translateY(100px) translateX(-50%) perspective(800px) skewX(1deg)
rotateZ(-2deg) rotateY(-4deg) scaleX(1.98);
}
}
}
.is-website-carhop .block-dernieres-dynamiques {
@apply bg-carhop-orange-50 text-primary;
&__header {
.block-title:after {
@apply bg-primary;
}
}
:is(p, span, h1, h2, h3, h4, h5, h6):not(.article-card *) {
@apply text-primary;
}
} }