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 {
@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 {
@apply max-w-screen-2xl mx-auto;
}
@ -13,7 +19,7 @@
@apply block shrink-0;
}
&:after {
@apply w-full z-50 bg-primary block mb-2;
@apply w-full z-50 bg-white block mb-2;
height: 1px;
content: ' ';
}
@ -30,7 +36,7 @@
transition: transform 0.3s ease-in-out;
path,
circle {
@apply stroke-primary stroke-2;
@apply stroke-white stroke-2;
}
}
&:hover {
@ -56,20 +62,19 @@
}
&__issue-title {
@apply text-6xl uppercase pb-12;
@apply text-7xl uppercase pb-12;
line-height: 1.1;
}
&__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;
}
&__issue-content {
}
&__issue-thumbnail-wrapper {
@apply relative;
.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%;
width: 104%;
transform: perspective(800px) rotateY(10deg)
@ -79,10 +84,10 @@
&::before {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
width: calc(100% - 32px);
height: calc(100% - 32px);
left: 16px;
top: 16px;
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
z-index: 0;
}
@ -90,26 +95,51 @@
}
&__issue-thumbnail {
@apply bg-white border-primary border relative;
transform: perspective(800px) rotateY(10deg) skewX(2deg);
height: 300px;
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
height: 330px;
position: relative;
z-index: 10;
img {
height: 100%;
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
object-fit: cover;
position: relative;
z-index: 2;
}
}
&__issue-description-title {
@apply uppercase nunito text-xl pb-4 font-bold;
letter-spacing: 4px;
}
&__issue-description {
@apply text-xl;
}
.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 {
@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;
}
}
}