ergonomie

2026-02-08 22:19:33 +04:00
parent f86f4cf705
commit 7812fb713b
2 changed files with 79 additions and 113 deletions
--- a/src/components/ContentSearch.astro
+++ b/src/components/ContentSearch.astro
@@ -7,7 +7,7 @@ interface Props {
 }
 const { posts, tags, basePath } = Astro.props;

-// Groupement simple
+// Groupement des tags par catégorie
 const groupedTags: Record<string, string[]> = { Général: [] };
 tags.forEach((tag) => {
    if (tag.includes(":")) {
@@ -105,6 +105,7 @@ tags.forEach((tag) => {
                .toLowerCase()
                .normalize("NFD")
                .replace(/[\u0300-\u036f]/g, "");
+
            const filtered = posts.filter((p) => {
                const mQuery = p.data.title.toLowerCase().includes(query);
                const mTag =
@@ -112,7 +113,8 @@ tags.forEach((tag) => {
                return mQuery && mTag;
            });

-            container!.innerHTML = filtered
+            // Reconstruction propre du HTML des cartes
+            container.innerHTML = filtered
                .map(
                    (p) => `
                <a href="/journal/${p.id}/" class="gold-button">
@@ -126,24 +128,31 @@ tags.forEach((tag) => {

        input.addEventListener("input", update);

+        // Gestion de la navigation par catégories
        document.querySelectorAll(".cat-nav-btn").forEach((btn) => {
            btn.addEventListener("click", () => {
                document
                    .querySelectorAll(".cat-nav-btn")
                    .forEach((b) => b.classList.remove("active"));
                btn.classList.add("active");
+
                const target = btn.getAttribute("data-target");
                document.querySelectorAll(".tag-subgroup").forEach((g) => {
                    (g as HTMLElement).style.display =
                        g.id === `group-${target}` ? "block" : "none";
                });
+
                if (target === "all") {
                    activeTag = "all";
+                    document
+                        .querySelectorAll(".js-tag-filter")
+                        .forEach((el) => el.classList.remove("active-tag"));
                    update();
                }
            });
        });

+        // Gestion des filtres par tags
        document.querySelectorAll(".js-tag-filter").forEach((t) => {
            t.addEventListener("click", () => {
                document
@@ -155,6 +164,8 @@ tags.forEach((tag) => {
            });
        });
    }
+
+    // Ré-initialisation lors du changement de page (Astro View Transitions)
    document.addEventListener("astro:page-load", init);
 </script>

@@ -172,6 +183,7 @@ tags.forEach((tag) => {
        border: 1px solid var(--color-gold);
        outline: none;
        font-family: inherit;
+        background: white;
    }
    .filter-box {
        border: 1px solid #dcd0b9;
--- a/src/layouts/GameLayout.astro
+++ b/src/layouts/GameLayout.astro
@@ -29,155 +29,109 @@ const { title } = Astro.props;
        --color-ink: #4a4130;
        --color-gold: #c89b3c;
        --color-gold-dark: #b8860b;
-        --obsidian-border: #dcd0b9;
    }

+    /* Reset de base */
    * {
        box-sizing: border-box;
    }
-
    body {
        background-color: var(--color-parchment);
        color: var(--color-ink);
-        /* Calibri en priorité */
-        font-family: "Calibri", "Candara", "Segoe UI", sans-serif;
+        font-family: "Calibri", "Segoe UI", sans-serif; /* Ta police Calibri */
        margin: 0;
-        line-height: 1.6;
        overflow-x: hidden;
    }

+    /* LE FIX DES MARGES : C'est ce bloc qui centre tout ton site */
    main {
        width: 100%;
-        max-width: 1000px;
-        margin: 0 auto;
-        padding: 1rem;
+        max-width: 1000px; /* Largeur confortable pour Lenovo et Samsung */
+        margin: 0 auto; /* Centre le bloc horizontalement */
+        padding: 2rem 1.5rem; /* Marges internes pour que rien ne touche les bords */
    }

-    /* --- TABLEAUX OBSIDIAN --- */
-    table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: 1.5rem 0;
-        border: 1px solid var(--obsidian-border);
-        display: block;
-        overflow-x: auto;
-    }
-    th,
-    td {
-        border: 1px solid var(--obsidian-border);
-        padding: 0.8rem;
-        text-align: left;
-    }
-    th {
-        background: rgba(220, 208, 185, 0.3);
-        font-family: "Cinzel", serif;
-    }
-
-    /* --- LISTES MOBILE --- */
-    ul,
-    ol {
-        padding-left: 1.5rem;
-        margin: 1rem 0;
-    }
-    li {
-        margin-bottom: 0.4rem;
-    }
-
-    @media (max-width: 640px) {
-        ul ul,
-        ol ol {
-            padding-left: 1rem;
-        }
-        main {
-            padding: 0.8rem;
-        }
-    }
-
-    /* --- CITATIONS (BLOCKQUOTES) --- */
-    blockquote {
-        margin: 1.5rem 0;
-        padding: 0.5rem 1rem;
-        border-left: 4px solid var(--color-gold);
-        background: rgba(200, 155, 60, 0.05);
-        font-style: italic;
-    }
-
-    /* --- STYLE DES TAGS --- */
-    /* On utilise une classe explicite pour éviter l'erreur de build */
-    .tag-link {
-        display: inline-block !important;
-        text-decoration: none !important;
-        background: white !important;
-        border: 1px solid var(--color-gold) !important;
-        padding: 0.2rem 0.7rem !important;
-        border-radius: 15px !important;
-        font-family: "Cinzel", serif !important;
-        font-size: 0.7rem !important;
-        color: var(--color-ink) !important;
-        margin: 0.2rem !important;
-        transition: 0.2s;
-    }
-    .tag-link:hover {
-        background: var(--color-gold) !important;
-        color: white !important;
-    }
-
-    /* STYLE DES CARTES (Gold Button) */
-    .gold-button {
+    /* LA GRILLE : Flexbox pour éviter le débordement mobile */
+    .card-grid {
        display: flex;
-        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 20px;
        justify-content: center;
-        align-items: center;
-        background: #fffaf0; /* Fond parchemin clair */
-        border: 2px solid var(--color-gold);
-        border-radius: 12px;
-        padding: 1.5rem;
-        text-decoration: none !important;
-        transition: all 0.3s ease;
-        text-align: center;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        padding: 20px 0;
+        width: 100%;
+    }
+
+    /* LE STYLE DES CARTES (FORCE LE LOOK D'INDEX) */
+    .gold-button {
+        flex: 1 1 300px;
+        max-width: 400px;
        min-height: 120px;
+        background: white !important;
+        border: 2px solid var(--color-gold) !important;
+        border-radius: 12px !important;
+        padding: 20px !important;
+        text-decoration: none !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: center !important;
+        transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    }

    .gold-button:hover {
        transform: translateY(-5px);
-        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
-        border-color: var(--color-gold-dark);
-        background: white;
+        border-color: var(--color-gold-dark) !important;
+        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
    }

    .gold-button .title {
-        font-family: "Cinzel", serif;
-        font-size: 1.2rem;
-        color: var(--color-gold-dark);
-        margin-bottom: 0.5rem;
+        font-family: "Cinzel", serif !important;
+        color: var(--color-gold-dark) !important;
+        font-size: 1.1rem !important;
        text-transform: uppercase;
+        margin-bottom: 8px;
+        text-align: center;
    }

    .gold-button .body {
-        font-family: "Calibri", sans-serif; /* Ta police demandée */
-        font-size: 0.9rem;
-        color: var(--color-ink);
-        opacity: 0.8;
+        font-family: "Calibri", sans-serif !important;
+        color: var(--color-ink) !important;
+        font-size: 0.9rem !important;
        margin: 0;
+        opacity: 0.8;
    }

-    /* GRILLE FLEXBOX */
-    .card-grid {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
-        justify-content: center;
-        padding: 2rem 0;
+    /* TAGS PROPRES SANS PRÉFIXE */
+    .js-tag-filter,
+    .tag-link {
+        display: inline-block;
+        background: white;
+        border: 1px solid var(--color-gold);
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-family: "Cinzel", serif;
+        font-size: 0.7rem;
+        color: var(--color-ink);
+        cursor: pointer;
+        margin: 4px;
+        text-decoration: none;
    }

-    .card-grid > * {
-        flex: 1 1 300px;
-        max-width: 400px;
+    .active-tag,
+    .js-tag-filter:hover {
+        background: var(--color-gold) !important;
+        color: white !important;
    }

+    /* MOBILE : On élargit au maximum */
    @media (max-width: 640px) {
-        .card-grid > * {
+        .card-grid {
+            padding: 10px;
+        }
+        .gold-button {
            flex: 1 1 100%;
        }
    }