From f671704a0bba6f81e07fdeba8e9d7004484c1081 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 18 Oct 2023 15:05:22 +0200
Subject: [PATCH] handling and refinin block timeline

---
 resources/css/app.css             |  1 +
 resources/css/blocks/timeline.css | 50 ++++++++++++++++++++++++++-----
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index c50d05a..17bbb7c 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -67,6 +67,7 @@
 @import './blocks/chapitrage-thematique.css';
 @import './blocks/content-page-header.css';
 @import './blocks/timeline.css';
+@import './blocks/warning.css';
 
 /* ########### PAGE ############ */
 @import './pages/demo-components.css';
diff --git a/resources/css/blocks/timeline.css b/resources/css/blocks/timeline.css
index 53537d5..b4c33b7 100644
--- a/resources/css/blocks/timeline.css
+++ b/resources/css/blocks/timeline.css
@@ -1,16 +1,52 @@
 .homegrade-blocks-timeline {
-  @apply max-w-screen-xl mx-auto;
+  @apply max-w-screen-xl mx-auto relative my-32;
+  &--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-step {
     @apply grid grid-cols-3 gap-12 py-6;
     &__cover {
-      @apply max-w-md;
-      /* max-width: 250px; */
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      @apply max-w-md h-auto;
+      img {
+        @apply pb-3;
+      }
+      .description,
+      .caption {
+        @apply m-0 p-0;
+      }
+      .caption {
+        @apply font-semibold text-primary text-sm;
+      }
+    }
+    &__icon {
+      @apply w-24 h-24 shrink-0 bg-white shadowed p-4 rounded-3xl;
+
+      img {
+        @apply max-w-full max-h-full mx-auto;
+      }
     }
     &__content {
-      @apply col-span-2;
+      @apply col-span-2 flex gap-8;
+      &--has-step-icon {
+        &:before {
+          content: '';
+          height: 100%;
+          width: 2px;
+          background: red;
+        }
+      }
     }
 
     &__title {