diff --git a/public/images/nicosofia.jpg b/public/images/nicosofia.jpg new file mode 100644 index 0000000..e9b8f6c Binary files /dev/null and b/public/images/nicosofia.jpg differ diff --git a/src/components/EventCard.astro b/src/components/EventCard.astro index 098436e..e51847e 100644 --- a/src/components/EventCard.astro +++ b/src/components/EventCard.astro @@ -10,19 +10,24 @@ const { summary, status, type, + image, } = frontmatter; // Définition des couleurs par catégorie [cite: 93, 94, 95, 96] const categoryColors = { - Festival: "#f59e0b", // Orange/Or - IRL: "#a1be18", // Bleu - default: "#ec4899", // Ton vert actuel + Festival: "#f59e0b", + IRL: "#a1be18", + Amical: "#8b5cf6", + default: "#ec4899", }; const accentColor = categoryColors[type] || categoryColors["default"]; --- -
+
{type.toUpperCase()} @@ -69,13 +74,24 @@ const accentColor = categoryColors[type] || categoryColors["default"]; width: 320px; height: 480px; /* Utilisation de la couleur dynamique [cite: 6, 61] */ - background: var(--accent-color); + background-color: var(--accent-color); border-radius: 18px; padding: 12px; font-family: "Philosopher", serif; color: rgba(0, 0, 0, 0.7); transition: background 0.3s ease; + position: relative; /* Important pour le contexte d'affichage */ + background-size: cover; + background-position: center; } + /* Style spécifique quand il y a une image de fond */ + .event-card.has-bg { + background-image: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.0) 0%, + rgba(255, 255, 255, 0.1) 100% + ), var(--bg-image) !important; + } .card-inner { height: 100%; border: 1px solid rgba(0, 0, 0, 0.1); @@ -83,6 +99,8 @@ const accentColor = categoryColors[type] || categoryColors["default"]; display: flex; flex-direction: column; padding: 12px; + /* Rendre le fond transparent si une image est présente */ + background: rgba(255, 255, 255, 0.05); } .event-header { display: flex; @@ -107,6 +125,11 @@ const accentColor = categoryColors[type] || categoryColors["default"]; font-size: 1.4rem; margin: 5px 0; } + .event-title-overlay { + font-size: 1.4rem; [cite: 16] + margin-bottom: 10px; + text-shadow: 0px 1px 2px rgba(255,255,255,0.8); + } .location-tag { font-size: 0.7rem; opacity: 0.9;