finalisation home page

2026-02-06 20:20:01 +01:00
parent 91c1b03a2f
commit d9ac2b4cc5
45 changed files with 1892 additions and 148 deletions
--- a/app/components/SquareCardList.vue
+++ b/app/components/SquareCardList.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="square-card-list">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+  .square-card-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-cards);
+    justify-content: flex-start;
+  }
+  @media (max-width: 572px) {
+    .square-card-list {
+      justify-content: center;
+    }
+  }
+
+  // Afficher seulement 1 cards < 600px
+  @media (max-width: 599px) {
+    .square-card-list > .square-card:nth-child(2) {
+      display: none;
+    }
+    .square-card-list > .square-card:nth-child(3) {
+      display: none;
+    }
+  }
+
+  // Afficher seulement 2 cards < 900px
+  @media (max-width: 799px) {
+    .square-card-list > .square-card:nth-child(n+3) {
+      display: none;
+    }
+  }
+
+  // Taille des cards
+  @media (max-width: 599px) {
+    .square-card-list > .square-card {
+      max-width: 260px;
+      flex: 1 1 260px;
+      max-width: 90%;
+    }
+  }
+  @media (min-width: 600px) {
+    .square-card-list > .square-card {
+      max-width: 260px;
+      flex: 1 1 260px;
+    }
+  }
+  @media (min-width: 700px) {
+    .square-card-list > .square-card {
+      max-width: 280px;
+      flex: 1 1 280px;
+    }
+  }
+  @media (min-width: 800px) {
+    .square-card-list > .square-card {
+      max-width: 280px;
+      flex: 1 1 280px;
+    }
+  }
+  @media (min-width: 900px) {
+    .square-card-list > .square-card {
+      max-width: 260px;
+      flex: 1 1 260px;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    .square-card-list > .square-card {
+      max-width: 280px;
+      flex: 1 1 280px;
+    }
+  }
+
+  @media (min-width: 1100px) {
+    .square-card-list > .square-card {
+      max-width: 300px;
+      flex: 1 1 300px;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .square-card-list > .square-card {
+      max-width: 258px;
+      flex: 1 1 258px;
+    }
+  }
+
+  @media (min-width: 1300px) {
+    .square-card-list > .square-card {
+      max-width: 283px;
+      flex: 1 1 283px;
+    }
+  }
+
+  @media (min-width: 1400px) {
+    // style appliqué au composant enfant via sa classe
+    .square-card-list > .square-card {
+      max-width: 308px;
+      flex: 1 1 308px;
+    }
+  }
+
+
+
+</style>