Restore translucent navigation on scroll

codex/redisenio-dominio-musical
dev 4 weeks ago
parent ac1ee034db
commit a1154b3a0b

@ -17,9 +17,8 @@
*
* Arriba del todo, la cabecera se aparta y deja ver la portada por debajo:
* es lo que hace que la primera pantalla llegue hasta el borde en vez de
* empezar bajo una franja. En cuanto se baja, se vuelve opaca, porque
* entonces lo que pasa por detrás es texto y el menú tiene que seguir
* leyéndose.
* empezar bajo una franja. En cuanto se baja, gana una base translúcida y
* desenfocada para que el menú siga leyéndose sin ocultar lo que pasa detrás.
*/
let desplazada = $state(false);
@ -204,10 +203,10 @@
backdrop-filter 0.35s var(--suave);
}
/* Al bajar, detrás pasa texto: la cabecera se vuelve opaca y desenfoca. */
/* Al bajar conserva la transparencia y desenfoca lo que pasa por detrás. */
.cabecera.desplazada {
background-image: none;
background-color: color-mix(in oklab, var(--c-bg) 82%, transparent);
background-color: color-mix(in oklab, var(--c-bg) 68%, transparent);
backdrop-filter: var(--desenfoque);
}
@ -218,7 +217,7 @@
*/
@supports not (backdrop-filter: blur(1px)) {
.cabecera.desplazada {
background-color: color-mix(in oklab, var(--c-bg) 96%, transparent);
background-color: color-mix(in oklab, var(--c-bg) 88%, transparent);
}
}

@ -4,7 +4,6 @@
import RejillaCanciones from '$lib/components/RejillaCanciones.svelte';
import RetratoArtista from '$lib/components/RetratoArtista.svelte';
import TarjetaAlbum from '$lib/components/TarjetaAlbum.svelte';
import type { TipoArtista } from '$lib/types';
import { mostrarHeroe } from '$lib/presentacion';
let { data } = $props();
@ -14,17 +13,6 @@
const ubicacion = $derived(
[data.artista.lugarOrigen, data.artista.pais].filter(Boolean).join(', ')
);
const tipos: Record<TipoArtista, string> = {
persona: 'Solista',
grupo: 'Grupo',
proyecto: 'Proyecto musical',
virtual: 'Artista virtual'
};
const nombreTipo = $derived(
data.artista.tipo === 'virtual'
? tipos.virtual
: `${tipos[data.artista.tipo]}${data.artista.virtual ? ' virtual' : ''}`
);
const heroAmplio = $derived(
mostrarHeroe(
data.artista.presentacion,
@ -63,7 +51,7 @@
{/if}
<div class="presentacion">
<p class="ceja">{nombreTipo} · {data.artista.codigo}</p>
<p class="ceja">{data.artista.codigo}</p>
<h1>{data.artista.nombre}</h1>
{#if data.artista.descripcion}<p class="entradilla">{data.artista.descripcion}</p>{/if}

Loading…
Cancel
Save

Powered by TurnKey Linux.