From 09c6c446a83032d47818c7a41041fdcfa5fee55a Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Thu, 4 Dec 2025 17:00:39 +0100
Subject: [PATCH] FEATURE Introducing the block

---
 resources/css/blocks/story-timeline-step.css | 33 ++++++++++++++++++++
 resources/css/blocks/story-timeline.css      | 24 ++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 resources/css/blocks/story-timeline-step.css
 create mode 100644 resources/css/blocks/story-timeline.css

diff --git a/resources/css/blocks/story-timeline-step.css b/resources/css/blocks/story-timeline-step.css
new file mode 100644
index 0000000..c362059
--- /dev/null
+++ b/resources/css/blocks/story-timeline-step.css
@@ -0,0 +1,33 @@
+.story-timeline-step {
+  @apply max-w-screen-xl mx-auto !pb-24;
+
+  &__year {
+    @apply text-center text-primary  !font-bold flex items-center justify-center gap-6 tracking-widest !pb-12;
+
+    &:after,
+    &:before {
+      content: '';
+      @apply block w-full  bg-primary;
+      height: 1px;
+    }
+  }
+
+  &__innerblocks {
+    p {
+      @apply mt-0;
+    }
+  }
+
+  .wp-block-image {
+    img {
+      @apply grayscale;
+      &:hover {
+        @apply grayscale-0;
+      }
+    }
+  }
+
+  .wp-block-columns {
+    @apply !mb-16;
+  }
+}
diff --git a/resources/css/blocks/story-timeline.css b/resources/css/blocks/story-timeline.css
new file mode 100644
index 0000000..19af2c1
--- /dev/null
+++ b/resources/css/blocks/story-timeline.css
@@ -0,0 +1,24 @@
+.wp-block-carhop-blocks-story-timeline {
+  @apply flex gap-12 mx-auto max-w-screen-xl;
+  aside.story-timeline__years {
+    @apply text-white;
+    ul {
+      @apply sticky top-0 left-0 !pt-6;
+      @apply list-none p-0 m-0 flex flex-col gap-4;
+      li {
+        @apply list-none bg-white text-primary p-2 border border-primary text-3xl fjalla;
+      }
+
+      li.story-timeline__year[data-active='false'] {
+        @apply opacity-30;
+      }
+      li.story-timeline__year[data-active='true'] {
+        @apply opacity-100;
+      }
+    }
+  }
+}
+
+.wp-block-carhop-blocks-heading + .wp-block-carhop-blocks-story-timeline {
+  @apply mt-6;
+}