From c897e2e6562a69ec88a4a4a889d27045b5563132 Mon Sep 17 00:00:00 2001
From: Nonimart <martinon.toinou@protonmail.com>
Date: Thu, 21 Aug 2025 16:17:43 +0200
Subject: [PATCH] FEATURE Optimizing post header thumbnail with an overlay

---
 resources/css/components/post-header.css | 31 ++++++++++++++++++++++--
 template-parts/post-header.php           |  1 +
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css
index 6459a8b..1716f15 100644
--- a/resources/css/components/post-header.css
+++ b/resources/css/components/post-header.css
@@ -19,10 +19,37 @@
     @apply bg-white text-primary;
   }
   .thumbnail-wrapper {
-    @apply bg-red-200;
+    @apply relative z-20;
+    aspect-ratio: 4/5;
+    padding: 1.2rem;
+
+    &:before {
+      content: '';
+      @apply bg-white block absolute top-0 left-0 border border-carhop-green-700 w-full h-full  z-10;
+    }
+
     img {
       /* max-height: 200px; */
-      @apply object-contain;
+      @apply w-full h-full relative z-10;
+      @apply object-cover;
+      /* width: calc(100% - 2rem);
+      height: calc(100% - 2rem);
+      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;
+      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;
+      &:after {
+        content: '';
+        @apply bg-carhop-purple-200;
+        width: calc(100% - 2rem);
+        height: calc(100% - 2rem);
+      }
     }
   }
 
diff --git a/template-parts/post-header.php b/template-parts/post-header.php
index b0ec4c5..95dce12 100644
--- a/template-parts/post-header.php
+++ b/template-parts/post-header.php
@@ -24,6 +24,7 @@ $citeReference = get_field('cite_reference', get_the_ID());
 		<?php if ($hasThumbnail) : ?>
 			<div class="thumbnail-wrapper">
 				<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
+				<div class="thumbnail-overlay"></div>
 			</div>
 		<?php endif; ?>