working

src/components/Post.vue

@@ -1,20 +1,32 @@
 <template>
   <article
-    class="w-full h-blog p-2 flex flex-col justify-between my-5"
-    :style="{ backgroundImage: 'url(http://localhost:5555/files/' + cover.file_name + ')' }"
+    class="border-2 border-black border-solid rounded-xl w-full h-blog p-2 flex flex-col justify-between my-5 duration-200 transform hover:scale-95"
+    :style="{ backgroundImage: 'url(http://localhost:5555/files/' + cover + ')' }"
   >
     <div>
-      <p class="text-3xl text-white font-bold text-justify leading-7 mb-3">{{title}}</p>
-      <p class="text-dark-900 text-lg italic text-justify leading-5">{{description}}</p>
+      <p
+        class="text-3xl  font-bold text-justify leading-7 mb-3"
+        :class="lightBg === 1 ? 'text-black':'text-white'"
+      >{{title}}</p>
+      <p
+        class="text-lg italic text-justify leading-5"
+        :class="lightBg === 1 ? 'text-gray-900':'text-dark-900'"
+      >{{description}}</p>
     </div>
-    <div class="flex justify-between mt-8 text-dark-900">
+    <div
+      class="flex justify-between mt-8"
+      :class="lightBg ? 'text-gray-900':'text-dark-900'"
+    >
       <div>
         <div>{{formatDate}}</div>
         <div>{{reading_time}} min read</div>
         <div>{{likes}} ❤</div>
       </div>
       <div class="self-end flex flex-wrap flex-col md:flex-row">
-        <div v-for="(tag) in tags" class="my-1 md:my-0 ml-2 py-1 px-2 bg-white text-black rounded font-semibold">
+        <div v-for="(tag) in tags"
+             class="my-1 md:my-0 ml-2 py-1 px-2 rounded font-semibold"
+             :class="lightBg ? 'bg-black text-white':'bg-white text-black'"
+        >
           #{{tag}}
         </div>
       </div>
@@ -52,7 +64,11 @@ export default {
     },
     cover: {
       type: String,
-      default: "https://api.arthurdanjou.fr/pictures/default.png"
+      default: "default.png"
+    },
+    lightBg: {
+      type: Number,
+      default: false
     }
   },
   computed: {
@@ -75,5 +91,6 @@ export default {
   min-height: 20rem;
   background-position: center;
   background-size: cover;
+  @apply bg-opacity-50;
 }
 </style>