You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.5 KiB
116 lines
2.5 KiB
<script lang="ts">
|
|
/**
|
|
* Una lámina del carrusel de la portada que propone algo.
|
|
*
|
|
* Comparte el alto y el fondo con la cabecera del disco para que el carrusel
|
|
* no dé saltos al pasar de una a otra, pero no repite el nombre del artista:
|
|
* el `h1` está en la primera lámina y aquí sobraría un segundo.
|
|
*
|
|
* El fondo es el mismo archivo que ya se descargó para la cabecera, así que
|
|
* estas dos láminas no añaden peso.
|
|
*/
|
|
import { heroe } from '$lib/site';
|
|
import { tema } from '$lib/tema.svelte';
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
/** Rótulo corto sobre el título. */
|
|
eyebrow: string;
|
|
titulo: string;
|
|
texto: string;
|
|
/** Los botones. Van como snippet para poder mezclar enlaces y acciones. */
|
|
acciones: Snippet;
|
|
}
|
|
|
|
let { eyebrow, titulo, texto, acciones }: Props = $props();
|
|
|
|
const fondo = $derived(heroe.fondo[tema.actual]);
|
|
</script>
|
|
|
|
<section class="lamina-cta">
|
|
<div class="fondo">
|
|
{#if fondo}
|
|
<img
|
|
src={fondo.src}
|
|
srcset={fondo.srcset}
|
|
sizes="100vw"
|
|
width={fondo.ancho}
|
|
height={fondo.alto}
|
|
alt=""
|
|
/>
|
|
{/if}
|
|
<span class="velo"></span>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<p class="eyebrow">{eyebrow}</p>
|
|
<h2>{titulo}</h2>
|
|
<p class="entradilla">{texto}</p>
|
|
<div class="acciones">{@render acciones()}</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.lamina-cta {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: min(88vh, 46rem);
|
|
padding-block: var(--sp-8);
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.fondo {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background: var(--c-bg-sunken);
|
|
}
|
|
|
|
.fondo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/*
|
|
* Aquí el velo es más cerrado que en la cabecera del disco: no hay
|
|
* tocadiscos que enseñar a la derecha y lo único que importa es que se lea
|
|
* lo que se propone.
|
|
*/
|
|
.velo {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(
|
|
to right,
|
|
color-mix(in oklab, var(--c-bg) 92%, transparent) 0%,
|
|
color-mix(in oklab, var(--c-bg) 70%, transparent) 55%,
|
|
color-mix(in oklab, var(--c-bg) 30%, transparent) 100%
|
|
),
|
|
linear-gradient(to top, var(--c-bg) 0%, transparent 35%);
|
|
}
|
|
|
|
h2 {
|
|
max-width: 18ch;
|
|
margin: var(--sp-2) 0 0;
|
|
font-size: var(--fs-3xl);
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.entradilla {
|
|
max-width: 52ch;
|
|
margin-top: var(--sp-4);
|
|
font-size: var(--fs-lg);
|
|
color: var(--c-text-muted);
|
|
}
|
|
|
|
.acciones {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--sp-3);
|
|
margin-top: var(--sp-5);
|
|
}
|
|
</style>
|