chim1chim2/ambient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fullart

Browse Source
This commit is contained in:
LATCHIMY Nicolas
2026-02-22 14:45:12 +04:00
parent 398a29900f
commit 057461c3be
2 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/nicosofia.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

33
src/components/EventCard.astro
View File

@@ -10,19 +10,24 @@ const {
summary, summary,
status, status,
type, type,
image,
} = frontmatter; } = frontmatter;
// Définition des couleurs par catégorie [cite: 93, 94, 95, 96] // Définition des couleurs par catégorie [cite: 93, 94, 95, 96]
const categoryColors = { const categoryColors = {
Festival: "#f59e0b", // Orange/Or Festival: "#f59e0b",
IRL: "#a1be18", // Bleu IRL: "#a1be18",
default: "#ec4899", // Ton vert actuel Amical: "#8b5cf6",
default: "#ec4899",
}; };
const accentColor = categoryColors[type] || categoryColors["default"]; const accentColor = categoryColors[type] || categoryColors["default"];
--- ---
<article class="event-card" style={`--accent-color: ${accentColor}`}> <article
class={`event-card ${image ? "has-bg" : ""}`}
style={`--accent-color: ${accentColor}; --bg-image: url('${image}');`}
>
<div class="card-inner"> <div class="card-inner">
<header class="event-header"> <header class="event-header">
<span class="event-type">{type.toUpperCase()}</span> <span class="event-type">{type.toUpperCase()}</span>
@@ -69,13 +74,24 @@ const accentColor = categoryColors[type] || categoryColors["default"];
width: 320px; width: 320px;
height: 480px; height: 480px;
/* Utilisation de la couleur dynamique [cite: 6, 61] */ /* Utilisation de la couleur dynamique [cite: 6, 61] */
background: var(--accent-color); background-color: var(--accent-color);
border-radius: 18px; border-radius: 18px;
padding: 12px; padding: 12px;
font-family: "Philosopher", serif; font-family: "Philosopher", serif;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
transition: background 0.3s ease; 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 { .card-inner {
height: 100%; height: 100%;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
@@ -83,6 +99,8 @@ const accentColor = categoryColors[type] || categoryColors["default"];
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 12px; padding: 12px;
/* Rendre le fond transparent si une image est présente */
background: rgba(255, 255, 255, 0.05);
} }
.event-header { .event-header {
display: flex; display: flex;
@@ -107,6 +125,11 @@ const accentColor = categoryColors[type] || categoryColors["default"];
font-size: 1.4rem; font-size: 1.4rem;
margin: 5px 0; 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 { .location-tag {
font-size: 0.7rem; font-size: 0.7rem;
opacity: 0.9; opacity: 0.9;