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>
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