From a247c3d50029e6c104e0b1b58beadfdd96f43e67 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Fri, 17 Nov 2023 17:44:17 +0100 Subject: [PATCH] handling image aspect ratio --- resources/css/blocks/timeline.css | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/resources/css/blocks/timeline.css b/resources/css/blocks/timeline.css index d2312bd..ed8b481 100644 --- a/resources/css/blocks/timeline.css +++ b/resources/css/blocks/timeline.css @@ -10,7 +10,6 @@ img { @apply rounded-3xl mb-3; } - .description, .caption { @apply m-0 p-0; @@ -18,6 +17,21 @@ .caption { @apply font-semibold text-primary text-sm; } + + &--squared { + img { + @apply h-auto + object-cover object-center; + aspect-ratio: 1/1; + } + } + &--md { + img { + @apply w-full + object-cover object-center; + max-height: 450px; + } + } } &--has-lateral-cover { @@ -34,7 +48,7 @@ &--has-step-icons { .homegrade-blocks-timeline__container { &:before { - @apply rounded-xl bg-secondary + @apply rounded-3xl bg-secondary opacity-10 absolute top-0 @@ -42,8 +56,8 @@ z-index: -1; content: ''; top: 0; - left: calc(33% + 56px); - width: 26px; + left: calc(33% + 54px); + width: 34px; } } } @@ -51,7 +65,10 @@ } .homegrade-blocks-timeline-step { - @apply grid grid-cols-3 gap-12 py-6; + @apply grid grid-cols-3 gap-12 py-16; + &__innercontent { + @apply -mt-12; + } &__cover { @apply max-w-md h-auto; border-radius: 22px;