FEATURE Handling post card overlay

resources/css/components/post-card.css

@@ -6,7 +6,7 @@
   }
 
   &--has-thumbnail {
-    @apply grid  gap-6;
+    @apply grid  gap-10;
     grid-template-columns: 1fr 3fr;
   }
   &.post-card--has-numerotation.post-card--has-thumbnail {
@@ -14,13 +14,34 @@
   }
 
   &__thumbnail {
-    @apply bg-white border border-solid border-primary p-2 h-fit grayscale hover:grayscale-0;
+    @apply h-fit relative;
     transition: all 0.3s ease-out;
     img {
+      @apply grayscale;
       aspect-ratio: 108/137;
-      @apply w-full  bg-green-400 object-cover;
+      @apply w-full  object-cover relative z-10 bg-white border border-solid border-primary p-2;
       height: auto;
     }
+    &:hover img {
+      @apply grayscale-0;
+    }
+    .thumbnail-overlay {
+      @apply absolute z-0 rotate-3 top-2 left-2 w-full h-full border border-primary bg-white flex items-center justify-center;
+      transform: translate(2px, 2px) rotate(2deg);
+      /* transform: translate(12px, 12px) rotate(3deg); */
+      background-image: linear-gradient(#efe8ff, #efe8ff);
+      background-size: calc(100% - 12px) calc(100% - 12px);
+      background-repeat: no-repeat;
+      background-position: center;
+      /* background-blend-mode: color-burn; */
+
+      /* background-size: calc(100% - 12px) calc(100% - 12px); */
+      /* &:after {
+        content: '';
+        width: calc(100% - 2rem);
+        height: calc(100% - 2rem);
+      } */
+    }
   }
 
   &:hover .post-card__thumbnail {

resources/css/components/post-header.css

@@ -1,6 +1,10 @@
 .post-header {
   @apply bg-primary text-white py-8 2xl:py-16 px-2 lg:px-4 md:px-8 overflow-x-hidden;
 
+  &:has(.post-header__inner--has-thumbnail) {
+    @apply pb-16 2xl:!pb-20;
+  }
+
   h1.post-header__title,
   h2.post-header__title {
     @apply uppercase font-medium text-4xl md:text-5xl lg:text-5xl text-white;
@@ -64,8 +68,10 @@
     @apply text-white;
   }
   .thumbnail-wrapper {
-    @apply relative z-20 h-fit;
+    @apply relative z-20 h-fit w-full;
+    @screen lg {
       width: calc(100% - 40px);
+    }
     padding: 1.2rem;
     /* max-width: calc(70% - 40px);
     @apply mx-auto; */
@@ -90,8 +96,9 @@
       margin: 0 auto; */
     }
     .thumbnail-overlay {
-      @apply absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white flex items-center justify-center;
+      /* display: none !important; */
-      transform: translate(2px, 2px) rotate(2deg);
+      @apply hidden lg:flex absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white  items-center justify-center;
+      transform: translate(2px, 2px) rotate(3deg);
       /* transform: translate(12px, 12px) rotate(3deg); */
       background-image: linear-gradient(#efe8ff, #efe8ff);
       background-size: calc(100% - 12px) calc(100% - 12px);

template-parts/components/cards/post-card.php

@@ -11,6 +11,7 @@ $link = get_the_permalink($ID);
 
 $has_post_thumbnail = has_post_thumbnail($ID);
 $thumbnail_url = get_the_post_thumbnail_url($ID) ?? null;
+$has_thumbnail_overlay = $args['has_thumbnail_overlay'] ?? false;
 
 $date = get_the_date('F Y', $ID);
 
@@ -26,12 +27,16 @@ $publication_directors = get_field('publication_directors', $ID);
 $numerotation = get_post_meta($ID, 'post_numerotation', true);
 $tags = get_the_terms($ID, 'etiquettes');
 
+
 ?>
 
 <a class="post-card post-card--<?php echo $current_post_type . ' ' . ($has_post_thumbnail ? 'post-card--has-thumbnail' : ''); ?> card" href="<?php echo $link; ?> ">
 	<?php if ($has_post_thumbnail) : ?>
 		<div class="post-card__thumbnail">
 			<img src="<?php echo $thumbnail_url; ?>" alt="<?php echo $title; ?>">
+			<?php if ($has_thumbnail_overlay) : ?>
+				<div class="thumbnail-overlay"></div>
+			<?php endif; ?>
 		</div>
 	<?php endif; ?>
 	<div class="card__inner">