FEATURE Styling blockquote

resources/css/app.css

@@ -53,5 +53,6 @@
 /* ########### BLOCKS ############ */
 @import './blocks/explore-tags.css';
 @import './blocks/wp-block-pullquote.css';
+@import './blocks/wp-block-quote.css';
 @import './blocks/statistics-datas.css';
 @import './blocks/recommandations.css';

resources/css/blocks/recommandations.css

@@ -51,7 +51,7 @@
   }
 
   .revue-recommandation-card {
-    @apply flex flex-col gap-x-8 gap-y-2 bg-white p-8 border border-primary;
+    @apply flex flex-col gap-x-8 gap-y-2 bg-white p-8 border border-primary h-fit;
     .content-meta {
       @apply text-primary;
     }
@@ -61,9 +61,25 @@
     &__thumbnail {
       @apply p-4  border border-primary mt-8;
       transform: rotate(2deg);
+
       img {
+        transition: filter 0.3s ease-out;
+        filter: grayscale(100%);
         @apply w-full h-48 object-cover;
       }
+      &:hover img {
+        filter: grayscale(0%);
+      }
     }
   }
+
+  .revue-recommandation-card:nth-child(1) {
+    @apply mt-auto;
+  }
+  .revue-recommandation-card:nth-child(2) {
+    @apply my-auto;
+  }
+  .revue-recommandation-card:nth-child(3) {
+    @apply mb-auto;
+  }
 }

resources/css/blocks/wp-block-quote.css

@@ -0,0 +1,19 @@
+.wp-block-quote {
+  border: none;
+  p {
+    @apply font-medium;
+    font-size: 1.2rem;
+  }
+  @apply relative pl-12;
+  &:before {
+    background-image: url('../resources/img/icons/cite-icon.svg');
+    @apply content-[''] block w-8 h-8  absolute top-0 left-0;
+  }
+  cite {
+    &:before {
+      @apply pr-2;
+      content: 'EXTRAIT';
+      @apply font-bold;
+    }
+  }
+}

resources/img/icons/cite-icon.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48 46.125L0 48V0L48 1.96875V46.125Z" fill="#136F63"/>
+</svg>