card cosmo ambient

2026-02-20 21:54:38 +04:00
parent 3816b63a22
commit 9f3e5515d1
8 changed files with 6356 additions and 14 deletions
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,116 @@
 ---
+import { getCollection } from "astro:content";
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
+
+const allHumans = await getCollection("humans");
+// 1. On trie d'abord par date décroissante pour avoir les plus récents en premier [cite: 65]
+const sortedAll = allHumans.sort(
+    (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+);
+
+// 2. On utilise une Map pour ne garder que la première occurrence (la plus récente) de chaque nom
+const latestPerUser = Array.from(
+    sortedAll
+        .reduce((map, obj) => {
+            if (!map.has(obj.data.name)) {
+                map.set(obj.data.name, obj);
+            }
+            return map;
+        }, new Map())
+        .values(),
+);
+---

---
+<Layout title="Derniers Souffles">
+    <header class="minimal-header">
+        <nav>
+            <a href="/collection" class="menu-link">
+                <span class="icon">🎴</span> Collection
+            </a>
+        </nav>
+    </header>

-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
-</html>
+    <main class="hero-flex">
+        {
+            latestPerUser.map((entry) => (
+                <div class="card-focus">
+                    <Card frontmatter={entry.data} />
+                    <div class="entry-meta">
+                        <p>
+                            Dernier souffle :{" "}
+                            {new Date(entry.data.date).toLocaleDateString(
+                                "fr-FR",
+                            )}
+                        </p>
+                    </div>
+                </div>
+            ))
+        }
+    </main>
+</Layout>
+
+<style>
+    /* Header minimaliste pour le menu */
+    .minimal-header {
+        position: fixed;
+        top: 0;
+        right: 0;
+        padding: 20px 30px;
+        z-index: 100;
+    }
+
+    .menu-link {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        text-decoration: none;
+        color: #1e293b;
+        font-family: "Philosopher", serif;
+        font-weight: bold;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 10px 20px;
+        border-radius: 50px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+        backdrop-filter: blur(5px);
+        transition: transform 0.2s ease;
+    }
+
+    .menu-link:hover {
+        transform: scale(1.05);
+    }
+
+    /* Centrage absolu de la carte */
+    .hero-flex {
+        display: flex;
+        flex-wrap: wrap; /* Permet le retour à la ligne */
+        justify-content: center; /* Centre les cartes sur la ligne */
+        gap: 20px; /* Espacement simple et constant */
+        padding: 100px 20px; /* Padding haut pour le header fixé */
+        width: 100%;
+        min-height: 100vh;
+    }
+
+    .card-focus {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+        flex: 0 1 320px; /* Ne grandit pas, peut rétrécir, base à 320px */
+    }
+    .entry-meta {
+        font-family: "Inter", sans-serif;
+        font-size: 0.8rem;
+        color: #94a3b8;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+
+    /* Ajustement Mobile pour ton Samsung */
+    @media (max-width: 480px) {
+        .hero-flex {
+            gap: 10px; /* Gap plus serré sur téléphone */
+            padding: 80px 10px;
+        }
+    }
+</style>