Textos legales, fuentes propias y ajustes de botones
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>
1 month ago
|
|
|
@import './fuentes.css';
|
|
|
|
|
@import './marca.css';
|
|
|
|
|
@import './tokens.css';
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* ---------------------------------------------------------------------------
|
|
|
|
|
* DIRECCIÓN VISUAL
|
|
|
|
|
* ---------------------------------------------------------------------------
|
|
|
|
|
* Los colores de marca: azul marino oscuro aterciopelado y dorado.
|
|
|
|
|
*
|
|
|
|
|
* El marino lleva croma de verdad (0,04) en lugar de ser un gris azulado: eso
|
|
|
|
|
* es lo que le da el aspecto de terciopelo en vez de el de pizarra. Todos los
|
|
|
|
|
* fondos comparten el mismo tono, así que la profundidad la marca la claridad,
|
|
|
|
|
* nunca un cambio de color.
|
|
|
|
|
*
|
|
|
|
|
* El dorado es el único acento y lo llevan las cosas accionables; nada más lo
|
|
|
|
|
* usa, que es lo que hace que se note.
|
|
|
|
|
*
|
|
|
|
|
* Se compromete con un solo modo, sin variante clara: la portada es un fondo a
|
|
|
|
|
* sangre con texto encima y esa composición no sobrevive a un fondo blanco sin
|
|
|
|
|
* rehacerla entera. `color-scheme: dark` avisa al navegador para que sus
|
|
|
|
|
* controles vayan a juego.
|
|
|
|
|
* ---------------------------------------------------------------------------
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
color-scheme: dark;
|
|
|
|
|
|
|
|
|
|
/* Marino, del más hondo al más cercano. Mismo tono, distinta claridad. */
|
|
|
|
|
|
|
|
|
|
/* Blancos apenas teñidos: por encima de 0,02 de croma dejarían de leerse
|
|
|
|
|
como blancos y competirían con el dorado. */
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* El oro. El plano de antes tiraba a amarillo; este baja de claridad y sube
|
|
|
|
|
* de croma, que es lo que separa un metal de un color de rotulador.
|
|
|
|
|
*/
|
|
|
|
|
/*
|
|
|
|
|
* El metal de la marca no cambia con el tema. Los acentos funcionales sí
|
|
|
|
|
* pueden adaptarse al fondo claro, pero el logotipo conserva estas tres
|
|
|
|
|
* tintas exactas en ambos modos.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
--c-accent: var(--c-marca-oro);
|
|
|
|
|
--c-form-action: oklch(0.8 0.095 230);
|
|
|
|
|
--c-form-action-hover: oklch(0.86 0.075 230);
|
|
|
|
|
--c-form-action-text: oklch(0.22 0.05 255);
|
|
|
|
|
--c-toggle-active: oklch(0.76 0.13 155);
|
|
|
|
|
--c-toggle-text: oklch(0.2 0.045 155);
|
|
|
|
|
--c-toggle-rail: var(--c-bg-raised);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
--c-accent-text: oklch(0.16 0.042 264);
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* El dorado como superficie va aparte del dorado como texto, porque no
|
|
|
|
|
* pueden ser el mismo valor: relleno necesita ser claro para que encima se
|
|
|
|
|
* lea el marino, y escrito necesita ser oscuro para leerse sobre el fondo.
|
|
|
|
|
* En el tema oscuro coinciden; en el claro no, y por eso existe la
|
|
|
|
|
* distinción.
|
|
|
|
|
*/
|
|
|
|
|
--c-accent-superficie: var(--c-marca-oro);
|
|
|
|
|
/* Los dos extremos del reflejo: la luz que lo cruza y la sombra del canto. */
|
|
|
|
|
--c-accent-brillo: var(--c-marca-oro-brillo);
|
|
|
|
|
--c-accent-sombra: var(--c-marca-oro-sombra);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
|
El mapa es de Iberoamérica: los veintidós, no veinte
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* El verdemar: el tercer color de la paleta, para datos.
|
|
|
|
|
*
|
|
|
|
|
* El mapa necesitaba dos intensidades de algo que no fuera el dorado, y
|
|
|
|
|
* mezclarlo con el fondo marino daba barro —literalmente un marrón sucio—.
|
|
|
|
|
* Este es de la misma familia que el marino, un paso hacia el verde, así que
|
|
|
|
|
* conviven sin pelearse; y deja el dorado para lo que se pulsa y lo que se
|
|
|
|
|
* elige, que es su trabajo en el resto del sitio.
|
|
|
|
|
*/
|
El mapa, revisado mirándolo en los dos temas
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>
1 month ago
|
|
|
--c-dato: oklch(0.74 0.09 198);
|
El punto del mapa ya no lo tapa el pais de al lado
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>
1 month ago
|
|
|
/* El mismo tono, un paso por debajo: «también se canta aquí», no otro dato. */
|
|
|
|
|
--c-dato-tenue: oklch(0.66 0.085 198);
|
El mapa, revisado mirándolo en los dos temas
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>
1 month ago
|
|
|
--c-dato-vacio: oklch(0.29 0.03 255);
|
El mapa es de Iberoamérica: los veintidós, no veinte
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>
1 month ago
|
|
|
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* Dos familias: una serif con carácter para los títulos y para la letra de
|
|
|
|
|
* las canciones —que es texto para leer despacio— y una sans de rejilla
|
|
|
|
|
* para interfaz, datos y navegación.
|
|
|
|
|
*/
|
|
|
|
|
--font-versos: var(--font-display);
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* El oro de una superficie no es un color plano: un metal refleja, y lo que
|
|
|
|
|
* lo hace parecer metal es la banda de luz que lo cruza. Cinco paradas —de
|
|
|
|
|
* la sombra del canto al brillo y otra vez a la sombra— bastan para
|
|
|
|
|
* sugerirlo sin que parezca un tubo de cromo.
|
|
|
|
|
*
|
|
|
|
|
* El fondo se pinta más alto que el elemento a propósito: así, al acercar el
|
|
|
|
|
* puntero, se desplaza y la luz recorre la pieza en vez de limitarse a
|
|
|
|
|
* aclararla. Es la diferencia entre algo que se ilumina y algo que gira.
|
|
|
|
|
*/
|
|
|
|
|
--gradiente-oro: linear-gradient(
|
|
|
|
|
166deg,
|
|
|
|
|
var(--c-accent-sombra) 0%,
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
var(--c-accent-superficie) 24%,
|
|
|
|
|
var(--c-accent-brillo) 46%,
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
var(--c-accent-superficie) 64%,
|
|
|
|
|
var(--c-accent-sombra) 100%
|
|
|
|
|
);
|
|
|
|
|
|
El nombre de la cabecera, en oro de verdad y más grande
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>
4 weeks ago
|
|
|
/*
|
|
|
|
|
* El metal propio del logotipo. Usa los colores fijos de marca en vez de los
|
|
|
|
|
* acentos funcionales del tema: cambiar el fondo no debe convertir el logo en
|
|
|
|
|
* otro dorado ni aplanar su banda de luz.
|
El nombre de la cabecera, en oro de verdad y más grande
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>
4 weeks ago
|
|
|
*/
|
|
|
|
|
--oro-escrito: linear-gradient(
|
|
|
|
|
166deg,
|
|
|
|
|
var(--c-marca-oro-sombra) 0%,
|
|
|
|
|
var(--c-marca-oro) 24%,
|
|
|
|
|
var(--c-marca-oro-brillo) 46%,
|
|
|
|
|
var(--c-marca-oro) 64%,
|
|
|
|
|
var(--c-marca-oro-sombra) 100%
|
|
|
|
|
);
|
El nombre de la cabecera, en oro de verdad y más grande
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>
4 weeks ago
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* El mismo metal, orientado de izquierda a derecha para controles lineales:
|
|
|
|
|
* barras de progreso, volumen y barras de desplazamiento. Usar los tres
|
|
|
|
|
* tonos fijos de la marca evita que estos controles parezcan amarillos o
|
|
|
|
|
* grises del navegador.
|
|
|
|
|
*/
|
|
|
|
|
--oro-control: linear-gradient(
|
|
|
|
|
90deg,
|
|
|
|
|
var(--c-marca-oro-sombra) 0%,
|
|
|
|
|
var(--c-marca-oro) 32%,
|
|
|
|
|
var(--c-marca-oro-brillo) 52%,
|
|
|
|
|
var(--c-marca-oro) 72%,
|
|
|
|
|
var(--c-marca-oro-sombra) 100%
|
|
|
|
|
);
|
|
|
|
|
--oro-control-pulgar: radial-gradient(
|
|
|
|
|
circle at 34% 28%,
|
|
|
|
|
var(--c-marca-oro-brillo) 0 12%,
|
|
|
|
|
var(--c-marca-oro) 46%,
|
|
|
|
|
var(--c-marca-oro-sombra) 100%
|
|
|
|
|
);
|
|
|
|
|
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* Los botones. Un solo tamaño y un solo relleno, porque antes convivían tres
|
|
|
|
|
* —el dorado a 16px con relleno 8/16, el de al lado a 14px con 12/24— y dos
|
|
|
|
|
* botones juntos con distinta letra se ven como un descuido.
|
|
|
|
|
*
|
|
|
|
|
* 15px es el mismo cuerpo del menú: lo pulsable se lee igual en todas
|
|
|
|
|
* partes.
|
|
|
|
|
*/
|
|
|
|
|
--boton-texto: 0.9375rem;
|
|
|
|
|
--boton-relleno: var(--sp-3) var(--sp-5);
|
|
|
|
|
/* La versión reducida, para las esquinas de una tarjeta o una fila. */
|
|
|
|
|
--boton-texto-corto: 0.8125rem;
|
|
|
|
|
--boton-relleno-corto: var(--sp-2) var(--sp-3);
|
|
|
|
|
/*
|
|
|
|
|
* El ancho útil: 1184px. Se probó a subirlo a 88rem (1408px) 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 se ensanchó
|
|
|
|
|
* fue el hueco a su derecha. En la página legal se veía a la legua.
|
|
|
|
|
*
|
|
|
|
|
* Si algún día se ensancha, hay que dar antes a cada texto una columna que
|
|
|
|
|
* crezca con él; sin eso, más ancho es más vacío.
|
|
|
|
|
*/
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
--container: 74rem;
|
|
|
|
|
|
|
|
|
|
/* Alto de la barra del reproductor: lo usa el padding inferior del layout. */
|
|
|
|
|
--player-height: 88px;
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Altura aproximada de la cabecera, que ahora es pegajosa. No la mide nadie:
|
|
|
|
|
* es una referencia para separar de ella las anclas y las barras laterales
|
|
|
|
|
* que también se quedan fijas. Si cambia el espaciado de la cabecera, este
|
|
|
|
|
* número la sigue.
|
|
|
|
|
*/
|
|
|
|
|
--altura-cabecera: 4.75rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* La inversión clara, y SOLO cuando se pide.
|
|
|
|
|
*
|
|
|
|
|
* El marino es el modo por defecto se pida lo que se pida al sistema, y no es
|
|
|
|
|
* un descuido: es la marca. Un sitio cuyo color forma parte de lo que cuenta no
|
|
|
|
|
* puede salir en blanco porque el portátil de quien entra venga configurado
|
|
|
|
|
* así; y al revés que en una herramienta de trabajo, aquí nadie va a pasar ocho
|
|
|
|
|
* horas seguidas leyendo. Antes esto seguía a `prefers-color-scheme` y llevaba
|
|
|
|
|
* a que media parte de las visitas viera una versión que no es la del sitio.
|
|
|
|
|
*
|
|
|
|
|
* El claro sigue entero y a un clic, en el botón de la cabecera, y la elección
|
|
|
|
|
* se recuerda. Lo que se deja de hacer es decidirlo por nadie a partir de una
|
|
|
|
|
* preferencia que se configuró pensando en otra cosa.
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
*
|
|
|
|
|
* Es una inversión de verdad, no un fondo blanco con lo mismo encima: el texto
|
|
|
|
|
* pasa a ser el propio marino y los fondos, blancos apenas teñidos de él. Así
|
|
|
|
|
* los dos modos son la misma marca vista de dos maneras.
|
|
|
|
|
*
|
|
|
|
|
* El dorado tiene que bajar de claridad aquí. El de 0,82 se lee bien sobre
|
|
|
|
|
* marino y desaparece sobre blanco, así que este es un dorado más hondo, casi
|
|
|
|
|
* bronce, que mantiene el contraste como texto.
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
*/
|
|
|
|
|
:root[data-tema='claro'] {
|
|
|
|
|
--c-toggle-active: oklch(0.43 0.09 155);
|
|
|
|
|
--c-toggle-text: oklch(0.99 0.005 155);
|
|
|
|
|
--c-form-action: oklch(0.3 0.075 255);
|
|
|
|
|
--c-form-action-hover: oklch(0.37 0.085 255);
|
|
|
|
|
--c-form-action-text: oklch(0.98 0.005 255);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
color-scheme: light;
|
|
|
|
|
--c-bg: oklch(0.98 0.008 264);
|
|
|
|
|
--c-bg-raised: oklch(0.955 0.011 264);
|
|
|
|
|
--c-bg-sunken: oklch(0.915 0.016 264);
|
|
|
|
|
--c-border: oklch(0.86 0.02 264);
|
|
|
|
|
|
|
|
|
|
--c-text: oklch(0.24 0.055 264);
|
|
|
|
|
--c-text-muted: oklch(0.48 0.038 264);
|
|
|
|
|
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
--c-accent: oklch(0.52 0.125 74);
|
|
|
|
|
--c-accent-superficie: oklch(0.76 0.13 82);
|
|
|
|
|
--c-accent-text: oklch(0.24 0.055 264);
|
|
|
|
|
--c-accent-brillo: oklch(0.9 0.1 92);
|
|
|
|
|
--c-accent-sombra: oklch(0.6 0.12 74);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
|
El mapa es de Iberoamérica: los veintidós, no veinte
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>
1 month ago
|
|
|
/* En claro se invierten: el dato pintado tiene que ser oscuro sobre papel. */
|
El mapa, revisado mirándolo en los dos temas
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>
1 month ago
|
|
|
--c-dato: oklch(0.5 0.085 200);
|
El punto del mapa ya no lo tapa el pais de al lado
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>
1 month ago
|
|
|
/* El mismo tono, un paso por debajo: «también se canta aquí», no otro dato. */
|
|
|
|
|
--c-dato-tenue: oklch(0.62 0.08 200);
|
El mapa, revisado mirándolo en los dos temas
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>
1 month ago
|
|
|
--c-dato-vacio: oklch(0.93 0.012 255);
|
El mapa es de Iberoamérica: los veintidós, no veinte
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>
1 month ago
|
|
|
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
--c-danger: oklch(0.5 0.17 25);
|
|
|
|
|
--c-focus: oklch(0.5 0.13 264);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
*,
|
|
|
|
|
*::before,
|
|
|
|
|
*::after {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html {
|
|
|
|
|
-webkit-text-size-adjust: 100%;
|
|
|
|
|
/*
|
|
|
|
|
* Sin esto, un enlace a un ancla dejaría su destino debajo de la cabecera
|
|
|
|
|
* pegajosa. Vale para los saltos con teclado y para el enlace de saltar al
|
|
|
|
|
* contenido, no solo para los `#` escritos a mano.
|
|
|
|
|
*/
|
|
|
|
|
scroll-padding-top: calc(var(--altura-cabecera) + var(--sp-4));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
background: var(--c-bg);
|
|
|
|
|
color: var(--c-text);
|
|
|
|
|
font-family: var(--font-body);
|
|
|
|
|
font-size: var(--fs-base);
|
|
|
|
|
line-height: var(--leading-body);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
text-rendering: optimizeLegibility;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Los desplazamientos forman parte de la interfaz visible. Se pintan con el
|
|
|
|
|
* oro fijo del logotipo en lugar del color nativo del sistema, que podía salir
|
|
|
|
|
* azul o gris según el navegador. Las reglas WebKit aportan el reflejo metálico;
|
|
|
|
|
* `scrollbar-color` mantiene el mismo oro en Firefox.
|
|
|
|
|
*/
|
|
|
|
|
* {
|
|
|
|
|
scrollbar-width: thin;
|
|
|
|
|
scrollbar-color: var(--c-marca-oro) var(--c-bg-sunken);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
*::-webkit-scrollbar {
|
|
|
|
|
width: 0.65rem;
|
|
|
|
|
height: 0.65rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
*::-webkit-scrollbar-track {
|
|
|
|
|
background: var(--c-bg-sunken);
|
|
|
|
|
border-radius: var(--radius-round);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
|
|
|
min-width: 2.5rem;
|
|
|
|
|
border: 2px solid var(--c-bg-sunken);
|
|
|
|
|
border-radius: var(--radius-round);
|
|
|
|
|
background-color: var(--c-marca-oro);
|
|
|
|
|
background-image: var(--oro-control);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background-color: var(--c-marca-oro-brillo);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Primitiva compartida por progreso y volumen. La zona recorrida usa el metal
|
|
|
|
|
* de marca; la pendiente conserva su tamaño con `background-size`, de modo que
|
|
|
|
|
* el brillo acaba siempre dentro de la parte ya recorrida.
|
|
|
|
|
*/
|
|
|
|
|
.rango-dorado {
|
|
|
|
|
appearance: none;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
height: 1rem;
|
|
|
|
|
background: transparent;
|
|
|
|
|
accent-color: var(--c-marca-oro);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rango-dorado::-webkit-slider-runnable-track {
|
|
|
|
|
height: 5px;
|
|
|
|
|
border: 1px solid color-mix(in oklab, var(--c-marca-oro-sombra) 55%, var(--c-border));
|
|
|
|
|
border-radius: var(--radius-round);
|
|
|
|
|
background-color: var(--c-bg-sunken);
|
|
|
|
|
background-image: var(--oro-control);
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: var(--avance, 0%) 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rango-dorado::-moz-range-track {
|
|
|
|
|
height: 5px;
|
|
|
|
|
border: 1px solid color-mix(in oklab, var(--c-marca-oro-sombra) 55%, var(--c-border));
|
|
|
|
|
border-radius: var(--radius-round);
|
|
|
|
|
background: var(--c-bg-sunken);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rango-dorado::-moz-range-progress {
|
|
|
|
|
height: 5px;
|
|
|
|
|
border-radius: var(--radius-round);
|
|
|
|
|
background-color: var(--c-marca-oro);
|
|
|
|
|
background-image: var(--oro-control);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rango-dorado::-webkit-slider-thumb {
|
|
|
|
|
appearance: none;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
margin-top: calc((var(--sp-1) + var(--gap-hairline)) * -1);
|
|
|
|
|
border: 1px solid var(--c-marca-oro-sombra);
|
|
|
|
|
border-radius: var(--radius-round);
|
|
|
|
|
background-color: var(--c-marca-oro);
|
|
|
|
|
background-image: var(--oro-control-pulgar);
|
|
|
|
|
box-shadow: 0 0 0 2px var(--c-bg-raised);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rango-dorado::-moz-range-thumb {
|
|
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
border: 1px solid var(--c-marca-oro-sombra);
|
|
|
|
|
border-radius: var(--radius-round);
|
|
|
|
|
background-color: var(--c-marca-oro);
|
|
|
|
|
background-image: var(--oro-control-pulgar);
|
|
|
|
|
box-shadow: 0 0 0 2px var(--c-bg-raised);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rango-dorado:hover::-webkit-slider-thumb,
|
|
|
|
|
.rango-dorado:focus-visible::-webkit-slider-thumb,
|
|
|
|
|
.rango-dorado:hover::-moz-range-thumb,
|
|
|
|
|
.rango-dorado:focus-visible::-moz-range-thumb {
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 2px var(--c-bg-raised),
|
|
|
|
|
0 0 0 4px color-mix(in oklab, var(--c-marca-oro) 25%, transparent);
|
|
|
|
|
}
|
|
|
|
|
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
h1,
|
|
|
|
|
h2,
|
|
|
|
|
h3,
|
|
|
|
|
h4 {
|
|
|
|
|
font-family: var(--font-display);
|
|
|
|
|
line-height: var(--leading-heading);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
margin: 0 0 var(--sp-3);
|
|
|
|
|
font-weight: var(--font-weight-regular);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
letter-spacing: -0.015em;
|
|
|
|
|
text-wrap: balance;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
font-size: var(--fs-3xl);
|
|
|
|
|
}
|
|
|
|
|
h2 {
|
|
|
|
|
font-size: var(--fs-2xl);
|
|
|
|
|
}
|
|
|
|
|
h3 {
|
|
|
|
|
font-size: var(--fs-xl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
margin: 0 0 var(--sp-4);
|
|
|
|
|
text-wrap: pretty;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: inherit;
|
|
|
|
|
text-underline-offset: 0.2em;
|
|
|
|
|
transition: color var(--duration-normal) var(--ease-standard);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Todo enlace responde al puntero. Antes no había ninguna regla global, así que
|
|
|
|
|
* los enlaces sin estilo propio —el del feed, los del pie— no daban ninguna
|
|
|
|
|
* señal de ser pulsables. El dorado es el color de lo accionable en esta web,
|
|
|
|
|
* así que es el que corresponde.
|
|
|
|
|
*
|
|
|
|
|
* Los componentes que ya deciden su propio color al pasar por encima ganan por
|
|
|
|
|
* especificidad: esto es el suelo, no una imposición.
|
|
|
|
|
*/
|
|
|
|
|
a:hover {
|
|
|
|
|
color: var(--c-accent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Selección exclusiva: una barra común y un segmento verde activo. */
|
|
|
|
|
.toggle-rail {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
padding: calc(var(--sp-1) - var(--gap-hairline));
|
|
|
|
|
gap: var(--sp-1);
|
|
|
|
|
border: 1px solid var(--c-border);
|
|
|
|
|
border-radius: var(--radius-overlay);
|
|
|
|
|
background: var(--c-toggle-rail);
|
|
|
|
|
}
|
|
|
|
|
.toggle-rail__option {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: var(--sp-2);
|
|
|
|
|
min-width: 0;
|
|
|
|
|
min-height: var(--control-height-compact);
|
|
|
|
|
padding: var(--sp-1) var(--sp-3);
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: var(--radius-tarjeta);
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: var(--c-text-muted);
|
|
|
|
|
font: inherit;
|
|
|
|
|
font-size: var(--boton-texto);
|
|
|
|
|
font-weight: var(--font-weight-regular);
|
|
|
|
|
letter-spacing: 0.01em;
|
|
|
|
|
line-height: var(--leading-ui);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition:
|
|
|
|
|
background-color var(--duration-normal) var(--ease-standard),
|
|
|
|
|
color var(--duration-normal) var(--ease-standard);
|
|
|
|
|
}
|
|
|
|
|
.toggle-rail__option:hover {
|
|
|
|
|
color: var(--c-text);
|
|
|
|
|
}
|
|
|
|
|
.toggle-rail__option[aria-pressed='true'] {
|
|
|
|
|
background: var(--c-toggle-active);
|
|
|
|
|
color: var(--c-toggle-text);
|
|
|
|
|
}
|
|
|
|
|
.toggle-rail__option:focus-visible {
|
|
|
|
|
outline: 2px solid var(--c-toggle-active);
|
|
|
|
|
outline-offset: 2px;
|
|
|
|
|
}
|
|
|
|
|
.toggle-rail__option:disabled {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Los formularios usan azul; las acciones de reproducción conservan el oro. */
|
|
|
|
|
form .btn--primary,
|
|
|
|
|
.programador .btn--primary,
|
|
|
|
|
.btn.btn--form-primary {
|
|
|
|
|
background: var(--c-form-action);
|
|
|
|
|
border-color: var(--c-form-action);
|
|
|
|
|
color: var(--c-form-action-text);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
transition:
|
|
|
|
|
background-color var(--duration-normal) var(--ease-standard),
|
|
|
|
|
border-color var(--duration-normal) var(--ease-standard);
|
|
|
|
|
}
|
|
|
|
|
form .btn--primary:hover,
|
|
|
|
|
.programador .btn--primary:hover,
|
|
|
|
|
.btn.btn--form-primary:hover {
|
|
|
|
|
background: var(--c-form-action-hover);
|
|
|
|
|
border-color: var(--c-form-action-hover);
|
|
|
|
|
color: var(--c-form-action-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
a {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul,
|
|
|
|
|
ol {
|
|
|
|
|
margin: 0 0 var(--sp-4);
|
|
|
|
|
padding-left: var(--sp-5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
font: inherit;
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
|
|
|
|
|
outline: 2px solid var(--c-focus);
|
|
|
|
|
outline-offset: 2px;
|
|
|
|
|
border-radius: var(--radius-detail);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- primitivas de layout ------------------------------------------------ */
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: var(--container);
|
|
|
|
|
margin-inline: auto;
|
|
|
|
|
padding-inline: var(--sp-4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stack > * + * {
|
|
|
|
|
margin-top: var(--sp-4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.muted {
|
|
|
|
|
color: var(--c-text-muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.eyebrow {
|
|
|
|
|
font-size: var(--fs-xs);
|
|
|
|
|
letter-spacing: 0.08em;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: var(--c-text-muted);
|
|
|
|
|
margin: 0 0 var(--sp-2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.entradilla-pagina {
|
|
|
|
|
max-width: 56ch;
|
|
|
|
|
color: var(--c-text-muted);
|
|
|
|
|
font-size: var(--fs-lg);
|
|
|
|
|
font-weight: var(--font-weight-regular);
|
|
|
|
|
}
|
|
|
|
|
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
.visually-hidden {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: calc(var(--gap-hairline) * -1);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
overflow: hidden;
|
|
|
|
|
clip-path: inset(50%);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--sp-2);
|
|
|
|
|
min-height: var(--control-height);
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
padding: var(--boton-relleno);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
border: 1px solid var(--c-border);
|
Cantos menos redondos, tarjetas coherentes y portada a ras
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>
1 month ago
|
|
|
border-radius: var(--radius-boton);
|
|
|
|
|
/*
|
|
|
|
|
* `background-color` y no el atajo `background`: el atajo reinicia también
|
|
|
|
|
* `background-image`, así que una variante con degradado —el botón dorado—
|
|
|
|
|
* lo perdía en cuanto esta regla o la de `:hover` se aplicaban, y se quedaba
|
|
|
|
|
* en un rectángulo oscuro con el borde de oro.
|
|
|
|
|
*/
|
|
|
|
|
background-color: transparent;
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
font-size: var(--boton-texto);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
letter-spacing: 0.01em;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
line-height: var(--leading-ui);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
transition:
|
|
|
|
|
background-color 0.2s var(--ease-standard),
|
|
|
|
|
border-color 0.2s var(--ease-standard);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* El botón secundario acusa el puntero con el fondo y el canto, no con el
|
|
|
|
|
* color del texto: teñirlo de dorado además sería una señal doble, y encima
|
|
|
|
|
* competiría con el botón dorado que suele tener al lado. El color se declara
|
|
|
|
|
* aquí para ganarle a la regla general de los enlaces, ya que muchos de estos
|
|
|
|
|
* botones lo son.
|
|
|
|
|
* La condición de disponibilidad no suma especificidad: las variantes de
|
|
|
|
|
* color deben conservar su texto, fondo y borde propios también en hover.
|
|
|
|
|
*/
|
|
|
|
|
.btn:hover:where(:not(:disabled)) {
|
|
|
|
|
background-color: var(--c-bg-raised);
|
|
|
|
|
border-color: var(--c-text-muted);
|
|
|
|
|
color: inherit;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn:disabled {
|
|
|
|
|
opacity: 0.45;
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- diálogos ------------------------------------------------------------
|
|
|
|
|
*
|
|
|
|
|
* Una sola carcasa para acceso, contacto y búsqueda. El borde no forma parte
|
|
|
|
|
* del diálogo: la separación del plano inferior la dan el fondo y la sombra.
|
|
|
|
|
*/
|
|
|
|
|
.modal-screen {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: var(--sp-4);
|
|
|
|
|
border: 0;
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: var(--c-text);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
place-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-screen[open] {
|
|
|
|
|
display: grid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-screen::backdrop {
|
|
|
|
|
background: var(--c-overlay);
|
|
|
|
|
backdrop-filter: blur(4px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-surface {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-radius: var(--radius-overlay);
|
|
|
|
|
background: var(--c-bg-raised);
|
|
|
|
|
box-shadow: var(--shadow-modal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-close {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: var(--sp-3);
|
|
|
|
|
right: var(--sp-3);
|
|
|
|
|
display: inline-grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
width: var(--control-height);
|
|
|
|
|
height: var(--control-height);
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: var(--radius-round);
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: var(--c-text-muted);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition:
|
|
|
|
|
background-color var(--duration-normal) var(--ease-standard),
|
|
|
|
|
color var(--duration-normal) var(--ease-standard);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal-close:hover,
|
|
|
|
|
.modal-close:focus-visible {
|
|
|
|
|
background: var(--c-bg-sunken);
|
|
|
|
|
color: var(--c-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 34rem) {
|
|
|
|
|
.modal-screen {
|
|
|
|
|
padding: var(--sp-3);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* El aspecto dorado, aparte del botón que lo estrenó.
|
|
|
|
|
*
|
|
|
|
|
* Lo lleva también el conmutador de vista de la página de música, que no es un
|
|
|
|
|
* `.btn` —va dentro de una barra y no puede tener canto ni esquinas propias—
|
|
|
|
|
* pero sí tiene que ser el mismo oro. Copiarlo era garantizar que un día uno de
|
|
|
|
|
* los dos se quedara plano.
|
|
|
|
|
*/
|
|
|
|
|
.btn--primary,
|
|
|
|
|
.oro {
|
|
|
|
|
/* El color plano queda de reserva: si el degradado no se pintara, el botón
|
|
|
|
|
sigue siendo dorado y legible, no transparente. */
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
background-color: var(--c-accent-superficie);
|
|
|
|
|
background-image: var(--gradiente-oro);
|
|
|
|
|
background-size: 100% 240%;
|
|
|
|
|
background-position: 0 22%;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
color: var(--c-accent-text);
|
|
|
|
|
/* El filo de luz de arriba. Sin él, el degradado se ve pintado, no biselado. */
|
|
|
|
|
box-shadow: var(--shadow-control-highlight);
|
|
|
|
|
transition:
|
|
|
|
|
background-position 0.6s var(--ease-emphasized),
|
|
|
|
|
border-color 0.2s var(--ease-standard);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* El canto sí es del botón: dentro de una barra no hay borde que teñir. */
|
|
|
|
|
.btn--primary {
|
|
|
|
|
border-color: var(--c-accent-sombra);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Al acercar el puntero, la luz recorre la pieza. El color de fondo se repite
|
|
|
|
|
* aquí porque `.btn:hover` lo cambia por el gris de los botones normales: sin
|
|
|
|
|
* esto, un dorado que no llegara a pintar el degradado se vería oscuro.
|
|
|
|
|
*/
|
|
|
|
|
.btn--primary:hover,
|
|
|
|
|
.oro:hover {
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
background-color: var(--c-accent-superficie);
|
|
|
|
|
background-position: 0 78%;
|
|
|
|
|
border-color: var(--c-accent);
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* El color se repite aquí porque `.btn:hover` lo pone en `inherit` —para
|
|
|
|
|
* que la regla general de los enlaces no tiña de dorado los secundarios—.
|
|
|
|
|
* Ambas reglas tienen la misma especificidad y esta variante, declarada
|
|
|
|
|
* después, conserva el texto marino sobre el oro.
|
Arregla el contraste del botón dorado y unifica la letra de los botones
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>
1 month ago
|
|
|
*/
|
|
|
|
|
color: var(--c-accent-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
.btn--primary,
|
|
|
|
|
.oro {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
Deja de repetir el fondo de la portada, las migas y las etiquetas
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>
1 month ago
|
|
|
/* --- etiquetas -----------------------------------------------------------
|
|
|
|
|
*
|
|
|
|
|
* La pastilla de una etiqueta. Estaba repetida en cinco sitios con cinco copias
|
|
|
|
|
* del mismo borde redondeado, y se escribe una vez.
|
|
|
|
|
*
|
|
|
|
|
* Va aquí y no en un componente porque a veces es un enlace —lleva a lo que
|
|
|
|
|
* agrupa— y a veces es solo texto: dentro de una tarjeta que ya es clicable,
|
|
|
|
|
* meter enlaces dentro de otro enlace deja una zona donde el clic hace una cosa
|
|
|
|
|
* distinta según el píxel exacto.
|
|
|
|
|
*/
|
|
|
|
|
.chips {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: var(--sp-2);
|
|
|
|
|
list-style: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chip {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
padding: var(--sp-1) var(--sp-3);
|
Deja de repetir el fondo de la portada, las migas y las etiquetas
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>
1 month ago
|
|
|
border: 1px solid var(--c-border);
|
Cantos menos redondos, tarjetas coherentes y portada a ras
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>
1 month ago
|
|
|
border-radius: var(--radius-boton);
|
Deja de repetir el fondo de la portada, las migas y las etiquetas
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>
1 month ago
|
|
|
font-size: var(--fs-xs);
|
|
|
|
|
color: var(--c-text-muted);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
transition:
|
|
|
|
|
border-color 0.3s var(--ease-standard),
|
|
|
|
|
color 0.3s var(--ease-standard);
|
Deja de repetir el fondo de la portada, las migas y las etiquetas
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.chip:hover,
|
|
|
|
|
a.chip:focus-visible {
|
|
|
|
|
border-color: var(--c-accent);
|
|
|
|
|
color: var(--c-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
.chip {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
/* --- tarjetas ------------------------------------------------------------ */
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* El comportamiento de las tarjetas (aparición al entrar en pantalla y
|
|
|
|
|
* respuesta al puntero) vive aquí y no en cada componente: son tres tipos de
|
|
|
|
|
* tarjeta —estilo, álbum y canción— y tenían que moverse igual. Al ser CSS
|
|
|
|
|
* global no hace falta pelearse con el ámbito de Svelte para los atributos que
|
|
|
|
|
* escribe la acción `revelar` en tiempo de ejecución.
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
*
|
|
|
|
|
* Sobre el movimiento: nada usa `ease`, que es la curva por defecto y se nota
|
|
|
|
|
* como tal —arranca y frena igual, y todo acaba pareciéndose—. Aquí se sale
|
|
|
|
|
* rápido y se frena largo, que es como se mueve algo que pesa.
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
*/
|
|
|
|
|
.tarjeta {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border: 1px solid var(--c-border);
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
border-radius: var(--radius-tarjeta);
|
|
|
|
|
background: var(--c-bg-raised);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
overflow: hidden;
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
isolation: isolate;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
transition:
|
|
|
|
|
background-color 0.38s var(--ease-standard),
|
|
|
|
|
border-color 0.32s var(--ease-standard),
|
|
|
|
|
box-shadow 0.42s var(--ease-emphasized);
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* El reflejo. Nace donde está el puntero —lo escribe la acción `brillo` en
|
|
|
|
|
* `--mx` y `--my`— y por eso no se lee como un efecto enlatado. Sin JavaScript
|
|
|
|
|
* las variables no existen y cae arriba en el centro, que es un valor
|
|
|
|
|
* razonable, no un fallo.
|
|
|
|
|
*/
|
|
|
|
|
.tarjeta::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
z-index: 0;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
background: radial-gradient(
|
|
|
|
|
18rem 18rem at var(--mx, 50%) var(--my, 0%),
|
|
|
|
|
color-mix(in oklab, var(--c-accent) 11%, transparent),
|
|
|
|
|
transparent 72%
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
);
|
|
|
|
|
transition: opacity var(--duration-slow) var(--ease-standard);
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta:hover::before,
|
|
|
|
|
.tarjeta:focus-within::before {
|
|
|
|
|
opacity: 1;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Un destello breve cose visualmente portada y cuerpo al entrar en la tarjeta.
|
|
|
|
|
* Se anima esta capa, no el contenido, de modo que la portada no cambia de
|
|
|
|
|
* posición ni de tamaño. El recorrido solo ocurre una vez por entrada.
|
|
|
|
|
*/
|
|
|
|
|
.tarjeta::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
112deg,
|
|
|
|
|
transparent 24%,
|
|
|
|
|
color-mix(in oklab, var(--c-accent-brillo) 5%, transparent) 40%,
|
|
|
|
|
color-mix(in oklab, var(--c-accent-brillo) 21%, transparent) 50%,
|
|
|
|
|
color-mix(in oklab, var(--c-accent-brillo) 6%, transparent) 60%,
|
|
|
|
|
transparent 76%
|
|
|
|
|
);
|
|
|
|
|
transform: translateX(-125%);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta:hover::after,
|
|
|
|
|
.tarjeta:focus-within::after {
|
|
|
|
|
animation: tarjeta-destello var(--duration-reveal) var(--ease-emphasized) both;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes tarjeta-destello {
|
|
|
|
|
0% {
|
|
|
|
|
transform: translateX(-125%);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
18% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
transform: translateX(125%);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* Aparición al entrar en pantalla, para cualquier elemento con la acción
|
|
|
|
|
* `revelar`. Vive aquí y no en cada componente por dos motivos: lo usan las
|
|
|
|
|
* tarjetas y también las listas del taller, y sobre todo porque el atributo lo
|
|
|
|
|
* escribe la acción en tiempo de ejecución, así que el compilador de Svelte no
|
|
|
|
|
* lo ve en el marcado y podaría la regla como si no se usara.
|
|
|
|
|
*
|
|
|
|
|
* El estado oculto lo pone la acción, nunca el CSS por su cuenta: sin
|
|
|
|
|
* JavaScript no hay atributo y todo se ve directamente.
|
|
|
|
|
*/
|
|
|
|
|
[data-revelar='oculto'] {
|
|
|
|
|
opacity: 0;
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
transform: translateY(18px) scale(0.985);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-revelar='visible'] {
|
|
|
|
|
/*
|
|
|
|
|
* backwards conserva el estado inicial durante el retraso, pero libera
|
|
|
|
|
* transform al terminar. Con both, el último fotograma seguía mandando para
|
|
|
|
|
* siempre y anulaba la respuesta de la tarjeta al puntero.
|
|
|
|
|
*/
|
|
|
|
|
animation: revelarse var(--duration-reveal) var(--ease-emphasized) var(--retraso-revelado, 0ms)
|
|
|
|
|
backwards;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes revelarse {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
transform: translateY(18px) scale(0.985);
|
|
|
|
|
filter: blur(6px);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: none;
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
filter: blur(0);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* Al acercarse, el borde, la sombra y el reflejo responden sin desplazar la
|
|
|
|
|
* tarjeta. Así la portada permanece anclada y el puntero no provoca saltos.
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
*/
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
.tarjeta:hover,
|
|
|
|
|
.tarjeta:focus-within {
|
|
|
|
|
background-color: color-mix(in oklab, var(--c-bg-raised) 94%, var(--c-accent));
|
|
|
|
|
border-color: color-mix(in oklab, var(--c-accent) 62%, var(--c-border));
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
box-shadow:
|
|
|
|
|
0 2px 8px -5px rgb(0 0 0 / 0.5),
|
|
|
|
|
0 22px 42px -26px rgb(0 0 0 / 0.88),
|
|
|
|
|
0 0 30px -18px color-mix(in oklab, var(--c-accent) 58%, transparent);
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Al pulsar, la sombra se recoge sin mover ni escalar la portada. */
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
.tarjeta:active {
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 1px 4px -3px rgb(0 0 0 / 0.5),
|
|
|
|
|
0 10px 22px -20px rgb(0 0 0 / 0.75),
|
|
|
|
|
inset 0 0 0 1px color-mix(in oklab, var(--c-accent) 18%, transparent);
|
|
|
|
|
transition-duration: var(--duration-fast);
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta__medio {
|
|
|
|
|
position: relative;
|
|
|
|
|
aspect-ratio: 1;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: var(--c-bg-sunken);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta__medio--ancho {
|
|
|
|
|
aspect-ratio: 16 / 10;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta__medio img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
transform: none;
|
|
|
|
|
transition: none;
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Sombra al pie de la portada, para que el cuerpo no arranque de golpe. */
|
|
|
|
|
.tarjeta__medio::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: auto 0 0;
|
|
|
|
|
height: 45%;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
to top,
|
|
|
|
|
color-mix(in oklab, var(--c-bg) 70%, transparent),
|
|
|
|
|
transparent
|
|
|
|
|
);
|
|
|
|
|
opacity: 0.7;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta__cuerpo {
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: var(--sp-2);
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: var(--sp-4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta__cabecera {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
gap: var(--sp-3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta__cabecera > :first-child {
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* Hace clicable la tarjeta entera sin envolverla en un enlace, que dejaría los
|
|
|
|
|
* botones dentro de él: ni sería HTML válido ni se podría usar con teclado.
|
|
|
|
|
*/
|
|
|
|
|
.tarjeta__enlace::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* El subrayado del título crece desde la izquierda en vez de aparecer entero.
|
|
|
|
|
* Va con el fondo y no con un borde para poder animar el ancho sin que la línea
|
|
|
|
|
* cambie de sitio ni empuje al texto.
|
|
|
|
|
*/
|
|
|
|
|
.tarjeta__enlace {
|
|
|
|
|
background-image: linear-gradient(var(--c-accent), var(--c-accent));
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: 0 100%;
|
|
|
|
|
background-size: 0 1px;
|
|
|
|
|
transition:
|
|
|
|
|
background-size 0.45s var(--ease-emphasized),
|
|
|
|
|
color 0.3s var(--ease-standard);
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta:hover .tarjeta__enlace,
|
|
|
|
|
.tarjeta:focus-within .tarjeta__enlace {
|
|
|
|
|
color: var(--c-accent);
|
|
|
|
|
background-size: 100% 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* El reproductor vive en el cuerpo y no tapa ningún detalle de la portada. */
|
|
|
|
|
.tarjeta__reproduccion {
|
|
|
|
|
position: relative;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
z-index: 2;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 0 0 auto;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
Textos legales, fuentes propias y ajustes de botones
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>
1 month ago
|
|
|
/*
|
|
|
|
|
* El selector lleva `.tarjeta` delante a propósito: los estilos del botón
|
|
|
|
|
* vienen de un componente y Svelte les añade su clase de ámbito, así que con
|
|
|
|
|
* menos peso no se aplicarían. Las tarjetas comparten la escala compacta de
|
|
|
|
|
* controles, proporcionada al título y al resto de sus acciones.
|
Textos legales, fuentes propias y ajustes de botones
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>
1 month ago
|
|
|
*/
|
|
|
|
|
.tarjeta .tarjeta__reproduccion button {
|
|
|
|
|
min-width: var(--control-height-compact);
|
|
|
|
|
min-height: var(--control-height-compact);
|
|
|
|
|
width: var(--control-height-compact);
|
|
|
|
|
height: var(--control-height-compact);
|
Textos legales, fuentes propias y ajustes de botones
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>
1 month ago
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
/* Lo que se apoya sobre la tarjeta y tiene que quedar por encima del enlace. */
|
|
|
|
|
.tarjeta__encima {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
[data-revelar='visible'] {
|
|
|
|
|
animation: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta,
|
Portada por estilos, tarjetas con otro movimiento, y fuera la palabra «segmento»
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>
1 month ago
|
|
|
.tarjeta::before,
|
|
|
|
|
.tarjeta::after,
|
|
|
|
|
.tarjeta__enlace {
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
transition: none;
|
|
|
|
|
animation: none;
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tarjeta:hover,
|
|
|
|
|
.tarjeta:focus-within,
|
|
|
|
|
.tarjeta:active {
|
Web de Senza Paura: catálogo, taller, blog y tienda
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>
1 month ago
|
|
|
transform: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
El glosario del taller, con su globo en el texto
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>
1 month ago
|
|
|
|
|
|
|
|
/* --- términos del glosario ------------------------------------------------
|
|
|
|
|
*
|
|
|
|
|
* El subrayado punteado es la convención de «esto tiene definición» desde
|
|
|
|
|
* mucho antes que la web, y se distingue de un enlace de verdad: un enlace
|
|
|
|
|
* lleva a otra página, esto abre un globo y te deja donde estabas.
|
|
|
|
|
*
|
|
|
|
|
* Va aquí y no en un componente porque el botón lo escribe el servidor dentro
|
|
|
|
|
* del HTML del capítulo, donde el ámbito de Svelte no llega.
|
|
|
|
|
*/
|
|
|
|
|
.termino {
|
|
|
|
|
border: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background: none;
|
|
|
|
|
font: inherit;
|
|
|
|
|
color: inherit;
|
|
|
|
|
cursor: help;
|
|
|
|
|
text-decoration: underline dotted;
|
|
|
|
|
text-decoration-color: color-mix(in oklab, var(--c-accent) 60%, transparent);
|
|
|
|
|
text-underline-offset: 0.2em;
|
|
|
|
|
text-decoration-thickness: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.termino:hover,
|
|
|
|
|
.termino:focus-visible {
|
|
|
|
|
color: var(--c-accent);
|
|
|
|
|
text-decoration-color: var(--c-accent);
|
|
|
|
|
}
|
