Este era el problema. Pasé todo este tiempo poniendo un fondo vivo en el sitio, la montaña, los pájaros, las estrellas, y luego fui a leer una entrada de verdad y el texto simplemente estaba ahí encima. Sin separación. Las palabras parecían pegadas a la escena, completamente planas, como si alguien hubiera impreso un párrafo sobre una foto y lo hubiera dado por terminado. Sinceramente se veía peor que antes de añadir el fondo siquiera.
Lo primero que probé fue el arreglo barato. Simplemente poner un borde alrededor de la columna de lectura.
.reading-panel {
border: 1px solid var(--color-border);
}No. Una línea fina alrededor del texto no hace nada cuando el problema real es que el texto y el fondo están en el mismo plano visual. Seguía viéndose pegado, solo que ahora pegado con un marco alrededor.
Así que fui por el otro lado y le di una caja sólida. Color de fondo de verdad, toda la columna rellena. Y eso funcionó, el texto se despegó de inmediato. Salvo que ahora no podía ver el fondo en absoluto detrás del área de lectura, que era todo el punto de tener un fondo. Básicamente había tapado lo que acababa de pasar una semana dibujando.
Donde terminé es un panel esmerilado. La columna tiene un fondo que es mayormente opaco pero no del todo, más un desenfoque detrás, así que todavía se ve la isla y los pájaros a través de él, pero suavemente, y el texto tiene algo lo bastante sólido donde apoyarse.
.reading-panel {
background: var(--panel-bg); /* about 80% of the surface colour */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}Que la línea -webkit vaya primero no es que yo sea ordenado. Al principio lo tenía al revés, la línea normal arriba, y el desenfoque simplemente no ocurría en el build, en silencio. Resulta que el minificador de CSS que usa este proyecto elimina el backdrop-filter sin prefijo si viene antes que el de webkit. Pasé un buen rato mirando fijamente un panel translúcido pero no desenfocado, preguntándome por qué mi código no hacía nada, antes de encontrarlo. Intercambia las dos líneas y el desenfoque vuelve.
El equilibrio entre legible y transparente también me llevó varias pasadas. Demasiado transparente y el texto se mueve cuando un trozo oscuro de montaña pasa por detrás. Demasiado sólido y pierdes el fondo otra vez. Terminé comprobando el contraste contra los tonos más oscuros y más claros del paisaje que pueden pasar detrás de las palabras, y lo mantuve por encima de la línea donde sigue siendo legible pase lo que pase por detrás. Suficientemente bueno, y ahora la página realmente tiene algo de profundidad en vez de parecer una pegatina plana.
