From 4928521eff492bdc07f8bcae3357a74cba158a16 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 17 Oct 2023 17:35:47 +0200
Subject: [PATCH] handling new blocks css

---
 resources/css/app.css                        |  2 +
 resources/css/blocks/content-page-header.css | 29 +++++++
 resources/css/blocks/timeline.css            | 23 +++++
 resources/css/editor-content/gutenberg.css   | 90 ++++++++++----------
 4 files changed, 101 insertions(+), 43 deletions(-)
 create mode 100644 resources/css/blocks/content-page-header.css
 create mode 100644 resources/css/blocks/timeline.css

diff --git a/resources/css/app.css b/resources/css/app.css
index afb3d22..c50d05a 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -65,6 +65,8 @@
 @import './blocks/plus-loin.css';
 @import './blocks/content-heading.css';
 @import './blocks/chapitrage-thematique.css';
+@import './blocks/content-page-header.css';
+@import './blocks/timeline.css';
 
 /* ########### PAGE ############ */
 @import './pages/demo-components.css';
diff --git a/resources/css/blocks/content-page-header.css b/resources/css/blocks/content-page-header.css
new file mode 100644
index 0000000..95b00dd
--- /dev/null
+++ b/resources/css/blocks/content-page-header.css
@@ -0,0 +1,29 @@
+.block-content-page-header {
+  @apply max-w-screen-xl px-16 py-16 flex gap-12 justify-around mx-auto;
+
+  &__content {
+    grow: 0;
+    max-width: 600px;
+  }
+  &__page-icon {
+    height: fit-content;
+    height: 400px;
+  }
+  &__cta-link {
+    @apply text-neutral-900 font-bold mt-1 block;
+    &:after {
+      content: url('../resources/img/graphic-assets/chevron-next.svg');
+      @apply ml-2;
+    }
+  }
+  p {
+    margin-bottom: unset;
+  }
+
+  h1 {
+    @apply text-secondary font-bold text-xl mb-2 uppercase;
+  }
+  h2 {
+    @apply text-neutral-900 font-bold text-4xl mt-0 mb-12;
+  }
+}
diff --git a/resources/css/blocks/timeline.css b/resources/css/blocks/timeline.css
new file mode 100644
index 0000000..53537d5
--- /dev/null
+++ b/resources/css/blocks/timeline.css
@@ -0,0 +1,23 @@
+.homegrade-blocks-timeline {
+  @apply max-w-screen-xl mx-auto;
+  .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;
+    }
+    &__content {
+      @apply col-span-2;
+    }
+
+    &__title {
+      @apply text-secondary font-bold text-xl m-0;
+    }
+    &__subtitle {
+      @apply text-neutral-900 font-bold text-2xl;
+    }
+  }
+}
diff --git a/resources/css/editor-content/gutenberg.css b/resources/css/editor-content/gutenberg.css
index acbc4b4..d31b92a 100644
--- a/resources/css/editor-content/gutenberg.css
+++ b/resources/css/editor-content/gutenberg.css
@@ -5,49 +5,6 @@ article > *:not(.entry-content, .chapter-header-block),
 .entry-content {
   @apply mt-4 lg:mt-0;
   max-width: 800px;
-  & > :first-child {
-    @apply !mt-0;
-  }
-  h1 {
-    @apply text-2xl;
-  }
-
-  h2 {
-    @apply text-xl mt-16 mb-8;
-  }
-
-  h3 {
-    @apply font-bold text-2xl  mt-16 mb-4;
-  }
-
-  p,
-  ul,
-  ol {
-    a {
-      @apply text-primary font-bold underline underline-offset-4;
-      &:hover {
-        @apply no-underline;
-      }
-    }
-
-    @apply mb-8;
-  }
-  ol {
-    @apply list-decimal list-inside;
-  }
-  ul li {
-    @apply relative pl-5;
-  }
-  ul li:before {
-    @apply absolute left-0;
-    content: '';
-    display: inline-block;
-    height: 8px;
-    width: 8px;
-    border-radius: 50%;
-    margin-right: 14px;
-    margin-top: 9px;
-  }
 }
 
 .wp-block-table {
@@ -99,3 +56,50 @@ article > *:not(.entry-content, .chapter-header-block),
     @apply bg-white border-2 border-neutral-800;
   }
 }
+
+.entry-content,
+.page-content {
+  & > :first-child {
+    @apply !mt-0;
+  }
+  h1 {
+    @apply text-2xl;
+  }
+
+  h2 {
+    @apply text-xl mt-16 mb-8;
+  }
+
+  h3 {
+    @apply font-bold text-2xl  mt-16 mb-4;
+  }
+
+  p,
+  ul,
+  ol {
+    a {
+      @apply text-primary font-bold underline underline-offset-4;
+      &:hover {
+        @apply no-underline;
+      }
+    }
+
+    @apply mb-8;
+  }
+  ol {
+    @apply list-decimal list-inside;
+  }
+  ul li {
+    @apply relative pl-5;
+  }
+  ul li:before {
+    @apply absolute left-0;
+    content: '';
+    display: inline-block;
+    height: 8px;
+    width: 8px;
+    border-radius: 50%;
+    margin-right: 14px;
+    margin-top: 9px;
+  }
+}