diff --git a/css/estilos.css b/css/estilos.css index 5954b6b..67a6bed 100644 --- a/css/estilos.css +++ b/css/estilos.css @@ -149,17 +149,75 @@ body { max-width: 600px; /* Para que no se estire demasiado en PC */ border-radius: 15px; box-shadow: 0 4px 15px var(--sombra); - border: none; /* Quitamos el borde oscuro para que sea más elegante */ + border: 2px solid var(--color-acento); /* Quitamos el borde oscuro para que sea más elegante */ text-align: center; } -.bloque h3 { - font-family: 'EB Garamond', serif; - color: var(--color-primario); - font-size: 1.8rem; - margin-top: 0; +/* --- AJUSTES PARA BLOQUES CON IMAGEN 4:5 --- */ + +.bloque-fondo { + /* Quitamos el padding del contenedor para que la capa oscura llegue a los bordes */ + padding: 0 !important; + background-size: cover; + background-position: center top; + background-repeat: no-repeat; + position: relative; + color: var(--blanco-puro); + border-radius: 15px; + overflow: hidden; + + /* Proporción 4:5 - Ajustamos altura mínima para lucir la imagen */ + min-height: 450px; + display: flex; + flex-direction: column; + justify-content: flex-end; /* Texto abajo para no tapar caras/arte arriba */ + max-width: 600px; + margin: 2rem auto; + border: 2px solid var(--color-acento); } +.capa-oscura { + /* Graduado: de negro muy sólido abajo a transparente arriba */ + background: linear-gradient(to top, + rgba(0,0,0,0.9) 0%, + rgba(0,0,0,0.4) 50%, + transparent 100%); + padding: 2.5rem 1.5rem 1.5rem 1.5rem; + width: 100%; + box-sizing: border-box; +} + +.bloque-fondo h3 { + font-family: 'EB Garamond', serif; + /* Reducido de 5rem a 2.5rem para que sea elegante y no tape la imagen */ + font-size: 2.5rem !important; + font-weight: 600; + margin: 0 0 0.5rem 0; + color: var(--blanco-puro); + text-shadow: 2px 2px 8px rgba(0,0,0,0.8); +} + +.bloque-fondo p { + font-family: 'Nunito', sans-serif; + font-size: 1.1rem; + margin-bottom: 1.5rem; + text-shadow: 1px 1px 4px rgba(0,0,0,0.8); +} + +/* Ajuste del botón sobre fondo de imagen */ +.bloque-fondo .boton { + background-color: var(--color-acento); /* Dorado para que resalte más */ + color: var(--color-primario); + border: none; +} + +.bloque-fondo .boton:hover { + background-color: var(--blanco-puro); + color: var(--color-primario); +} + +/* --- SALMO DEL DÍA --- */ + .salmo { font-family: 'EB Garamond', serif; font-size: 1.6rem; diff --git a/img/ic_flecha_abajo.xml b/img/ic_flecha_abajo.xml deleted file mode 100644 index 0da383f..0000000 --- a/img/ic_flecha_abajo.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/img/ic_flecha_arriba.xml b/img/ic_flecha_arriba.xml deleted file mode 100644 index 2071f63..0000000 --- a/img/ic_flecha_arriba.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - \ No newline at end of file diff --git a/img/ic_launcher_background.xml b/img/ic_launcher_background.xml deleted file mode 100644 index 07d5da9..0000000 --- a/img/ic_launcher_background.xml +++ /dev/null @@ -1,170 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/img/ic_launcher_foreground.xml b/img/ic_launcher_foreground.xml deleted file mode 100644 index 2b068d1..0000000 --- a/img/ic_launcher_foreground.xml +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/img/oraciones.jpg b/img/oraciones.jpg new file mode 100644 index 0000000..ba1862a Binary files /dev/null and b/img/oraciones.jpg differ diff --git a/img/rosario.jpg b/img/rosario.jpg new file mode 100644 index 0000000..c10dd54 Binary files /dev/null and b/img/rosario.jpg differ diff --git a/img/rosario_general.png b/img/rosario_general.png deleted file mode 100644 index 1dedd7f..0000000 Binary files a/img/rosario_general.png and /dev/null differ diff --git a/index.html b/index.html index d84dcf4..a344766 100644 --- a/index.html +++ b/index.html @@ -75,18 +75,20 @@ Escribir en mi diario --> - -
-

Rosario

-

Hoy rezamos los Misterios X

- Rezar el Rosario +
+
+

Rosario

+

Misterios Gozosos

+ Rezar ahora +
- -
-

Oraciones Básicas

-

Padre Nuestro, Ave María, Gloria

- Rezar las Oraciones Básicas +
+
+

Oraciones

+

Padre Nuestro, Ave María, Gloria

+ Ver Oraciones +
diff --git a/js/codigo.js b/js/codigo.js index afb0882..522ef67 100644 --- a/js/codigo.js +++ b/js/codigo.js @@ -224,7 +224,7 @@ function visualizarRosario() { const misterioHoy = MISTERIOS_DATA[diaSemana]; const nombreMistElem = document.getElementById('nombre_misterio'); if (nombreMistElem) { - nombreMistElem.textContent = `Hoy rezamos los misterios ${misterioHoy.nombre.toUpperCase()}`; + nombreMistElem.textContent = `MISTERIOS ${misterioHoy.nombre.toUpperCase()}`; } }