Gauthier/Site_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Harmonise le jeu Memory avec le style ambre du site et corrige le titre

Browse Source 
Le jeu utilisait le teal comme couleur dominante (titres, bordures,
boutons, cartes) alors que le reste du site n'emploie le teal que
ponctuellement (état de succès) et repose sur l'ambre comme couleur
principale. Remplace toutes les références teal par l'ambre déjà
défini dans header-style.css, et réaffecte le teal à son rôle habituel
de couleur de succès (paire trouvée), à la place du vert générique
utilisé jusqu'ici.

Renomme aussi le titre en "Memory pictogrammes", augmente la marge
sous le header pour éviter tout chevauchement, et ajoute un paramètre
de version aux feuilles de style du jeu pour éviter les soucis de
cache navigateur lors des prochaines mises à jour.
This commit is contained in:
gauthier.chombart
2026-07-07 17:23:57 +02:00
parent 75c5a1ac84
commit 9140d2f468
5 changed files with 81 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
exercices/memory-pictogrammes/assets/css/hud.css
View File

@@ -14,8 +14,8 @@
}
.stat-box {
background: linear-gradient(135deg, var(--teal-light), var(--white));
border: 2px solid var(--teal-mid);
background: linear-gradient(135deg, var(--amber-light), var(--white));
border: 2px solid var(--amber-mid);
border-radius: 12px;
padding: 20px;
text-align: center;
@@ -38,7 +38,7 @@
.stat-box:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--teal-dark);
border-color: var(--amber-dark);
}
.stat-box:hover::before {
@@ -57,7 +57,7 @@
.stat-box .value {
font-size: 32px;
font-weight: 800;
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -73,7 +73,7 @@
PROGRESS BAR (Paires trouvées)
============================================ */
.progress-container {
background: var(--teal-light);
background: var(--amber-light);
border-radius: 12px;
overflow: hidden;
height: 12px;
@@ -84,7 +84,7 @@
.game-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--teal-mid), var(--teal-dark));
background: linear-gradient(90deg, var(--amber-mid), var(--amber-dark));
width: 0%;
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@@ -148,15 +148,15 @@
}
.modal-content {
background: linear-gradient(135deg, var(--white), var(--teal-light));
background: linear-gradient(135deg, var(--white), var(--amber-light));
border-radius: 12px;
padding: 48px;
max-width: 500px;
width: 100%;
text-align: center;
animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 2px solid var(--teal-mid);
box-shadow: 0 32px 64px rgba(15, 110, 86, 0.3);
border: 2px solid var(--amber-mid);
box-shadow: 0 32px 64px rgba(186, 117, 23, 0.3);
position: relative;
overflow: hidden;
}
@@ -177,7 +177,7 @@
font-family: 'Syne', sans-serif;
font-size: 42px;
font-weight: 800;
color: var(--teal);
color: var(--amber);
margin: 32px 0 12px;
position: relative;
z-index: 1;
@@ -186,7 +186,7 @@
.modal-content .score-display {
font-size: 64px;
font-weight: 800;
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -203,10 +203,10 @@
}
.stats-summary .stat {
background: var(--teal-light);
background: var(--amber-light);
padding: 12px;
border-radius: 8px;
border: 1px solid var(--teal-mid);
border: 1px solid var(--amber-mid);
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@@ -217,7 +217,7 @@
.stats-summary .stat-value {
font-weight: 700;
color: var(--teal-dark);
color: var(--amber-dark);
font-size: 16px;
font-family: 'Syne', sans-serif;
}
@@ -308,14 +308,14 @@
border-radius: 12px;
padding: 40px;
text-align: center;
border: 2px solid var(--teal-mid);
border: 2px solid var(--amber-mid);
animation: slideUp 0.4s ease-out;
}
.pause-content h2 {
font-family: 'Syne', sans-serif;
font-size: 32px;
color: var(--teal);
color: var(--amber);
margin-bottom: 24px;
}
@@ -323,7 +323,7 @@
font-size: 48px;
font-family: 'Syne', sans-serif;
font-weight: 800;
color: var(--teal-dark);
color: var(--amber-dark);
margin-bottom: 24px;
animation: timerTick 0.5s ease-out;
}