updating post infos capsule with taxonomy colors and globalized styles

resources/css/app.css

@@ -25,7 +25,6 @@
 @import './components/brochures-grid.css';
 @import './components/card-grid-container.css';
 @import './components/filters-toolbar.css';
-@import './components/post-infos-capsule.css';
 
 @import '../../template-components/cards/card-news.css';
 @import '../../template-components/cards/card-frequent_question.css';
@@ -34,6 +33,7 @@
 @import '../../template-components/posts-components/chapter-header.css';
 @import '../../template-components/heading-box.css';
 @import '../../template-components/news-heading-box.css';
+@import '../../template-components/post-infos-capsule.css';
 
 /* ########### LAYOUT ############ */
 @import './layout/header.css';

resources/css/editor-content/color-taxonomy-scheme.css

@@ -60,7 +60,9 @@ body.akoestiek,
         @apply text-acoustique-coproprietes;
       }
     }
-    time {
+    .post-infos-capsule__share,
+    .post-infos-capsule__publication-date,
+    .post-infos-capsule__modification-date {
       @apply text-acoustique-coproprietes;
     }
   }
@@ -165,7 +167,9 @@ body.energie,
         @apply text-energies-urbanisme;
       }
     }
-    time {
+    .post-infos-capsule__share,
+    .post-infos-capsule__publication-date,
+    .post-infos-capsule__modification-date {
       @apply text-energies-urbanisme;
     }
   }
@@ -272,7 +276,9 @@ body.isolation,
         @apply text-isolation-quotidien;
       }
     }
-    time {
+    .post-infos-capsule__share,
+    .post-infos-capsule__publication-date,
+    .post-infos-capsule__modification-date {
       @apply text-isolation-quotidien;
     }
   }
@@ -370,7 +376,9 @@ body.erfgoed,
         @apply text-patrimoine-renovation;
       }
     }
-    time {
+    .post-infos-capsule__share,
+    .post-infos-capsule__publication-date,
+    .post-infos-capsule__modification-date {
       @apply text-patrimoine-renovation;
     }
   }
@@ -468,7 +476,9 @@ body.circulaire-renovatie,
         @apply text-location-renovation-circulaire;
       }
     }
-    time {
+    .post-infos-capsule__share,
+    .post-infos-capsule__publication-date,
+    .post-infos-capsule__modification-date {
       @apply text-location-renovation-circulaire;
     }
   }

template-components/post-infos-capsule.css

@@ -0,0 +1,51 @@
+.post-infos-capsule {
+  @apply flex flex-wrap justify-start gap-x-8 gap-y-5;
+  &__share,
+  &__publication-date,
+  &__modification-date {
+    @apply bg-white text-primary 
+		rounded-full 
+		px-4
+		sm:px-6 
+		py-2 
+		w-fit 
+		h-auto
+		flex justify-center
+		items-center
+		font-medium;
+  }
+  &__share {
+    @apply gap-1 md:gap-2;
+    .share-button {
+      @apply bg-primary w-8 h-8  rounded-full p-4 relative;
+      transition: transform 0.3s ease-in-out;
+      &:before {
+        @apply absolute w-3 h-3 bg-contain bg-center bg-no-repeat;
+        width: 25px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        content: '';
+      }
+      &:hover {
+        transform: scale(1.05);
+        filter: brightness(1.4);
+      }
+    }
+    .share-button--facebook {
+      &:before {
+        background-image: url('../resources/img/graphic-assets/icone-social-facebook.svg');
+      }
+    }
+    .share-button--twitter-x {
+      &:before {
+        background-image: url('../resources/img/graphic-assets/icone-social-twitter-x.svg');
+      }
+    }
+    .share-button--linkedin {
+      &:before {
+        background-image: url('../resources/img/graphic-assets/icone-social-linkedin.svg');
+      }
+    }
+  }
+}

template-components/post-infos-capsule.php

@@ -3,8 +3,7 @@ $postID = $args['postID'];
 $published = $args['published'] ?? null;
 $modified = $args['modified'] ?? null;
 
-
+if (!function_exists('build_share_urls')) {
-
 	function build_share_urls($postID)
 	{
 		$postUrl = get_permalink($postID);
@@ -19,6 +18,7 @@ function build_share_urls($postID)
 			'linkedin' => $linkedInUrl
 		);
 	}
+}
 
 $shareUrls = build_share_urls($postID);
 
@@ -27,7 +27,9 @@ $shareUrls = build_share_urls($postID);
 
 <div class="post-infos-capsule">
 	<div class="post-infos-capsule__share">
-		Partager sur
+		<?php
+		__('Partager sur', 'homegrade-theme__texte-fonctionnel')
+		?>
 		<?php foreach ($shareUrls as $key => $shareUrl) : ?>
 			<a class="share-button share-button--<?php echo  $key ?>" href='<?php echo  $shareUrl ?>' target="_blank" title="<?php echo __("Partager ce contenu sur", "homegrade-theme__texte-fonctionnel") . $key ?>">
 				<?php if ($key) : ?>
@@ -38,11 +40,13 @@ $shareUrls = build_share_urls($postID);
 	</div>
 	<?php if ($published) : ?>
 		<div class="post-infos-capsule__publication-date">
-
 			<time><?php echo __("Publié le ", "homegrade-theme__texte-fonctionnel") . $published ?></time>
 		</div>
 	<?php endif; ?>
 	<?php if ($modified) : ?>
-		<time class="post-infos-capsule__publication-date"><?php echo __("Publié le ", "homegrade-theme__texte-fonctionnel") . $modified ?></time>
+		<div class="post-infos-capsule__modification-date">
-	<?php endif; ?>
+			<time><?php echo __("Mis à jour le ", "homegrade-theme__texte-fonctionnel") . $modified ?></time>
+		</div>
+	<?php endif; ?>
+
 </div>