refactoring the block with an inner container

This commit is contained in:
Antoine M 2023-11-17 17:04:57 +01:00
parent 1ea15b7fdc
commit c58113bd4f

View File

@ -1,10 +1,29 @@
.homegrade-blocks-timeline {
@apply max-w-screen-xl mx-auto relative my-32;
&__lateral-cover {
@apply max-h-96 h-auto mx-auto;
@apply max-w-screen-xl mx-auto my-32;
.section_titling {
@apply mb-9;
}
&__container {
@apply relative;
}
&__lateral-cover {
img {
@apply rounded-3xl mb-3;
}
.description,
.caption {
@apply m-0 p-0;
}
.caption {
@apply font-semibold text-primary text-sm;
}
}
&--has-lateral-cover {
@apply grid grid-cols-3 gap-12;
.homegrade-blocks-timeline__container {
@apply grid grid-cols-3 gap-12;
}
.homegrade-blocks-timeline__innercontent {
@apply col-span-2;
}
@ -13,17 +32,19 @@
}
}
&--has-step-icons {
&:before {
@apply rounded-xl bg-secondary
opacity-10
absolute
top-0
h-full;
z-index: -1;
content: '';
top: 0;
left: calc(33% + 56px);
width: 26px;
.homegrade-blocks-timeline__container {
&:before {
@apply rounded-xl bg-secondary
opacity-10
absolute
top-0
h-full;
z-index: -1;
content: '';
top: 0;
left: calc(33% + 56px);
width: 26px;
}
}
}
&--has-no-step-pictures {
@ -49,8 +70,9 @@
@apply w-24 h-24 shrink-0 bg-white shadowed p-4 rounded-3xl flex justify-center items-center;
img {
@apply mx-auto object-contain w-12 h-10;
max-height: 3rem;
@apply mx-auto object-contain;
max-width: 80%;
max-height: 80%;
}
}
&__content {