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

ergonomie

Browse Source
This commit is contained in:
LATCHIMY Nicolas
2026-02-08 22:19:33 +04:00
parent f86f4cf705
commit 7812fb713b
2 changed files with 79 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/layouts/GameLayout.astro
View File

@@ -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%;
}
}