Las mismas cinco paradas y el mismo ángulo que el botón dorado, recortadas
sobre las letras, y la banda de luz recorre el nombre al pasar el puntero igual
que recorre el botón. De 24 a 34 píxeles, que es el siguiente peldaño de la
escala y no un número a ojo.
El recorte va dentro de un `@supports` y el color plano se queda fuera: sin el
recorte, `color: transparent` dejaría la marca invisible, y eso es peor que
dejarla dorada y lisa. Es el mismo cuidado que ya tenía el botón, que guarda un
color de reserva por si el degradado no llega a pintar.
Y hace falta un segundo degradado, `--oro-escrito`. Sobre marino es
literalmente el mismo que el del botón —la peor de sus paradas da 5,4 de
contraste—, pero sobre papel no vale: medido contra el fondo claro, la parada
de brillo da **1,26**, la de superficie 2,05 y la de sombra 3,79, las tres por
debajo del mínimo de 4,5. Con el degradado del botón, el centro de las letras
desaparecía. En claro la banda va al revés: el punto más claro es el propio
`--c-accent` —5,29— y los extremos se oscurecen. Sigue pareciendo metal porque
lo que hace el efecto es la banda que cruza, no que llegue a brillar.
Es la regla que el proyecto ya tenía escrita y que yo no había aplicado: el
dorado hace dos trabajos, y de relleno tiene que ser claro mientras que escrito
tiene que ser hondo.
La prueba comprueba **cada parada** del degradado contra el fondo, en los dos
temas. A ojo, en la captura, el fallo se veía como «algo más pálido»; en
números, como ilegible.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Cada punto se dibujaba dentro del grupo de su pais, y en un SVG no hay
`z-index`: manda el orden en que esta escrito. El relleno del pais siguiente se
pintaba encima y el punto salia mordido por un lado. Ahora hay dos pasadas,
primero todas las tierras y luego todos los puntos, y el que enciende cada uno
se anota en `bajoPuntero` y `conFoco`, porque desde la capa de arriba ningun
selector alcanza al pais de debajo.
De paso, tres cosas que se veian mal y no daban error:
- El radio salia de dividir por el ancho de la caja, pero con `max-height` el
dibujo se ajusta al alto y en una ventana baja America se pintaba a 0,57 en
vez de a 0,70. El punto de Mexico media doce pixeles y el de España quince.
Ahora la escala sale del lado que primero se queda corto.
- De España ya no se dibujan las islas: Canarias caia fuera del recuadro y las
Baleares eran cuatro pixeles sueltos al este.
- Un solo verde para todo pais con generos. El segundo tono servia para separar
la cuna de lo adoptado y lo unico que conseguia era que España, que solo
adopto el bolero, saliera de otro color que el resto. Esa diferencia se
cuenta en la lista de al lado.
La Peninsula, cuarenta pixeles a la izquierda; en movil no, que ahi su columna
mide noventa y se metia encima de America.
`e2e/mapa.e2e.ts` fija las cuatro: orden de pintado, tamaño del punto, color
unico y España sin islas. Ninguna daba error, el mapa salia igual, solo que
mal.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Era proporcional al encuadre, y eso no basta: los dos mapas se dibujan a
anchos distintos —América ocupa una columna y la Península menos de la
mitad—, así que el mismo porcentaje daba un punto la mitad de grande en
España. Ahora se mide el ancho de cada lienzo en pantalla y se convierte:
catorce píxeles de diámetro en los dos, comprobado midiéndolos y no a
ojo.
Y «adoptado» pasa a ser el mismo tono que «cuna», solo que más flojo.
Antes era un verde claro que no se parecía a nada del otro mapa, así que
España parecía pintada de otro color en vez de con menos intensidad del
mismo.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Cuatro cosas que estaban mal y no vi por mirar las capturas de pasada:
- **No estaba centrado.** Para hacerle sitio a la Península había
ensanchado el lienzo de América por la derecha, y eso descentraba el
mapa en su caja. Ahora son dos columnas de verdad: cada mapa ocupa lo
suyo, el hueco entre ellos es el Atlántico y el conjunto se centra
solo.
- **Dos reglas `.mapa`**, y la vieja pisaba a la nueva: por eso la
Península salía a media altura en vez de al noreste, que es donde está.
- **Poco contraste en oscuro.** Los tres niveles —sin datos, adoptado,
cuna— se calibran ahora con distancia de luminosidad real, y el que no
tiene géneros deja de ser el color del fondo.
- **El punto es dorado**, con el mismo degradado de cinco paradas que los
botones: es el color de lo que se pulsa, y marca de un vistazo dónde
hay ficha que abrir.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
España y Portugal estaban fuera porque lo hice sobre un mapa de las
Américas y lo di por bueno con una nota. Iberoamérica es también la
Península, y España está en los datos: el bolero se adoptó ahí. El origen
pasa a ser el mapa del mundo de Wikimedia, en dominio público.
Cuatro cosas se rompieron por el camino y se ven todas en una captura:
- El mundial está en coordenadas **relativas**, donde los números son
desplazamientos y no posiciones. Medirlos como si lo fueran daba un
encuadre de cuarenta mil por cincuenta y ocho mil unidades.
- `d="…"` encajaba dentro de `id="Mexico_mainland"`, así que el trazado
que se extraía era el nombre del país. Salía un mapa vacío sin que nada
fallara.
- Al pegar trazados relativos, el `m` de cada uno se sumaba al final del
anterior. Ahora el primer salto de cada trazado es absoluto.
- El `clip-path` se aplica **después** del `transform` del elemento, así
que el recorte se movía con el mapa y el recuadro salía vacío.
La Península va en su propio lienzo, sobre el Atlántico norte: como
recuadro dentro del mapa acababa encima de Venezuela, y encima de la
lista de países no pintaba nada.
Y al lado, la lista de los veintidós con España primero y el resto
alfabético, con cuántos géneros nacieron en cada uno y cuántos adoptó.
Colores: el dorado mezclado con el fondo daba un marrón sucio. Entra
`--c-dato` en la paleta, un verdemar de la misma familia que el marino,
con dos intensidades para nacido y adoptado; el país elegido va en el
color del texto, que es el único contraste que se distingue de los dos
verdes en los dos temas. El radio del punto se mide contra el ancho de su
lienzo: fijo, en la Península salía del tamaño de Castilla.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Lo que se pidió: «cada vez que aparezca un término del glosario en el
texto, estará marcado para visualizarse con un popup con la explicación».
Veintinueve términos con acepciones numeradas —«clave» es el patrón
rítmico y el instrumento de percusión, y con una sola definición una de
las dos sería falsa—, más las formas con las que cada palabra aparece de
verdad: plurales, femeninos, con tilde y sin ella.
El marcado va sobre el HTML ya compuesto y no sobre el Markdown: antes
habría que esquivar la sintaxis, y un término dentro de un enlace o de un
bloque de código es justo donde un reemplazo de texto se equivoca en
silencio. Se marca una vez por término y por apartado, no en cada
aparición: nueve «compás» subrayados no hay quien los lea.
La pieza tiene más casos raros que cualquier otra del sitio y ninguno se
ve mirando la página —el fallo es que un globo no salga, y nadie echa en
falta lo que no sabe que existía—, así que va separada de la base y con
doce pruebas. Dos las escribí creyendo que ya pasaban:
- Marcaba «sinalefas» del final del párrafo en vez de la «sinalefa» de la
primera línea, porque probaba forma por forma en orden de longitud.
- Con las formas sin ordenar marcaba «rima» y no «rima asonante». Salía
bien solo porque la consulta las devolvía ordenadas; ahora el desempate
está en la función, que no puede depender de cómo se la llame.
El globo es un botón y no un `title`: un tooltip nativo no se abre con
teclado y en un móvil no existe. Se cierra con Escape devolviendo el
foco, y se coloca debajo del término o encima si no cabe, porque tapar lo
que se acaba de pulsar es lo peor que podría hacer.
El glosario entero tiene además su página, donde sí cabe la ampliación
que en un globo taparía el texto.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Eran dos cajas con un hueco entre ellas: el campo de búsqueda por un
lado y el conmutador de vista por otro, cada uno con su canto. Buscar y
elegir cómo se ve son el mismo gesto —acotar lo que hay en pantalla— y
separados parecían dos controles sin relación. Ahora el borde es de la
barra y dentro no hay más línea que la que separa lo que se escribe de
lo que se pulsa; el foco lo acusa la pieza entera.
Y el activo llevaba un dorado plano al lado de un botón dorado de
verdad, así que se notaba que no era el mismo. El aspecto sale de
`.btn--primary` a una clase `.oro` que comparten los dos: degradado,
filo de luz arriba y el barrido al pasar el puntero. Copiarlo habría
sido garantizar que un día uno de los dos se quedara atrás.
Dos cosas que aparecieron al montarlo:
- Svelte añade su clase de ámbito a todo lo que escribe en el
componente, así que un `.vista` de la página le gana por especificidad
al `.oro` general y el botón activo se quedaba con la letra gris
encima del oro. Va con `:not(.oro)`.
- En columna, `flex-basis` mide el alto: las doce rem que dan ancho al
campo lo convertían, apilado en un móvil, en un cajón de casi
doscientos píxeles.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
El color forma parte de lo que cuenta el sitio, y seguir a
`prefers-color-scheme` hacía que media parte de las visitas viera una
versión que no es la de la marca —un portátil configurado en claro no
tiene nada que decir sobre el aspecto de un catálogo de canciones—. Al
revés que en una herramienta de trabajo, aquí nadie va a pasar ocho horas
seguidas leyendo.
El claro sigue entero y a un clic, y la elección se recuerda. Lo que se
deja de hacer es decidirlo por nadie.
La prueba de contraste emulaba el esquema del sistema, así que con este
cambio habría pasado a comprobar dos veces lo mismo sin que nadie lo
notara: ahora pone `data-tema` a mano. Y la medida de claridad convierte
el `oklch()` pintándolo en un lienzo, porque desmontar la cadena a mano
daba NaN.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
El ancho útil vuelve a 74rem (1184px). Se había subido a 88rem para
aprovechar los monitores anchos y salió al revés: la prosa tiene una
medida de lectura y no crece con el contenedor, así que lo único que
creció fue el hueco a su derecha.
Un vacío al lado de un texto no se tapa estirando el texto —probado: 129
caracteres por línea, ilegible— sino poniendo algo al lado:
- Los textos legales van a tres columnas: los otros documentos, el que se
lee y sus apartados. El índice de apartados sale del Markdown en bruto
y las anclas las pone un plugin al compilarlo, así que hay pruebas de
que las dos formas de calcularlas siguen coincidiendo.
- El índice legal pasa de lista de renglones a rejilla de tarjetas, como
el taller y los estilos; era el único listado que no se veía como los
demás.
- La bio lleva al lado lo que hay publicado —temas, discos y estilos, con
sus enlaces—, sacado del catálogo y no escrito a mano, para que no se
contradiga sola el día que se suba una canción.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Cinco páginas legales en /legal, enlazadas desde el pie de todas las páginas:
información legal, condiciones de uso, privacidad, cookies y condiciones de
venta. Son borradores con los datos del titular marcados entre corchetes y un
aviso de que hace falta revisión de un abogado antes de vender: cubren lo que
pide la ley española, no son un documento validado.
La política de cookies y la de privacidad están escritas mirando el código, no
copiadas de una plantilla: dos cookies, las dos necesarias, y dos terceros
—Stripe y Resend— que reciben lo imprescindible.
Y eran tres, porque las tipografías venían de Google: cada visita mandaba la IP
del visitante a un tercero sin pedirlo y sin que aportara nada. Ahora se sirven
desde el propio dominio. Cargar la web ya no contacta con ningún dominio ajeno,
y hay una prueba que lo comprueba.
Aparte: el símbolo de marca registrada en el aviso de derechos, los botones de
reproducir de las tarjetas pasan de 48 a 36 píxeles —eran casi una quinta parte
de la portada, y cambiaban de proporción según la tarjeta— y el de ver el
carrito solo aparece cuando hay algo dentro.
De paso se arregla un fallo de tipos que estaba latente: `resolve()` tiene una
sobrecarga por ruta y no acepta una unión, así que la navegación dejaba de
compilar en cuanto se añadían rutas. Ahora se resuelve en `site.ts`, una a una.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
El texto del botón dorado se aclaraba al pasar el puntero y quedaba en 1,67 de
contraste sobre el oro. La causa no era el color del botón: `.btn:hover` pone
`color: inherit` —para que la regla general de los enlaces no tiña de dorado los
secundarios— y le gana por especificidad. Ahora el dorado repite su color ahí.
De paso, el dorado se parte en dos tokens porque hacía dos trabajos
incompatibles: de relleno tiene que ser claro para que encima se lea el marino
—7,6 de contraste en el tema claro— y escrito tiene que ser hondo para leerse
sobre el fondo —5,3—. Con un solo valor, el tema claro se quedaba en 4,4, por
debajo del mínimo. Y encima del oro va marino, no blanco, en los dos temas.
Los botones tenían tres tamaños distintos: el dorado a 16px con relleno 8/16 y
el de al lado a 14px con 12/24. Dos botones juntos con distinta letra se ven
como un descuido. Ahora hay una sola escala, y los 15px son los del menú.
El botón de ver el carrito solo aparece cuando hay algo dentro, con la cuenta:
uno que lleva a una página vacía gasta el sitio de una llamada a la acción para
decir que no hay nada.
Tres pruebas nuevas lo fijan, incluida la del contraste con el puntero encima,
que es donde estaba el fallo y donde una captura en reposo no lo enseña.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Los botones dejan de ser cápsulas y las tarjetas pierden la mitad del canto. De
paso se ordena el sistema: había tres radios sueltos y una píldora de 999px
repetida en quince archivos, y quedan dos —uno para lo que se pulsa, otro para
las superficies—. Los botones de icono suelto siguen redondos, que ahí sí tiene
sentido.
Las fichas del taller no usaban la tarjeta compartida: tenían su propio borde,
su propio canto y su propio hover, así que se veían de otra familia que las de
música. Ahora usan `.tarjeta`, con el mismo reflejo bajo el puntero y el mismo
subrayado.
Y la portada arranca en el borde de la ventana, con la cabecera flotando encima.
Para eso la cabecera pasa a medir su propio alto y publicarlo: estaba escrito a
mano en 4,75rem cuando mide 68px, y todo lo que dependía de ese número —el salto
a un ancla, las barras laterales pegajosas— quedaba desplazado.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
El botón dorado se quedaba en un rectángulo oscuro con el borde de oro al pasar
el puntero. La causa: `.btn:hover` usaba el atajo `background`, que reinicia
también `background-image` y se llevaba el degradado por delante. Las reglas
base pasan a `background-color`, que es la longhand que no pisa lo que no le
toca.
De comprobarlo salió que no había ningún `a:hover` global: cualquier enlace sin
regla propia —el del feed, los del pie— no daba ninguna señal de ser pulsable.
Ahora todos responden con el dorado, que es el color de lo accionable aquí.
Tampoco la tenía el conmutador de vista de la página de música.
El botón secundario acusa el puntero con el fondo y el canto, no tiñendo el
texto de dorado: sería una señal doble y competiría con el botón dorado que
suele tener al lado.
Seis pruebas nuevas cubren la respuesta al puntero de cada tipo de control. Es
lo que faltaba: un estado de hover roto no se ve en una captura en reposo, y así
fue como se coló.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
El pack pasa de cinco a diez canciones por el mismo 1,50 €: diez canciones por
lo que cuesta un café. Es la propuesta, así que el número y el importe se leen
juntos en todas partes.
Las pruebas de la tienda estaban escritas con el cinco metido a mano y hubo que
reescribirlas enteras. Ahora dicen la regla en términos del propio tamaño del
pack, y el helper de las pruebas de extremo a extremo añade lo que haya a la
venta hasta llenarlo en vez de nombrar los temas uno a uno: así cambiar el
tamaño otra vez no obliga a tocar nada.
Las dos láminas de llamada estrenan foto propia con su velo, más cubriente que
el de la textura: sobre una imagen clara el texto blanco no se lee.
Y el dorado deja de ser plano en los botones. Un metal refleja, y lo que lo hace
parecer metal es la banda de luz que lo cruza; el fondo se pinta más alto que el
botón para que al acercar el puntero la luz recorra la pieza en vez de
limitarse a aclararla. El acento sube un punto de croma y baja uno de claridad,
que es lo que lo separa de un amarillo de rotulador.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Tres piezas estaban copiadas en varios sitios y ahora se escriben una vez: el
fondo a sangre de la portada, las migas de pan y la pastilla de una etiqueta.
El fondo ya había divergido entre la cabecera y las láminas de llamada: el
degradado era distinto por descuido y no por decisión, que es lo que pasa con el
marcado duplicado.
Las migas pasan a ser una lista ordenada, que es su marcado correcto: un lector
de pantalla anuncia cuántos escalones hay y en cuál se va, y el último deja de
ser un enlace a donde ya estás.
Tres cosas salieron de hacerlo, ninguna cosmética:
- Con el texto como clave del bucle, un disco y un tema que se llaman igual
—«Como si nada» es las dos cosas— daban claves duplicadas y tumbaban la ficha
al hidratar. El SSR salía bien, así que solo se veía en el navegador.
- Al compartir el fondo, las tres láminas montaban el clip de vídeo. En tema
claro eso eran tres copias del mismo vídeo en la portada. Ahora lo pide solo
la cabecera.
- La lista de temas de un disco no tenía nombre, así que no se distinguía de
ninguna otra lista de la página. Ahora se llama «Temas».
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
La palabra se va del proyecto entero, interfaz e identificadores. Venía del
encargo inicial pero no es la del oficio y se colaba en la interfaz: lo que hay
son estilos, discos y temas. Lo que agrupa un estilo con su obra pasa a ser
`EstiloConObra`, y el componente que lo pinta, `BloqueDeEstilo`.
La portada cuenta el catálogo en tres pasos: el estilo principal a fila
completa, sus discos debajo, y el resto en una rejilla donde cada tarjeta dice
cuánto hay y de qué se habla. Las etiquetas de un estilo no se declaran: salen
de sus temas, así que no hay dos sitios que mantener.
La página de un estilo estrena su propio `h1` —antes heredaba un `h2` del
listado, y se quedaba sin encabezado de nivel uno— y pierde el botón de
reproducir suelto en la cabecera, que no decía qué iba a sonar. Los demás
estilos la acompañan en una barra lateral que ahora vive en el layout de la
sección, así que la llevan también la portada de música y cualquier página que
se añada.
Las tarjetas se mueven de otra manera: reflejo que nace bajo el puntero, borde
dorado, portada que recupera el color, subrayado que crece y respuesta al
pulsar. Nada usa la curva por defecto.
Dos rarezas del minificador de CSS, ambas comprobadas en el build y ambas
dejaban efectos muertos: junta las funciones de un filtro sin el espacio que
las separa, y borra `backdrop-filter` sin prefijo si se declara también la
versión `-webkit-`.
Y la canción real estrena su vídeo de YouTube.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Sitio del letrista y compositor, con SvelteKit 2 y Svelte 5.
El catálogo es contenido, no base de datos: estilos, álbumes, canciones y
capítulos son Markdown en `src/content/`, validados al compilar y compilados
dentro del bundle, así que recorrer la música no hace ni una consulta. La base
de datos guarda solo lo que generan las personas: cuentas, carritos, pedidos,
compras, valoraciones y favoritos.
Lo que hay:
- Música agrupada por estilos, con página propia para cada estilo, álbum y
tema, buscador y tabla ordenable.
- Reproductor persistente que sobrevive a la navegación. Suena un fragmento;
el archivo completo solo se obtiene comprando.
- Taller de letras: los principios del oficio y una ficha de creación por
estilo hispanoamericano.
- Blog con feed RSS, y etiquetas que cruzan blog y catálogo.
- Tienda con cuentas por código de correo, carrito, Stripe y descargas
protegidas.
- Panel de contenido en `/admin` que escribe los mismos Markdown.
- Tema oscuro de marca y su inversión clara, aplicado antes de pintar.
Lo que falta y no es código: las claves de Stripe y de correo, el tratamiento
del IVA, las páginas de condiciones y privacidad, y el material real. Las
canciones de ejemplo son inventadas y están para sustituirse; el audio son
marcadores salvo un tema.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
dev