From b1e8848fcd018cf162b12d41f736a414295ebaee Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 16 Dec 2024 17:52:49 +0100
Subject: [PATCH] fix

---
 src/components/project/ProjectStep.vue | 30 ++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/project/ProjectStep.vue b/src/components/project/ProjectStep.vue
index a7f9593..e1a60bc 100644
--- a/src/components/project/ProjectStep.vue
+++ b/src/components/project/ProjectStep.vue
@@ -154,16 +154,28 @@
         </template>
       </template>
 
-      <template v-if="step.id === 'physicalSample'">
+      <template v-if="step.id === 'physicalSample' && step.files[0]">
         <div class="card | physical-sample">
-          <header class="text-center rounded-lg py-32" :style="'--cover: url('+step.cover+')'">
+          <header
+            class="text-center rounded-lg py-32"
+            :style="'--cover: url(' + step.cover + ')'"
+          >
             <h3 class="text-lg font-serif">
-              <router-link :to="'/' + step.uri" class="link-full">{{ step.title }}</router-link>
+              <router-link :to="'/' + step.uri" class="link-full">{{
+                step.title
+              }}</router-link>
             </h3>
-            <time class="font-medium text-sm py-8" :datetime="step.date">{{ step.date }}</time>
+            <time class="font-medium text-sm py-8" :datetime="step.date">{{
+              step.date
+            }}</time>
             <p>{{ step.description }}</p>
           </header>
-          <img :src="step.files[0].url" alt="" loading="lazy" class="rounded-lg mt-16">
+          <img
+            :src="step.files[0].url"
+            alt=""
+            loading="lazy"
+            class="rounded-lg mt-16"
+          />
         </div>
       </template>
       <template v-else></template>
@@ -206,7 +218,13 @@ const mergedFiles = computed(() => {
 <style scoped>
 .physical-sample header {
   color: var(--color-white);
-  background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black);
+  background: linear-gradient(
+      90deg,
+      hsla(0, 0%, 10%, 0.5) 0%,
+      hsla(0, 0%, 10%, 0.9) 50%,
+      hsla(0, 0%, 10%, 0.9) 100%
+    ),
+    var(--cover), var(--color-black);
   background-repeat: no-repeat;
   background-size: cover;
 }