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

STYLE refining block aspect

Browse Source
This commit is contained in:
Antoine M 2025-05-15 14:15:58 +02:00
parent 86e32a6166
commit 89b5d9d013
1 changed files with 46 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
resources/css/blocks/dernieres-dynamiques.css
View File

@ -1,5 +1,11 @@
.block-dernieres-dynamiques { .block-dernieres-dynamiques {
@apply bg-carhop-orange-50 px-12 xl:px-24 py-32; @apply bg-primary text-white px-12 xl:px-24 pt-20;
overflow: hidden;
*:not(.article-card *) {
@apply text-white;
}
&__inner { &__inner {
@apply max-w-screen-2xl mx-auto; @apply max-w-screen-2xl mx-auto;
} }
@ -13,7 +19,7 @@
@apply block shrink-0; @apply block shrink-0;
} }
&:after { &:after {
@apply w-full z-50 bg-primary block mb-2; @apply w-full z-50 bg-white block mb-2;
height: 1px; height: 1px;
content: ' '; content: ' ';
} }
@ -30,7 +36,7 @@
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
path, path,
circle { circle {
@apply stroke-primary stroke-2; @apply stroke-white stroke-2;
} }
} }
&:hover { &:hover {
@ -56,20 +62,19 @@
} }
&__issue-title { &__issue-title {
@apply text-6xl uppercase pb-12; @apply text-7xl uppercase pb-12;
line-height: 1.1; line-height: 1.1;
} }
&__issue-content-wrapper { &__issue-content-wrapper {
@apply grid gap-12 2xl:gap-24 pb-12; @apply grid gap-12 2xl:gap-24 pb-24;
grid-template-columns: 61.8fr 38.2fr; grid-template-columns: 61.8fr 38.2fr;
} }
&__issue-content {
}
&__issue-thumbnail-wrapper { &__issue-thumbnail-wrapper {
@apply relative; @apply relative;
.card-background { .card-background {
@apply absolute inset-0 border-primary border bg-white top-5 left-8; @apply absolute border-primary border bg-white top-20 left-8;
height: 94%; height: 94%;
width: 104%; width: 104%;
transform: perspective(800px) rotateY(10deg) transform: perspective(800px) rotateY(10deg)
@ -79,10 +84,10 @@
&::before { &::before {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full; @apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
width: calc(100% - 32px); width: calc(100% - 42px);
height: calc(100% - 32px); height: calc(100% - 42px);
left: 16px; left: 21px;
top: 16px; top: 21px;
z-index: 0; z-index: 0;
} }
@ -90,26 +95,51 @@
} }
&__issue-thumbnail { &__issue-thumbnail {
@apply bg-white border-primary border relative; @apply bg-white border-primary border relative;
transform: perspective(800px) rotateY(10deg) skewX(2deg); /* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
height: 300px; height: 330px;
position: relative; position: relative;
z-index: 10; z-index: 10;
img { img {
height: 100%; width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
object-fit: cover; object-fit: cover;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
} }
&__issue-description-title {
@apply uppercase nunito text-xl pb-4 font-bold;
letter-spacing: 4px;
}
&__issue-description { &__issue-description {
@apply text-xl; @apply text-xl;
} }
.related-articles { .related-articles {
@apply relative pb-8;
& > * {
@apply relative z-10;
}
&:after {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-screen left-1/2 -translate-x-1/2;
z-index: 0;
/* opacity: 0.5; */
top: 100px;
height: calc(100% - 150px);
transform: translateY(100px) translateX(-50%)
perspective(800px) skewX(1deg) rotateZ(-2deg)
rotateY(-4deg) scaleX(1.98);
}
&__title { &__title {
@apply text-base font-extrabold uppercase pb-8 tracking-widest nunito; @apply text-base font-extrabold uppercase pb-8 tracking-widest nunito;
} }
&__show-all {
@apply text-base font-extrabold uppercase pb-8 tracking-widest nunito text-primary text-center mx-auto block mt-12;
}
} }
} }