diff --git a/src/components/EventCard.astro b/src/components/EventCard.astro index 90e0287..49b57c2 100644 --- a/src/components/EventCard.astro +++ b/src/components/EventCard.astro @@ -21,8 +21,9 @@ const categoryColors = { Amical: "#8b5cf6", SI_Arbitrage: "violet", SI_Applicatif: "#5ca6e8", - SI_Logistique: "Gold", - SI_Strategie: "Grey", + SI_Logistique: "#45c494", + SI_Strategie: "#d7d7d7", + Psy: "Pink", default: "#ec4899", }; @@ -129,7 +130,7 @@ if (status === "Terminé") { linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.1) 100% + rgba(0, 0, 0, 0) 100% ), var(--bg-image) !important; } @@ -141,9 +142,9 @@ if (status === "Terminé") { flex-direction: column; padding: 12px; background: linear-gradient( - rgba(0, 0, 0, 0.1) 0%, - rgba(0, 0, 0, 0.1) 70%, - rgba(0, 0, 0, 0.3) 100% + rgba(20, 0, 255, 0.1) 0%, + rgba(255, 191, 0, 0.1) 70%, + rgba(255, 0, 0, 0.3) 100% ); } diff --git a/src/pages/collection.astro b/src/pages/collection.astro index 2125de7..5468c1d 100644 --- a/src/pages/collection.astro +++ b/src/pages/collection.astro @@ -137,12 +137,15 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => { .user-flex-row { display: flex; flex-wrap: wrap; - gap: 20px; /* Gap simple comme demandé */ - justify-content: flex-center; + gap: 45px; /* Gap simple comme demandé */ + justify-content: flex-start; + margin-bottom: 100px; } .entry-meta { font-family: "Inter", sans-serif; + position: relative; + top: 5px; font-size: 0.8rem; color: #94a3b8; text-transform: uppercase; @@ -153,26 +156,72 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => { .card-link { text-decoration: none; transition: transform 0.3s ease; + + /* 1. On définit la taille "réelle" que prendra la carte dans le flux */ + /* Si ta Card fait 300px de large, on met 150px ici */ + width: 150px; + height: 220px; + + /* 2. On autorise le contenu à déborder visuellement de la boîte logicielle */ + overflow: visible; } .card-link:hover { transform: translateY(-5px); } + .card-scaler { + /* 3. On réduit l'échelle */ + transform: scale(0.5); + + /* 4. On fixe l'origine en haut à gauche pour que la carte + se cale parfaitement dans le coin du .card-link */ + transform-origin: top left; + + /* 5. On s'assure que la carte garde sa taille originale en interne + pour ne pas briser le layout interne de */ + width: 300px; + height: 440px; + } + .separator { margin-top: 50px; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.05); } - /* Adaptabilité mobile [cite: 96] */ + /* Adaptabilité mobile */ @media (max-width: 480px) { .user-flex-row { - gap: 15px; - justify-content: center; + display: flex; /* */ + flex-wrap: wrap; /* */ + gap: 10px; /* Espacement horizontal entre les colonnes */ + justify-content: center; /* [cite: 36] */ + padding: 0; } + + .card-link { + /* On force la largeur à un tiers de l'écran moins le gap */ + width: calc(45%); + /* On réduit la hauteur de la boîte pour que le separator remonte */ + height: 190px; + text-decoration: none; /* [cite: 33] */ + display: block; + overflow: visible; + } + .card-scaler { - transform: scale(0.9); + transform: scale(0.4) !important; /* On force le scale à 0.3 */ + transform-origin: top left; /* Indispensable pour coller au bord haut-gauche */ + width: 300px; /* Taille originale [cite: 23] */ + height: 440px; /* Taille originale [cite: 24] */ + } + + .entry-meta { + /* On masque ou on réduit drastiquement la méta pour gagner de la place */ + font-size: 0.5rem; /* [cite: 32] */ + margin-top: -5px; + white-space: nowrap; } }