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

classe et espece

Browse Source
This commit is contained in:
LATCHIMY Nicolas
2026-02-17 12:22:38 +04:00
parent 3210775cee
commit 179eedb321
21 changed files with 421 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/layouts/GameLayout.astro
View File

@@ -30,28 +30,41 @@ const { title } = Astro.props;
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap");
:root {
/* Palette de base */
--color-parchment: #fdf6e8;
--color-ink: #4a4130;
--color-gold: #c89b3c;
--color-gold-dark: #b8860b;
--color-ancient-blue: #3f51b5; /* Le bleu dominant */
--color-ancient-purple: #673ab7; /* Les ombres de l'illustration */
--color-ancient-gold: #f4d03f; /* Les touches de lumière ocre */
--color-bg-canvas: #fdf6e8; /* Ton parchemin actuel */
/* Nuancier des Callouts (Tes Surcharges) */
--co-info: #3f51b5;
--co-success: #2e7d32;
--co-warning: #f57c00;
--co-error: #8b0000;
--co-todo: #455a64;
--co-quote: #9e9e9e;
--co-abstract: #0097a7;
}
/* Reset de base */
/* --- BASE & STRUCTURE --- */
* {
box-sizing: border-box;
}
body {
background-color: var(--color-parchment);
color: var(--color-ink);
font-family: "Calibri", "Segoe UI", sans-serif; /* Ta police Calibri */
font-family: "Calibri", "Segoe UI", sans-serif;
margin: 0;
overflow-x: hidden;
}
main {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
hr {
border: 0;
height: 1px;
@@ -64,16 +77,12 @@ const { title } = Astro.props;
margin: 2.5rem 0;
}
/* LE FIX DES MARGES : C'est ce bloc qui centre tout ton site */
main {
width: 100%;
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 */
/* --- TYPOGRAPHIE & LIENS --- */
main strong {
color: var(--color-gold-dark);
font-weight: 700;
}
/* --- 1. LES WIKILINKS [[Concept]] --- */
/* Le plugin transforme [[Concept]] en <a href="/concept">Concept</a> */
main a[href] {
color: var(--color-gold-dark);
font-weight: bold;
@@ -91,132 +100,149 @@ const { title } = Astro.props;
border-bottom-style: solid;
}
/* --- STYLE DES TABLEAUX MARKDOWN (GFM) --- */
/* --- TABLEAUX (GFM) --- */
main table {
width: 100%;
border-collapse: collapse;
margin: 2.5rem 0;
background-color: #ffffff; /* Fond blanc pour faire ressortir l'alternance */
background-color: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
overflow: hidden; /* Pour que les coins arrondis fonctionnent avec le fond des th */
border-radius: 8px;
overflow: hidden;
}
/* Entête du tableau */
main th {
background-color: var(--color-gold);
color: white;
font-family: "Cinzel", serif;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 1px;
padding: 15px;
text-align: left;
border: 1px solid var(--color-gold-dark);
}
main th strong {
color: white;
}
/* Cellules standards */
main td {
padding: 12px 15px;
border: 1px solid rgba(200, 155, 60, 0.2);
border: 1px solid rgba(200, 155, 60, 0.1);
font-size: 0.95rem;
color: var(--color-ink);
line-height: 1.4;
}
/* --- L'ALTERNANCE (LE ZEBRA) --- */
/* On applique un fond léger sur les lignes paires (even) */
main tr:nth-child(even) {
background-color: rgba(200, 155, 60, 0.06);
background-color: rgba(200, 155, 60, 0.04);
}
/* Effet au survol de la ligne pour ne pas perdre le fil */
main tr:hover {
background-color: rgba(200, 155, 60, 0.12);
transition: background-color 0.2s ease;
}
/* Ajustement pour le gras à l'intérieur des tableaux */
main td strong {
color: var(--color-gold-dark);
}
/* --- 3. LES GRAS ET SOULIGNÉS --- */
main strong {
color: var(--color-gold-dark);
font-weight: 700;
}
/* 3. Correction Tableaux : Assurer l'affichage sur mobile */
@media (max-width: 640px) {
main table {
display: block;
overflow-x: auto; /* Permet de scroller le tableau s'il est trop large sur ton Samsung */
white-space: nowrap;
}
}
/* Style pour les lignes alternées de tes tableaux (Aventuriers/Personnages) */
main table tr:nth-child(even) {
background-color: rgba(200, 155, 60, 0.08);
}
main table tr:hover {
background-color: rgba(200, 155, 60, 0.15);
/* --- SYSTEME DE CALLOUTS (FORCE BRUTE) --- */
/* 1. Squelette commun : On cible très précisément */
main blockquote,
main [data-callout] {
--c-accent: var(--color-gold) !important; /* Valeur de secours */
margin: 2rem 0 !important;
padding: 1.5rem !important;
border-left: 5px solid var(--c-accent) !important;
background-color: color-mix(
in srgb,
var(--c-accent),
transparent 92%
) !important;
border-radius: 0 8px 8px 0 !important;
color: var(--color-ink) !important;
}
/* --- RÉPARATION DU RENDU ET STYLE CALLOUT --- */
main blockquote {
margin: 2rem 0;
padding: 1.5rem;
background-color: rgba(200, 155, 60, 0.05);
border-left: 5px solid var(--color-gold);
border-radius: 0 8px 8px 0;
color: var(--color-ink);
/* Titre : On force la couleur de l'accent ici aussi */
main [data-callout] .callout-title {
display: flex !important;
align-items: center !important;
font-family: "Cinzel", serif !important;
font-weight: bold !important;
text-transform: uppercase !important;
color: var(--c-accent) !important;
margin-bottom: 0.5rem !important;
}
/* LA GRILLE : Flexbox pour éviter le débordement mobile */
/* Nettoyage radical des icônes SVG/Éclair */
main [data-callout] .callout-icon,
main [data-callout] svg {
display: none !important;
}
/* Ajout de l'icône personnalisée */
main [data-callout] .callout-title::before {
margin-right: 12px;
font-size: 1.2rem;
}
/* 2. SURCHARGES DES NUANCIERS (L'ordre est crucial) */
/* ERROR : On redéfinit la variable pivot */
main [data-callout="error"],
main [data-callout="fail"] {
--c-accent: var(--co-error) !important;
}
main [data-callout="error"] .callout-title::before,
main [data-callout="fail"] .callout-title::before {
content: "🎲";
}
/* SUCCESS */
main [data-callout="success"],
main [data-callout="done"] {
--c-accent: var(--co-success) !important;
}
main [data-callout="success"] .callout-title::before {
content: "✨";
}
/* INFO */
main [data-callout="info"],
main [data-callout="note"] {
--c-accent: var(--co-info) !important;
}
main [data-callout="info"] .callout-title::before {
content: "📜";
}
/* Application aux textes gras internes */
main [data-callout] strong {
color: var(--c-accent) !important;
}
/* --- GRILLE & CARTES --- */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
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: 1px solid var(--color-gold) !important;
border-radius: 12px !important;
padding: 20px !important;
border-radius: 12px;
padding: 20px;
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;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease;
}
.gold-button:hover {
transform: translateY(-5px);
border-color: var(--color-gold-dark) !important;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.gold-button .title {
font-family: "Cinzel", serif !important;
color: var(--color-gold-dark) !important;
font-size: 1.1rem !important;
font-family: "Cinzel", serif;
color: var(--color-gold-dark);
text-transform: uppercase;
margin-bottom: 8px;
text-align: center;
@@ -252,11 +278,15 @@ const { title } = Astro.props;
color: white !important;
}
/* MOBILE : On élargit au maximum */
/* --- MOBILE --- */
@media (max-width: 640px) {
.card-grid {
padding: 10px;
}
main table {
display: block;
overflow-x: auto;
}
.gold-button {
flex: 1 1 100%;
}