@ -54,18 +54,6 @@
/** El ancho de un encuadre, para medir con él lo que se dibuja encima. */
/** El ancho de un encuadre, para medir con él lo que se dibuja encima. */
const anchoDe = (encuadre: string) => Number(encuadre.split(' ')[2]);
const anchoDe = (encuadre: string) => Number(encuadre.split(' ')[2]);
/**
* El lienzo de América, con océano de sobra a la derecha.
*
* La Península va ahí encima, y con el encuadre justo quedaba rozando el
* Caribe. El aire no es decoración: entre las dos orillas hay un Atlántico,
* y sin separación parecen el mismo continente.
*/
const LIENZO = (() => {
const [x, y, ancho, alto] = ENCUADRE.split(' ').map(Number);
return [x, y, ancho * 1.42, alto].join(' ');
})();
const enAmerica = PAISES.filter((p) => !IBERIA.includes(p.codigo));
const enAmerica = PAISES.filter((p) => !IBERIA.includes(p.codigo));
const enIberia = PAISES.filter((p) => IBERIA.includes(p.codigo));
const enIberia = PAISES.filter((p) => IBERIA.includes(p.codigo));
@ -83,7 +71,25 @@
< div class = "conjunto" > < div class = "conjunto" >
< div class = "mapa" >
< div class = "mapa" >
< svg viewBox = { LIENZO } role="group" aria-label = "Géneros por país" >
<!--
El mismo oro de los botones, aquí como degradado de SVG: el token `--oro`
es un `linear-gradient` de CSS y no se puede usar en un `fill`. Las cinco
paradas y el ángulo son los suyos, para que el punto del mapa y el botón
dorado sean el mismo metal.
-->
< svg width = "0" height = "0" aria-hidden = "true" class = "paleta" >
< defs >
< linearGradient id = "oro-del-mapa" x1 = "0" y1 = "0" x2 = "0.24" y2 = "1" >
< stop offset = "0%" stop-color = "var(--c-accent-sombra)" / >
< stop offset = "24%" stop-color = "var(--c-accent-superficie)" / >
< stop offset = "46%" stop-color = "var(--c-accent-brillo)" / >
< stop offset = "64%" stop-color = "var(--c-accent-superficie)" / >
< stop offset = "100%" stop-color = "var(--c-accent-sombra)" / >
< / linearGradient >
< / defs >
< / svg >
< svg viewBox = { ENCUADRE } role="group" aria-label = "Géneros por país" >
{ #each enAmerica as p ( p . codigo )}
{ #each enAmerica as p ( p . codigo )}
{ @render pais ( p , anchoDe ( ENCUADRE ))}
{ @render pais ( p , anchoDe ( ENCUADRE ))}
{ /each }
{ /each }
@ -203,32 +209,27 @@
}
}
/*
/*
* La Península va sobre el mapa de América, en el hueco del Atlántico
* Los dos mapas en columnas, no uno encima del otro.
* norte, que es donde le corresponde y donde no tapa nada. Encima de la
*
* lista de países no pintaba nada: no es un índice, es mapa.
* Con la Península en posición absoluta había que ensanchar el lienzo de
* América para hacerle sitio, y eso dejaba el mapa descentrado en su caja.
* En columnas cada uno ocupa lo suyo, el hueco entre ellos es el Atlántico
* y el conjunto se centra solo.
*/
*/
.mapa {
.mapa {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
gap: var(--sp-6);
align-items: start;
justify-items: center;
}
}
.peninsula {
.peninsula {
position: absolute;
display: block;
top: 0;
width: 100%;
right: 0;
width: 27%;
height: auto;
height: auto;
}
}
/*
* Iberoamérica es casi tan alta como ancha, así que el límite lo pone el
* alto: a todo lo ancho ocupaba la pantalla entera y había que bajar para
* ver que debajo hay un buscador.
*/
.mapa {
display: grid;
place-items: center;
}
.listado {
.listado {
list-style: none;
list-style: none;
margin: 0;
margin: 0;
@ -285,12 +286,22 @@
}
}
}
}
/*
* Cada mapa llena su columna y el alto lo limita la ventana: Iberoamérica es
* casi tan alta como ancha, y a todo lo ancho ocupaba la pantalla entera.
*/
/* El lienzo que solo lleva el degradado no ocupa sitio. */
.paleta {
position: absolute;
width: 0;
height: 0;
}
svg {
svg {
display: block;
display: block;
width: auto;
width: 100% ;
height: auto;
height: auto;
max-width: min(100%, 26rem);
max-height: 62vh;
max-height: 58vh;
}
}
path {
path {
@ -316,7 +327,7 @@
* el relleno a medias parecía que Brasil no estaba en el mapa.
* el relleno a medias parecía que Brasil no estaba en el mapa.
*/
*/
.vacio {
.vacio {
fill: var(--c-bg-raised );
fill: var(--c-dato-vacio );
stroke: color-mix(in oklab, var(--c-text) 22%, transparent);
stroke: color-mix(in oklab, var(--c-text) 22%, transparent);
pointer-events: none;
pointer-events: none;
}
}
@ -363,22 +374,23 @@
}
}
/*
/*
* El punto es el área de golpeo y solo se ve cuando hace falta: transparente
* El punto es dos cosas a la vez: el área de golpeo —Puerto Rico mide cuatro
* en reposo, marcado al pasar por encima, al enfocar con el teclado y en el
* píxeles— y la señal de que ahí hay algo que abrir. Va en el mismo oro que
* país elegido .
* los botones del sitio, con su degradado: es el color de lo que se pulsa .
*/
*/
.punto {
.punto {
fill: transparent;
fill: url(#oro-del-mapa);
stroke: none;
stroke: color-mix(in oklab, var(--c-accent-sombra) 70%, transparent);
transition: fill 0.15s var(--suave);
stroke-width: 0.8;
}
vector-effect: non-scaling-stroke;
transition: opacity 0.15s var(--suave);
.pais:focus-visible .punto {
opacity: 0.9;
fill: color-mix(in oklab, var(--c-text) 70%, transparent);
}
}
.pais:hover .punto,
.pais:focus-visible .punto,
.pais.elegido .punto {
.pais.elegido .punto {
fill: var(--c-bg);
opacity: 1 ;
}
}
.fila.elegido .nombre {
.fila.elegido .nombre {
