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/[...id].astro
+++ b/src/pages/[...id].astro
@@ -0,0 +1,156 @@
+---
+import { getCollection } from "astro:content";
+import Layout from "../layouts/Layout.astro";
+import TimelineBoard from "../components/TimelineBoard.astro";
+import Card from "../components/Card.astro";
+
+export async function getStaticPaths() {
+    const allHumans = await getCollection("humans");
+    const sortedEntries = allHumans.sort(
+        (a, b) =>
+            new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+    );
+    return allHumans.map((entry) => ({
+        params: { id: entry.id.replace(/\.md$/, "") },
+        props: { entry, sortedEntries },
+    }));
+}
+
+const { entry, sortedEntries } = Astro.props;
+const manifestations = entry.data.manifestations || [];
+---
+
+<Layout title={`Hebel - ${entry.data.name}`}>
+    <div class="hebel-dashboard">
+        <aside class="nav-column">
+            <TimelineBoard entry={entry} sortedEntries={sortedEntries} />
+        </aside>
+
+        <main class="focus-column">
+            <div class="card-scaling-container">
+                <Card frontmatter={entry.data} />
+            </div>
+        </main>
+
+        <aside class="details-column">
+            <h2 class="section-title">Émanations</h2>
+            <div class="details-scroll">
+                {
+                    manifestations.map((m) => (
+                        <div class={`detail-card ${m.cercle}`}>
+                            <header>
+                                <span class="cercle-label">{m.cercle}</span>
+                            </header>
+                            <p>{m.content}</p>
+                        </div>
+                    ))
+                }
+            </div>
+        </aside>
+    </div>
+</Layout>
+
+<style>
+    .hebel-dashboard {
+        display: grid;
+        grid-template-columns: 280px 1fr 320px;
+        gap: 20px;
+        padding: 20px;
+        max-width: 1600px;
+        margin: 0 auto;
+        height: 100vh;
+        align-items: start;
+    }
+
+    /* Aligner le style des colonnes sur la Card */
+    .details-column {
+        background: rgba(255, 255, 255, 0.6);
+        backdrop-filter: blur(10px);
+        border-radius: 18px; /* Comme la Card [cite: 48] */
+        padding: 20px;
+        border: 1px solid #e2e8f0;
+        height: calc(100vh - 40px);
+        display: flex;
+        flex-direction: column;
+    }
+
+    .section-title {
+        font-family: "Philosopher", serif; /* Cohérence [cite: 127] */
+        text-transform: uppercase;
+        font-size: 0.9rem;
+        letter-spacing: 2px;
+        margin-bottom: 20px;
+        color: #475569;
+    }
+
+    .details-scroll {
+        overflow-y: auto;
+        flex: 1;
+    }
+
+    /* Style des items calqué sur les types de la Card [cite: 107, 108, 109, 110] */
+    .detail-card {
+        background: white;
+        padding: 15px;
+        border-radius: 10px;
+        margin-bottom: 12px;
+        border-bottom: 4px solid #666;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+
+    .detail-card.PRO {
+        border-color: #f59e0b;
+    }
+    .detail-card.SAN {
+        border-color: #3b82f6;
+    }
+    .detail-card.SOC {
+        border-color: #ec4899;
+    }
+    .detail-card.FLX {
+        border-color: #10b981;
+    }
+
+    .cercle-label {
+        font-size: 0.7rem;
+        font-weight: bold;
+        color: #94a3b8;
+    }
+
+    /* CONTROLE DU SCROLL HORIZONTAL (MOBILE) */
+    .focus-column {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .card-scaling-container {
+        max-width: 100%; /* Empêche le débordement [cite: 128] */
+    }
+
+    /* RESPONSIVE : Passage en colonne pour ton Samsung */
+    @media (max-width: 1100px) {
+        .hebel-dashboard {
+            grid-template-columns: 1fr;
+            height: auto;
+            padding: 10px;
+        }
+
+        .nav-column,
+        .details-column {
+            order: 2;
+            height: auto;
+        }
+
+        .focus-column {
+            order: 1;
+            padding: 20px 0;
+        }
+
+        /* Réduction de la carte si l'écran est trop petit */
+        .card-scaling-container {
+            transform: scale(0.9);
+            transform-origin: top center;
+        }
+    }
+</style>