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>
master
dev 4 weeks ago
parent 22d7174965
commit f91187ba08

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 623 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.1 MiB

@ -25,11 +25,19 @@
import fs from 'node:fs';
const ORIGEN = process.argv[2] ?? 'scripts/mapa/BlankMap-Americas.svg';
const ORIGEN = process.argv[2] ?? 'scripts/mapa/BlankMap-World.svg';
const DESTINO = 'src/lib/mapa/iberoamerica.ts';
/** Los veinte, en el orden en que se leen de norte a sur. */
/**
* Los veintidós de Iberoamérica: los veinte de América más España y Portugal.
*
* Estaban fuera en la primera versión, hecha sobre un mapa de las Américas.
* Iberoamérica es también la Península —y España está en los datos: el bolero
* se adoptó ahí—, así que el origen pasa a ser el mapa del mundo.
*/
const PAISES = [
'es',
'pt',
'mx',
'gt',
'sv',
@ -55,6 +63,38 @@ const PAISES = [
/** Un trazado más pequeño que esto no se ve, y sí se nota en el peso. */
const MINIMO = 2;
/**
* El nombre en español de cada uno.
*
* Va aquí y no se lee de la tabla `pais`: el mapa dibuja los veintidós desde el
* primer día y la tabla solo tiene los países que ha traído alguna semilla. Un
* país sin nombre en la lista de al lado no se puede ni pulsar.
*/
const NOMBRES = {
es: 'España',
pt: 'Portugal',
mx: 'México',
gt: 'Guatemala',
sv: 'El Salvador',
hn: 'Honduras',
ni: 'Nicaragua',
cr: 'Costa Rica',
pa: 'Panamá',
cu: 'Cuba',
do: 'República Dominicana',
pr: 'Puerto Rico',
ve: 'Venezuela',
co: 'Colombia',
ec: 'Ecuador',
pe: 'Perú',
bo: 'Bolivia',
py: 'Paraguay',
cl: 'Chile',
ar: 'Argentina',
uy: 'Uruguay',
br: 'Brasil'
};
const svg = fs.readFileSync(ORIGEN, 'utf8');
/*
@ -70,23 +110,99 @@ for (const [, cierre, etiqueta, atributos, suelta] of svg.matchAll(
)) {
if (etiqueta === 'g') {
if (cierre) pila.pop();
else pila.push(atributos.match(/id="([^"]+)"/)?.[1] ?? null);
else pila.push(atributos.match(/(?:^|\s)id="([^"]+)"/)?.[1] ?? null);
continue;
}
if (cierre) continue;
const propio = atributos.match(/id="([^"]+)"/)?.[1] ?? null;
const propio = atributos.match(/(?:^|\s)id="([^"]+)"/)?.[1] ?? null;
const codigo = [propio, ...[...pila].reverse()].find((c) => c && PAISES.includes(c));
const d = atributos.match(/d="([^"]+)"/)?.[1];
/*
* El límite del atributo importa: sin él, `d="…"` encaja dentro de
* `id="Mexico_mainland"` y el trazado que se extrae es el nombre del
* país. Salía un mapa vacío sin que nada fallara.
*/
const d = atributos.match(/(?:^|\s)d="([^"]+)"/)?.[1];
if (codigo && d) trozos[codigo].push(d);
void suelta;
}
/**
* Recorre un trazado y devuelve sus puntos, ya en absolutas.
*
* Hace falta porque el mapa del mundo está escrito en relativas —`m 1244,328 c
* 0.1,-0.12 …`— y ahí los números no son coordenadas sino desplazamientos:
* sumarlos como si lo fueran daba un rectángulo sin sentido y el encuadre salía
* infinito.
*
* No convierte el trazado, solo lo mide: el `d` se guarda tal cual, que dibuja
* igual y ocupa menos.
*/
function puntosDe(d) {
const piezas = d.match(/[a-zA-Z]|-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? [];
const puntos = [];
let x = 0;
let y = 0;
let inicioX = 0;
let inicioY = 0;
let comando = 'M';
let i = 0;
/** Cuántos números lleva cada comando. */
const cuantos = { M: 2, L: 2, T: 2, H: 1, V: 1, C: 6, S: 4, Q: 4, A: 7, Z: 0 };
while (i < piezas.length) {
if (/[a-zA-Z]/.test(piezas[i])) {
comando = piezas[i];
i++;
if (comando.toUpperCase() === 'Z') {
x = inicioX;
y = inicioY;
continue;
}
}
const letra = comando.toUpperCase();
const relativo = comando !== letra;
const n = cuantos[letra];
if (n === undefined) break;
const args = piezas.slice(i, i + n).map(Number);
i += n;
if (args.length < n) break;
if (letra === 'H') x = relativo ? x + args[0] : args[0];
else if (letra === 'V') y = relativo ? y + args[0] : args[0];
else if (letra === 'A') {
// De la elipse solo interesa dónde acaba.
x = relativo ? x + args[5] : args[5];
y = relativo ? y + args[6] : args[6];
} else {
// El punto final es la última pareja; los de control quedan fuera del
// cálculo, y para medir un país la diferencia no se ve.
x = relativo ? x + args[n - 2] : args[n - 2];
y = relativo ? y + args[n - 1] : args[n - 1];
}
if (letra === 'M') {
inicioX = x;
inicioY = y;
// Una `m` con más parejas sigue como `l`; una `M`, como `L`.
comando = relativo ? 'l' : 'L';
}
puntos.push([x, y]);
}
return puntos;
}
/** El rectángulo que ocupa un trazado, para saber si merece la pena. */
function tamano(d) {
const numeros = [...d.matchAll(/-?\d+(?:\.\d+)?/g)].map((m) => Number(m[0]));
const xs = numeros.filter((_, i) => i % 2 === 0);
const ys = numeros.filter((_, i) => i % 2 === 1);
const puntos = puntosDe(d);
const xs = puntos.map((p) => p[0]);
const ys = puntos.map((p) => p[1]);
if (xs.length === 0) return { ancho: 0, alto: 0, xs, ys };
return {
ancho: Math.max(...xs) - Math.min(...xs),
@ -98,8 +214,21 @@ function tamano(d) {
const unaDecimal = (d) => d.replace(/-?\d+\.\d+/g, (n) => String(Math.round(Number(n) * 10) / 10));
/**
* Une varios trazados en uno.
*
* El primer salto de cada uno pasa a ser absoluto. Dentro de un `<path>` la
* posición de partida es el origen, así que `m 1244,328` y `M 1244,328` son lo
* mismo; pero al pegar el segundo detrás del primero, su `m` se sumaba a donde
* había acabado el anterior y México acababa a cuarenta mil unidades de su
* sitio. El encuadre salía de cuarenta y dos mil por cincuenta y ocho mil.
*/
const unir = (trazados) => trazados.map((d) => d.replace(/^\s*m/, 'M')).join(' ');
const contorno = {};
const centro = {};
/** El trazado mayor de cada país: es con el que se encuadra el inserto. */
const principal = {};
let descartados = 0;
for (const codigo of PAISES) {
@ -109,7 +238,7 @@ for (const codigo of PAISES) {
if (!vale) descartados++;
return vale;
});
contorno[codigo] = unaDecimal(buenos.join(' '));
contorno[codigo] = unaDecimal(unir(buenos));
/*
* Un punto donde agarrar el país.
@ -127,27 +256,48 @@ for (const codigo of PAISES) {
const { xs, ys } = tamano(mayor);
const medio = (ns) => ns.reduce((t, n) => t + n, 0) / ns.length;
centro[codigo] = [medio(xs), medio(ys)].map((n) => Math.round(n * 10) / 10);
principal[codigo] = mayor;
}
/* El encuadre sale de lo que queda, no del mapa entero. */
const xs = [];
const ys = [];
for (const d of Object.values(contorno)) {
const t = tamano(d);
xs.push(...t.xs);
ys.push(...t.ys);
/**
* Dos encuadres, no uno.
*
* Iberoamérica son dos orillas y en medio hay un océano: con un solo encuadre,
* la mitad del dibujo es Atlántico vacío y todo lo demás queda diminuto. Se
* calcula uno para América y otro para la Península, y el mapa pinta el segundo
* en un recuadro —la misma solución que usa cualquier mapa de España con
* Canarias—.
*/
const IBERIA = ['es', 'pt'];
const MARGEN = 10;
function encuadrar(codigos, soloPrincipal = false) {
const xs = [];
const ys = [];
for (const c of codigos) {
const t = tamano(soloPrincipal ? principal[c] : contorno[c]);
xs.push(...t.xs);
ys.push(...t.ys);
}
const x0 = Math.min(...xs) - MARGEN;
const y0 = Math.min(...ys) - MARGEN;
return [x0, y0, Math.max(...xs) - x0 + MARGEN, Math.max(...ys) - y0 + MARGEN]
.map((n) => n.toFixed(1))
.join(' ');
}
const MARGEN = 10;
const x0 = Math.min(...xs) - MARGEN;
const y0 = Math.min(...ys) - MARGEN;
const encuadre = [x0, y0, Math.max(...xs) - x0 + MARGEN, Math.max(...ys) - y0 + MARGEN]
.map((n) => n.toFixed(1))
.join(' ');
const encuadre = encuadrar(PAISES.filter((c) => !IBERIA.includes(c)));
/*
* El inserto encuadra solo la parte continental. Con Canarias dentro, el
* rectángulo se estiraba mil kilómetros al suroeste y la Península quedaba del
* tamaño de una mota. Las islas se siguen dibujando; lo que cambia es el
* encuadre.
*/
const encuadreIberia = encuadrar(IBERIA, true);
const cuerpo = PAISES.map(
(c) =>
`\t{ codigo: '${c.toUpperCase()}', centro: [${centro[c].join(', ')}], d: '${contorno[c]}' }`
`\t{ codigo: '${c.toUpperCase()}', nombre: '${NOMBRES[c]}', centro: [${centro[c].join(', ')}], d: '${contorno[c]}' }`
).join(',\n');
fs.writeFileSync(
@ -168,15 +318,23 @@ fs.writeFileSync(
export interface PaisDelMapa {
/** ISO 3166-1 alfa-2, como en la tabla \`pais\`. */
codigo: string;
/** En español. Lo lleva el mapa porque dibuja países que aún no están en la base. */
nombre: string;
/** Un punto dentro del país, para colgar de él lo que haya que pulsar. */
centro: [number, number];
/** El contorno, con todas sus islas en un solo trazado. */
d: string;
}
/** El encuadre justo de los veinte países, no el del mapa original. */
/** El encuadre de la orilla americana. */
export const ENCUADRE = '${encuadre}';
/** El de la Península, que va en su propio recuadro. */
export const ENCUADRE_IBERIA = '${encuadreIberia}';
/** Quiénes van en ese recuadro. */
export const IBERIA = ['ES', 'PT'];
export const PAISES: PaisDelMapa[] = [
${cuerpo}
];
@ -187,4 +345,5 @@ const kb = (fs.statSync(DESTINO).size / 1024).toFixed(0);
console.log(` países ${PAISES.length}`);
console.log(` descartados ${descartados} trazados por debajo de ${MINIMO} unidades`);
console.log(` encuadre ${encuadre}`);
console.log(` — península ${encuadreIberia}`);
console.log(` tamaño ${kb} KB`);

@ -52,6 +52,18 @@
--c-accent-brillo: oklch(0.94 0.095 96);
--c-accent-sombra: oklch(0.63 0.13 72);
/*
* 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.
*/
--c-dato: oklch(0.78 0.13 192);
--c-dato-tenue: oklch(0.52 0.085 200);
--c-danger: oklch(0.72 0.16 22);
--c-focus: oklch(0.84 0.12 88);
@ -199,6 +211,10 @@
--c-accent-brillo: oklch(0.9 0.1 92);
--c-accent-sombra: oklch(0.6 0.12 74);
/* En claro se invierten: el dato pintado tiene que ser oscuro sobre papel. */
--c-dato: oklch(0.52 0.09 200);
--c-dato-tenue: oklch(0.82 0.045 200);
--c-danger: oklch(0.5 0.17 25);
--c-focus: oklch(0.5 0.13 264);
}

@ -11,18 +11,18 @@
* SVG, no un `<path>` con un `onclick`: así entra en el orden de tabulación
* y se anuncia con su nombre.
*/
import { ENCUADRE, PAISES } from '$lib/mapa/iberoamerica';
import { ENCUADRE, ENCUADRE_IBERIA, IBERIA, PAISES } from '$lib/mapa/iberoamerica';
import type { GeneroEnElMapa } from '$lib/server/taller';
interface Props {
generos: GeneroEnElMapa[];
/** El país elegido, en ISO alfa-2. Vacío si no hay ninguno. */
pais: string;
paisElegido: string;
/** Se llama al pulsar un país; el mismo otra vez lo deselecciona. */
alElegir: (codigo: string) => void;
}
let { generos, pais, alElegir }: Props = $props();
let { generos, paisElegido, alElegir }: Props = $props();
/** Lo que tiene cada país, para saber cómo pintarlo y qué anunciar. */
const porPais = $derived.by(() => {
@ -38,6 +38,56 @@
return mapa;
});
/*
* La lista de al lado: España primero y el resto por orden alfabético. Es la
* misma información que el mapa, en la forma en que se busca un país cuando
* ya se sabe cuál —y la única que sirve si el mapa no se puede usar—.
*/
const enLista = $derived.by(() => {
const resto = PAISES.filter((p) => p.codigo !== 'ES').sort((a, b) =>
a.nombre.localeCompare(b.nombre, 'es')
);
const espana = PAISES.find((p) => p.codigo === 'ES');
return espana ? [espana, ...resto] : resto;
});
/** El ancho de un encuadre, para medir con él lo que se dibuja encima. */
const anchoDe = (encuadre: string) => Number(encuadre.split(' ')[2]);
const enAmerica = PAISES.filter((p) => !IBERIA.includes(p.codigo));
const enIberia = PAISES.filter((p) => IBERIA.includes(p.codigo));
/*
* El recuadro de la Península, colocado a mano dentro del mismo lienzo.
*
* Se probó con un `<svg>` anidado, que es lo que parece corresponder, y no
* pintaba nada: sus porcentajes se miden contra el viewport y no contra el
* `viewBox` del padre. Con una traslación y una escala calculadas de los dos
* encuadres, el sitio es exactamente el que se pide.
*/
const numeros = (encuadre: string) => encuadre.split(' ').map(Number);
const inserto = (() => {
const [ax, ay, aAncho] = numeros(ENCUADRE);
const [ix, iy, iAncho, iAlto] = numeros(ENCUADRE_IBERIA);
const escala = (aAncho * 0.44) / iAncho;
const margen = 8;
const x = ax + aAncho - iAncho * escala - margen;
const y = ay + margen;
return {
escala,
transform: `translate(${(x - ix * escala).toFixed(1)} ${(y - iy * escala).toFixed(1)}) scale(${escala.toFixed(3)})`,
marco: {
x: x.toFixed(1),
y: y.toFixed(1),
ancho: (iAncho * escala).toFixed(1),
alto: (iAlto * escala).toFixed(1)
}
};
})();
/** Lo que lee un lector de pantalla y lo que sale al pasar el ratón. */
function resumen(codigo: string): string {
const suyo = porPais[codigo];
@ -50,46 +100,144 @@
}
</script>
<div class="mapa">
<svg viewBox={ENCUADRE} role="group" aria-label="Géneros por país">
{#each PAISES as p (p.codigo)}
<div class="conjunto">
<div class="mapa">
<svg viewBox={ENCUADRE} role="group" aria-label="Géneros por país">
{#each enAmerica as p (p.codigo)}
{@render pais(p, anchoDe(ENCUADRE))}
{/each}
</svg>
<!--
La Península, en su propio lienzo y colocada sobre el Atlántico norte.
Iberoamérica son dos orillas con un océano en medio: a escala real, la
mitad del dibujo sería agua vacía. Como recuadro dentro del lienzo de
América acababa encima de Venezuela, y encima de la lista de países no
pinta nada: no es un índice, es mapa. Ahí arriba no tapa a nadie.
-->
<svg
class="peninsula"
viewBox={ENCUADRE_IBERIA}
role="group"
aria-label="Géneros en la Península"
>
{#each enIberia as p (p.codigo)}
{@render pais(p, anchoDe(ENCUADRE_IBERIA))}
{/each}
</svg>
</div>
<!-- Cuántos géneros tiene cada país, y cuántos nacieron ahí. -->
<ul class="listado">
{#each enLista as p (p.codigo)}
{@const suyo = porPais[p.codigo]}
{#if suyo}
<!--
El contorno pinta; el punto de encima es lo que se pulsa y lo que
entra en el orden de tabulación. Hacen falta los dos: Puerto Rico
mide cuatro píxeles y Cuba es tan alargada que apuntar a su centro
es apuntar al mar.
-->
<g
class="pais"
class:cuna={suyo.cuna.length > 0}
class:elegido={pais === p.codigo}
role="button"
tabindex="0"
aria-pressed={pais === p.codigo}
aria-label={resumen(p.codigo)}
<li>
<button
type="button"
class="fila"
class:sin={!suyo}
class:elegido={paisElegido === p.codigo}
aria-pressed={paisElegido === p.codigo}
disabled={!suyo}
onclick={() => alElegir(p.codigo)}
onkeydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
alElegir(p.codigo);
}
}}
>
<title>{resumen(p.codigo)}</title>
<path class="tierra" d={p.d} />
<circle class="punto" cx={p.centro[0]} cy={p.centro[1]} r="9" />
</g>
{:else}
<!-- Sin géneros: se dibuja para que el mapa sea un mapa, y no se pulsa. -->
<path class="pais vacio" d={p.d} aria-hidden="true" />
{/if}
<span class="nombre">{p.nombre}</span>
{#if suyo}
<span class="cuantos">
{#if suyo.cuna.length > 0}
<span class="cuna" title="{suyo.cuna.length} nacieron aquí">{suyo.cuna.length}</span
>
{/if}
{#if suyo.adoptados.length > 0}
<span class="adoptados" title="{suyo.adoptados.length} adoptados"
>{suyo.adoptados.length}</span
>
{/if}
</span>
{/if}
</button>
</li>
{/each}
</svg>
</ul>
</div>
{#snippet pais(p: (typeof PAISES)[number], anchoDelLienzo: number)}
{@const suyo = porPais[p.codigo]}
{#if suyo}
<!--
El contorno pinta; el punto de encima es lo que se pulsa y lo que entra
en el orden de tabulación. Hacen falta los dos: Puerto Rico mide cuatro
píxeles y Cuba es tan alargada que apuntar a su centro es apuntar al mar.
-->
<g
class="pais"
class:cuna={suyo.cuna.length > 0}
class:elegido={paisElegido === p.codigo}
role="button"
tabindex="0"
aria-pressed={paisElegido === p.codigo}
aria-label={resumen(p.codigo)}
onclick={() => alElegir(p.codigo)}
onkeydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
alElegir(p.codigo);
}
}}
>
<title>{resumen(p.codigo)}</title>
<path class="tierra" d={p.d} />
<!--
El radio se mide contra el ancho del lienzo, no en unidades fijas: los
dos mapas tienen encuadres muy distintos —seiscientas unidades América,
ciento diez la Península— y con un radio fijo el punto de España salía
del tamaño de Castilla.
-->
<circle class="punto" cx={p.centro[0]} cy={p.centro[1]} r={anchoDelLienzo * 0.014} />
</g>
{:else}
<!--
Sin géneros todavía. Se dibuja igual y con contorno propio: Brasil o
Bolivia no tienen ficha aún, pero son Iberoamérica, y un país que se
funde con el fondo parece que falta del mapa.
-->
<path class="vacio" d={p.d} aria-hidden="true">
<title>{p.codigo}</title>
</path>
{/if}
{/snippet}
<style>
/*
* El mapa y la lista se reparten la fila. La lista no es decoración: es cómo
* se llega a un país cuando ya se sabe cuál, y cómo se llega si el mapa no
* se puede usar.
*/
.conjunto {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
gap: var(--sp-5);
align-items: start;
}
/*
* La Península va sobre el mapa de América, en el hueco del Atlántico
* 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.
*/
.mapa {
position: relative;
}
.peninsula {
position: absolute;
top: 0;
right: 0;
width: 34%;
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
@ -100,6 +248,62 @@
place-items: center;
}
.listado {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--fs-sm);
line-height: 1.5;
}
.fila {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
width: 100%;
padding: 0.15rem 0.15rem 0.15rem 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.fila:hover:not(.sin) .nombre,
.fila:focus-visible:not(.sin) .nombre {
color: var(--c-accent);
}
/* Sin géneros todavía: se lee, pero no promete una página. */
.fila.sin {
color: var(--c-text-muted);
cursor: default;
}
.cuantos {
display: inline-flex;
gap: 0.35rem;
font-family: var(--font-mono);
font-size: var(--fs-xs);
}
/* Los mismos dos tonos que el mapa: nacidos y adoptados. */
.cuna {
color: var(--c-dato);
}
.adoptados {
color: var(--c-dato-tenue);
}
@media (max-width: 52rem) {
.conjunto {
grid-template-columns: minmax(0, 1fr);
}
}
svg {
display: block;
width: auto;
@ -117,8 +321,13 @@
}
/* Un país sin géneros no se pulsa, así que tampoco se ilumina. */
/*
* Se ve como país: mismo relleno que el fondo alto y su propio contorno. Con
* el relleno a medias parecía que Brasil no estaba en el mapa.
*/
.vacio {
fill: color-mix(in oklab, var(--c-bg-raised) 55%, transparent);
fill: var(--c-bg-raised);
stroke: color-mix(in oklab, var(--c-text) 22%, transparent);
pointer-events: none;
}
@ -129,23 +338,33 @@
/*
* Tres estados y no dos: donde nació algo pesa más que donde se adoptó, y
* esa diferencia es lo que el mapa cuenta mejor que una lista.
*
* En verdemar y no en dorado mezclado con el fondo, que daba un marrón
* sucio. El dorado se reserva para el país elegido: así el color del dato y
* el de la acción no son el mismo con dos brillos.
*/
.pais .tierra {
fill: color-mix(in oklab, var(--c-accent) 22%, var(--c-bg-raised));
fill: var(--c-dato-tenue);
}
.pais.cuna .tierra {
fill: color-mix(in oklab, var(--c-accent) 55%, var(--c-bg-raised));
fill: var(--c-dato);
}
.pais:hover .tierra,
.pais:focus-visible .tierra {
fill: var(--c-accent);
fill: color-mix(in oklab, var(--c-dato) 80%, var(--c-text));
}
/*
* El elegido, en el color del texto: el contraste máximo que hay en la
* paleta, y el único que se distingue de los otros dos verdes en los dos
* temas. Con un tercer tono del mismo verdemar no se notaba cuál estaba
* elegido, y con el dorado salía marrón.
*/
.pais.elegido .tierra {
fill: var(--c-accent);
stroke: var(--c-text);
fill: var(--c-text);
stroke: var(--c-bg);
stroke-width: 2;
}
@ -169,7 +388,12 @@
}
.pais.elegido .punto {
fill: var(--c-text);
fill: var(--c-bg);
}
.fila.elegido .nombre {
color: var(--c-text);
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {

File diff suppressed because one or more lines are too long

@ -76,7 +76,7 @@
<MapaDeGeneros
generos={data.generos}
{pais}
paisElegido={pais}
alElegir={(codigo) => (pais = pais === codigo ? '' : codigo)}
/>

Loading…
Cancel
Save

Powered by TurnKey Linux.