fermdez/Juegos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Mejora en hoja de estilos

Browse Source
This commit is contained in:
Fernando Méndez
2025-08-22 12:24:04 +02:00
parent b7a9b4ada9
commit e2f1ba810f
1 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
simon-dice/styles.css
View File

@@ -5,7 +5,6 @@ html {
*, *:before, *:after { *, *:before, *:after {
box-sizing: inherit; box-sizing: inherit;
} }
body { body {
background: #e1f5fe; background: #e1f5fe;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@@ -13,38 +12,36 @@ body {
color: #222; color: #222;
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
line-height: 1.5;
} }
/* Encabezado */
h1 { h1 {
margin-top: 2rem; margin-top: 2rem;
color: #01579b; color: #01579b;
font-size: clamp(1.3rem, 5vw, 2.5rem); font-size: clamp(2rem, 6vw, 3rem); /* más grande en mobile */
} }
/* Panel de botones Simon */
#game-container { #game-container {
margin: 2.2rem auto 1rem auto; margin: 1.5rem auto 1rem auto;
width: 100%; width: 100%;
max-width: 340px; max-width: 340px; /* se aumenta en móvil */
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
gap: 1.2em; gap: 1.2em;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0.8em; padding: 1em;
border-radius: 1.2em; border-radius: 1.2em;
background: #ffffffdd; background: #ffffffdd;
box-shadow: 0 2px 14px #bbbe; box-shadow: 0 2px 14px #bbbe;
aspect-ratio: 1 / 1; /* el panel siempre es cuadrado */ aspect-ratio: 1 / 1;
} }
/* Botón Simon */
.color-btn { .color-btn {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 1.1em; border-radius: 1.2em;
box-shadow: 0 2px 8px #bbb; box-shadow: 0 2px 8px #bbb;
cursor: pointer; cursor: pointer;
transition: filter 0.2s, border 0.2s; transition: filter 0.2s, border 0.2s;
@@ -53,7 +50,6 @@ h1 {
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
/* background colors asignados por id */
} }
#green { background: #43a047;} #green { background: #43a047;}
#red { background: #e53935;} #red { background: #e53935;}
@@ -64,9 +60,8 @@ h1 {
border: 3px solid #333; border: 3px solid #333;
} }
/* Estado y botón inicio */
#status { #status {
font-size: clamp(1em, 2vw, 1.15em); font-size: clamp(1.1em, 2.5vw, 1.3em);
min-height: 2em; min-height: 2em;
margin-bottom: 1em; margin-bottom: 1em;
color: #01579b; color: #01579b;
@@ -75,62 +70,67 @@ h1 {
#start-btn { #start-btn {
background: #01579b; background: #01579b;
color: #fff; color: #fff;
font-size: clamp(1em, 2vw, 1.13em); font-size: clamp(1.2em, 2.5vw, 1.5em);
border: none; border: none;
border-radius: 0.6em; border-radius: 0.8em;
padding: 0.5em 2em; padding: 0.7em 2.5em;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
box-shadow: 0 2px 8px #01579b33; box-shadow: 0 2px 8px #01579b33;
margin-bottom: 1.4em; margin-bottom: 2em;
}
#start-btn:hover,
#start-btn:active {
background: #263238;
} }
/* ==== Pantallas pequeñas/móviles ==== */ /* ==== Pantallas pequeñas/móviles ==== */
@media (max-width: 600px) { @media (max-width: 728px) {
html {
font-size: 20px;
}
h1 { h1 {
margin-top: 6vw; margin-top: 6vw;
font-size: clamp(1.1em, 7vw, 2em); font-size: clamp(2em, 9vw, 2.6em); /* mucho más grande */
margin-bottom: 4vw;
} }
#game-container { #game-container {
max-width: 96vw; max-width: 92vw; /* que el panel ocupe casi toda la pantalla */
gap: 6vw; gap: 7vw; /* separa más los botones */
border-radius: 6vw; border-radius: 7vw;
padding: 2vw; padding: 3vw;
margin-top: 5vw; /* menos espacio arriba */
margin-bottom: 2vw;
} }
.color-btn { .color-btn {
border-radius: 5vw; border-radius: 7vw;
box-shadow: 0 2px 6px #bbb; box-shadow: 0 2px 12px #bbb;
min-width: 0;
min-height: 0;
} }
#start-btn { #start-btn {
font-size: clamp(1em, 8vw, 1.4em); font-size: clamp(1em, 7vw, 2em);
padding: 1em 13vw; padding: 1.2em 10vw; /* botón grande, fácil de clicar */
border-radius: 5vw; border-radius: 5vw;
margin-bottom: 6vw; margin-bottom: 4vw;
} }
#status { #status {
font-size: clamp(1em, 7vw, 1.3em); font-size: clamp(1em, 6vw, 1.7em);
margin-bottom: 5vw; margin-bottom: 3vw;
} }
} }
/* ==== Pantallas muy pequeñas ==== */ /* ==== Pantallas muy pequeñas ==== */
@media (max-width: 350px) { @media (max-width: 350px) {
html { font-size: 17px; }
#game-container { #game-container {
max-width: 93vw; max-width: 96vw;
gap: 3vw; gap: 6vw;
padding: 1vw; padding: 2vw;
border-radius: 10vw; border-radius: 9vw;
} }
.color-btn { .color-btn {
border-radius: 8vw; border-radius: 8vw;
} }
#start-btn { #start-btn {
padding: 0.8em 3vw; padding: 1em 4vw;
border-radius: 8vw; border-radius: 8vw;
font-size: clamp(0.9em, 13vw, 1.1em); font-size: clamp(1em, 10vw, 1.5em);
} }
} }