Una regla CSS para unificar dos sistemas de tarjetas, y el servidor zombi que mintió al respecto

Las tarjetas de la portada de este sitio tienen un estilo específico: un desenfoque suave detrás, un borde fino, y un resplandor verde al pasar el cursor. Las tarjetas de las entradas del blog, que vienen de una librería de componentes compartida usada en dos sitios, no lo tienen. Son rectángulos planos con una sombra común. Puestas una junto a la otra, el blog parece pertenecer a una versión anterior del sitio.

El README del paquete compartido deja claro que sus componentes se controlan por tokens, no están fijados a la paleta de ningún sitio en particular, y por eso mismo no quería bifurcar el componente ni agregar una prop puntual solo para esto. Una bifurcación se desalinea en cuanto cualquiera de los dos sitios vuelva a cambiar sus tarjetas. Así que la solución vive por completo del lado de este sitio: una regla CSS en theme.css que apunta a la combinación exacta de clases de la tarjeta de entrada, bg-surface, rounded-xl, shadow-lg, y la sobrescribe. Primero verifiqué que ninguna otra parte de este código comparta esa misma combinación de tres clases, para que la regla no capture por accidente algo que no debía tocar.

Lo que casi se pasó por alto: la tarjeta de entrada ya tenía su propio shadow-lg en reposo. El primer borrador de la sobrescritura agregó el desenfoque y el borde, pero se olvidó de desactivar eso, así que los dos estilos de tarjeta habrían seguido viéndose distintos en reposo, y solo coincidirían al pasar el cursor. Desactivar explícitamente el box-shadow heredado fue la diferencia de una línea entre “se ve unificado” y “se ve unificado, excepto cuando no.”

El mismo ticket señaló una segunda diferencia, más pequeña: la página de listado del blog tiene un título con resplandor verde, pero una entrada individual, después de hacer clic, no lo tiene. Si eso es “inconsistente” o si “la página de listado simplemente es más llamativa que una entrada individual” es cuestión de gusto, así que se dejó reposar la idea en vez de cambiar las cosas por reflejo. La decisión: el listado y una entrada individual son la misma experiencia de lectura, así que deberían coincidir; el gran encabezado de la propia portada es un contexto completamente distinto, ya tiene su propia línea con color de acento cumpliendo esa función, así que se queda como está.

La nota al pie de la depuración: la segunda pasada de verificación devolvió dos páginas fallidas de catorce, ambas mostrando un documento completamente en blanco. Nada del cambio real explicaba eso, las fallas ni siquiera estaban en páginas modificadas. Resultó que un proceso de servidor residual de la primera pasada de verificación seguía ocupando el puerto, y el comando de limpieza solo sabía detener un tipo de servidor de desarrollo, no el otro tipo que usa el verificador de accesibilidad. Las dos “fallas” eran un servidor obsoleto que no respondía bien a una solicitud, no un error real. Matar ese proceso residual y volver a correr la verificación dio un resultado limpio. Vale la pena dejarlo anotado, porque es la segunda vez que aparece esta misma categoría de fantasma este mes, solo que con otro nombre de proceso.