project blueprint - optional steps working

src/components/Project.vue

@@ -1,153 +0,0 @@
-<template>
-  <article class="project-item | flex | rounded-2xl | px-32 py-32">
-    <hgroup>
-      <h3>{{ project.title }}</h3>
-      <p>
-        Dernière mise à jour le
-        <time :datetime="project.modified">{{ frenchFormattedModified }}</time>
-      </p>
-    </hgroup>
-    <img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
-    <ol class="project-steps" data-steps="1">
-      <li class="project-step" data-status="in-progress">
-        <span class="pill" data-icon="search">Votre Brief</span>
-      </li>
-    </ol>
-  </article>
-</template>
-
-<script setup>
-import dayjs from "dayjs";
-import "dayjs/locale/fr";
-const { project } = defineProps({ project: Array });
-
-dayjs.locale("fr");
-
-const frenchFormattedModified = dayjs(project.modified).format(
-  "dddd D MMMM YYYY"
-);
-</script>
-
-<style scoped>
-.project-item {
-  --wrap: no-wrap;
-  background: var(--color-background);
-}
-
-.project-item hgroup {
-  flex: 1 1 0%;
-}
-.project-item h3 {
-  font-family: var(--font-serif);
-  font-size: var(--text-lg);
-  margin-bottom: var(--space-8);
-}
-.project-item p {
-  font-size: var(--text-sm);
-  line-height: var(--leading-sm);
-}
-
-.project-logo {
-  order: -1;
-  background: var(--color-grey-50);
-  color: var(--color-grey-400);
-  text-align: center;
-  line-height: 4.5rem;
-  width: 4.5rem;
-  height: 4.5rem;
-}
-
-.project-steps {
-  --color: var(--color-primary-100);
-  flex: 1 1 0%;
-  display: flex;
-  gap: var(--space-16);
-  margin-top: -2.75rem;
-  position: relative;
-}
-.project-steps[data-steps="1"]::after {
-  content: "étapes à venir";
-  font-size: var(--text-sm);
-  font-weight: 500;
-  width: 8rem;
-  position: absolute;
-  text-align: center;
-  color: var(--color-grey-700);
-  background: var(--color-background);
-  bottom: -2rem;
-  left: 50%;
-  transform: translate(-50%, -0.2em);
-}
-
-.project-step {
-  --color: var(--color-white);
-  position: relative;
-  flex: 1 1 0%;
-  text-align: center;
-}
-.project-step:last-child {
-  text-align: right;
-}
-.project-step:only-child,
-.project-step:first-child {
-  text-align: left;
-}
-
-.project-step[data-status="in-progress"]:only-child::before,
-.project-step[data-status="in-progress"]:only-child::after {
-  content: "";
-  display: inline-block;
-  height: 1.25rem;
-  position: absolute;
-  right: 3.75rem;
-  bottom: -2rem;
-}
-.project-step[data-status="in-progress"]:only-child::before {
-  height: 1rem;
-  background-repeat: repeat;
-  background-position: left center;
-  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
-  background-size: 0.75rem;
-  left: 5.5rem;
-  right: 5.5rem;
-  bottom: -1.875rem;
-}
-.project-step[data-status="in-progress"]:only-child::after {
-  --icon-size: 1.25rem;
-  width: var(--icon-size);
-  background: var(--color-grey-300);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: var(--icon-size);
-  mask-image: var(--icon-point);
-  right: 3.75rem;
-  bottom: -2rem;
-}
-
-.project-step .pill::after {
-  content: "";
-  display: inline-block;
-  width: var(--icon-size, 1.25rem);
-  height: var(--icon-size, 1.25rem);
-  background-color: var(--icon-color, var(--color-primary-100));
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: var(--size, 1.25rem);
-  mask-image: var(--icon, var(--icon-point));
-  position: absolute;
-  bottom: -2rem;
-}
-.project-step[data-status="done"] > .pill,
-.project-step[data-status="uncompleted"] > .pill {
-  --background: transparent;
-}
-.project-step[data-status="done"] .pill::after {
-  mask-image: var(--icon-check-3);
-}
-.project-step[data-status="in-progress"] .pill::after {
-  mask-image: var(--icon-point-active);
-}
-.project-step[data-status="uncompleted"] .pill::after {
-  --icon-color: var(--color-grey-300);
-}
-</style>