From af6d2d06975f4b68b0ca2c0e0617553b2a010b9b Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 25 Oct 2023 14:40:11 +0200
Subject: [PATCH] extending blocks styles

---
 resources/css/blocks/_component-image.css     | 16 ++++++++++++++++
 resources/css/blocks/accordeon.css            |  5 +++++
 resources/css/blocks/card.css                 |  6 ++++++
 resources/css/blocks/column-cards.css         | 13 +++++++++++++
 .../blocks/{grey-box.css => content-box.css}  |  4 ++--
 resources/css/blocks/figure.css               | 15 +++++++++++++++
 resources/css/blocks/highlight.css            | 19 ++++++++++++++++++-
 resources/css/blocks/monoblock.css            | 14 ++++++++++++++
 resources/css/blocks/texte-image.css          |  3 +++
 9 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 resources/css/blocks/_component-image.css
 create mode 100644 resources/css/blocks/accordeon.css
 create mode 100644 resources/css/blocks/card.css
 create mode 100644 resources/css/blocks/column-cards.css
 rename resources/css/blocks/{grey-box.css => content-box.css} (75%)
 create mode 100644 resources/css/blocks/figure.css
 create mode 100644 resources/css/blocks/monoblock.css
 create mode 100644 resources/css/blocks/texte-image.css

diff --git a/resources/css/blocks/_component-image.css b/resources/css/blocks/_component-image.css
new file mode 100644
index 0000000..9fcee69
--- /dev/null
+++ b/resources/css/blocks/_component-image.css
@@ -0,0 +1,16 @@
+.homegrade-blocks-components-image {
+  width: 100%;
+  max-width: 450px;
+  &--original-ratio {
+    height: auto;
+  }
+  &--medium-ratio {
+    height: auto;
+    object-fit: cover;
+    aspect-ratio: 1/1.3;
+  }
+  &--square-ratio {
+    aspect-ratio: 1/1;
+    object-fit: cover;
+  }
+}
diff --git a/resources/css/blocks/accordeon.css b/resources/css/blocks/accordeon.css
new file mode 100644
index 0000000..0a9bb56
--- /dev/null
+++ b/resources/css/blocks/accordeon.css
@@ -0,0 +1,5 @@
+.homegrade-blocks-accordeon-panel-content {
+  &__content {
+    @apply pt-8;
+  }
+}
diff --git a/resources/css/blocks/card.css b/resources/css/blocks/card.css
new file mode 100644
index 0000000..3544da2
--- /dev/null
+++ b/resources/css/blocks/card.css
@@ -0,0 +1,6 @@
+.homegrade-blocks-card {
+  @apply bg-white w-full p-8 rounded-3xl;
+  *:first-child {
+    @apply mt-0;
+  }
+}
diff --git a/resources/css/blocks/column-cards.css b/resources/css/blocks/column-cards.css
new file mode 100644
index 0000000..bc09a53
--- /dev/null
+++ b/resources/css/blocks/column-cards.css
@@ -0,0 +1,13 @@
+.homegrade-blocks-column-cards {
+  @apply grid gap-12  w-full my-16;
+
+  &--has-2-columns {
+    @apply md:grid-cols-2;
+  }
+  &--has-3-columns {
+    @apply md:grid-cols-2 xl:grid-cols-3;
+  }
+  &--has-4-columns {
+    @apply md:grid-cols-2 xl:grid-cols-4;
+  }
+}
diff --git a/resources/css/blocks/grey-box.css b/resources/css/blocks/content-box.css
similarity index 75%
rename from resources/css/blocks/grey-box.css
rename to resources/css/blocks/content-box.css
index be04441..a05e3d3 100644
--- a/resources/css/blocks/grey-box.css
+++ b/resources/css/blocks/content-box.css
@@ -1,8 +1,8 @@
-.homegrade-content-blocks-grey-box {
+.homegrade-content-blocks-content-box {
   @apply card-large-content-container;
   @apply !pt-20 !pb-24;
 
-  > :first-child {
+  > :first-child:not(.homegrade-blocks-box-monoblock--has-illustration) {
     @apply !mt-0;
   }
 
diff --git a/resources/css/blocks/figure.css b/resources/css/blocks/figure.css
new file mode 100644
index 0000000..224d249
--- /dev/null
+++ b/resources/css/blocks/figure.css
@@ -0,0 +1,15 @@
+.homegrade-blocks-figure {
+  @apply text-center;
+  &__figure {
+    @apply font-bold !text-4xl text-slate-900 !mb-0;
+  }
+  &__title {
+    @apply text-secondary font-bold text-xl !mb-2;
+  }
+  &__caption {
+    p {
+      @apply !mb-0 mx-auto;
+      max-width: 250px;
+    }
+  }
+}
diff --git a/resources/css/blocks/highlight.css b/resources/css/blocks/highlight.css
index a3e22ea..8a4779b 100644
--- a/resources/css/blocks/highlight.css
+++ b/resources/css/blocks/highlight.css
@@ -1,15 +1,32 @@
 .homegrade-blocks-highlight {
-  @apply p-12 rounding-radius my-8 max-w-screen-xl mx-auto;
+  @apply p-12 rounding-radius my-8 max-w-screen-lg mx-auto;
 
   h3 {
     @apply pb-4;
   }
   p {
+    @apply max-w-3xl;
     margin-bottom: 10px;
   }
   &__block-title {
     @apply !pb-0;
   }
+  &__content {
+    @apply flex items-start gap-8;
+    .homegrade-blocks-highlight__content__innerblocks {
+      @apply w-full;
+    }
+  }
+  &__logo {
+    @apply p-4 bg-white h-auto flex justify-center items-center rounded-3xl;
+    width: 150px;
+    height: 150px;
+    aspect-ratio: 1/1;
+    margin-top: -10px;
+    img {
+      @apply max-h-full max-w-full block;
+    }
+  }
   .wp-block-button {
     @apply mt-6;
   }
diff --git a/resources/css/blocks/monoblock.css b/resources/css/blocks/monoblock.css
new file mode 100644
index 0000000..69a1376
--- /dev/null
+++ b/resources/css/blocks/monoblock.css
@@ -0,0 +1,14 @@
+.homegrade-blocks-box-monoblock {
+  &--has-illustration {
+    @apply relative pt-32 !mt-16;
+  }
+
+  &__superior-illustration + section_titling {
+    @apply bg-green-300 text-center;
+  }
+  &__superior-illustration {
+    @apply mx-auto  absolute top-0 left-1/2;
+    transform: translate(-50%, -50%);
+    max-width: 200px;
+  }
+}
diff --git a/resources/css/blocks/texte-image.css b/resources/css/blocks/texte-image.css
new file mode 100644
index 0000000..6f7d4d2
--- /dev/null
+++ b/resources/css/blocks/texte-image.css
@@ -0,0 +1,3 @@
+.homegrade-blocks-text-image {
+  @apply grid grid-cols-2 gap-24 xl:gap-32 py-16;
+}