ratio maj3

2026-01-14 00:28:49 +04:00
parent 4fd1d4a6e5
commit 6b0f4dde54
2 changed files with 33 additions and 2 deletions
--- a/src/components/ui/ParchmentCard.astro
+++ b/src/components/ui/ParchmentCard.astro
@@ -15,6 +15,10 @@
 		padding: 2rem;
 		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
 		backdrop-filter: blur(4px); /* Effet de verre dépoli pour voir la texture du fond */
-		margin-bottom: 2rem;
+		margin: 0 auto 2rem; /* Centre la carte horizontalement */
+
+		/* Contraint la largeur pour une meilleure lisibilité (environ 75 caractères) */
+		width: 100%;
+		max-width: 70ch;
 	}
 </style>
--- a/src/layouts/GameLayout.astro
+++ b/src/layouts/GameLayout.astro
@@ -14,7 +14,7 @@ const { title } = Astro.props;
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="description" content="Clone de AFK Journey avec Astro et Three.js" />
-		<meta name="viewport" content="width=device-width" initial-scale=0.75 />
+		<meta name="viewport" content="width=device-width" initial-scale=1 />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
@@ -249,4 +249,31 @@ const { title } = Astro.props;
 	::view-transition-old(root) {
 		animation: 0.2s ease-out 0s 1 normal both running fade-out;
 	}
+
+	/* --- Ajustements pour les écrans mobiles --- */
+	@media (max-width: 768px) {
+		body {
+			padding: 1.5rem 1rem 100px 1rem; /* Réduction du padding latéral */
+		}
+
+		h1 {
+			font-size: 2rem; /* Réduction de la taille des titres principaux */
+		}
+
+		.parchment-card {
+			padding: 1.5rem; /* Moins de padding dans les cartes */
+		}
+
+		.gold-button {
+			padding: 1rem; /* Boutons moins hauts */
+		}
+
+		.gold-button .title {
+			font-size: 1.2rem; /* Titres des boutons plus petits */
+		}
+
+		.card-grid {
+			gap: 1rem; /* Moins d'espace entre les cartes */
+		}
+	}
 </style>