diff --git a/src/components/ContentSearch.astro b/src/components/ContentSearch.astro index 6e64406..45b6ecc 100644 --- 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 = { 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) => ` @@ -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); @@ -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; diff --git a/src/layouts/GameLayout.astro b/src/layouts/GameLayout.astro index f39ae9e..3720ec8 100644 --- 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%; } }