Mapa «Dónde estamos» con cifras; botones en columna en móvil hacia el mapa, el panel y el contacto

README.md

@@ -53,13 +53,14 @@ Borrador para la asamblea en [`docs/ideario.md`](docs/ideario.md). Propuesta: **
 `sites/` tiene dos webs con el mismo diseño: `takethestreet/` (takethestreet.net, internacional) y `tomalacalle/` (tomalacalle.net, estatal). HTML y CSS, sin JavaScript, igual que acampada26s.net. El deck va aparte, en `deck.takethestreet.net`. La portada cuenta el ideario de arriba abajo:
 
 1. **Cabecera** en una línea: la farola a la izquierda, el logotipo en el centro como título (sin lema) y los idiomas a la derecha.
-2. **Dibujo** (el boceto 5, el cruce) y tres botones (Únete, Encuentra tu acampada, Difunde).
-3. **Síguelas**: un panel como el del deck, con el árbol de colectivos, una columna por acampada con sus cuentas de verdad y un mapa. Internacional en takethestreet.net y estatal en tomalacalle.net. En móvil va una acampada por fila.
-4. **Cuatro ejes**: una tarjeta por eje, con una piña de monigotes en su color (*Techo* naranja, *Tierra* verde, *Sin fronteras* amarillo, *Paz* azul). Debajo, la franja violeta de los feminismos.
-5. **Quiénes somos**: dos párrafos, de Sol a todas las luchas.
-6. **Acampadas**: por país en takethestreet.net y por territorio en tomalacalle.net, más «¿Y tu ciudad?».
-7. **Cómo nos organizamos**.
-8. **Difunde**: etiquetas y logos para descargar.
+2. **Dibujo** (el boceto 5, el cruce) y tres botones: Encuentra tu acampada (al mapa), Síguelas (al panel) y Monta una en tu ciudad (a cómo nos organizamos y el contacto). En móvil van en columna y a todo lo ancho.
+3. **Dónde estamos**: cifras (ciudades, países, desde el 26/09) y un mapa SVG sin JavaScript ni teselas de fuera, con base de Natural Earth. En tomalacalle.net, España con Canarias aparte; en takethestreet.net, Europa con Canarias e India aparte. La farola marca las acampadas, el círculo discontinuo las convocadas, el punto negro las grandes protestas y el gris las levantadas. Cada punto lleva a su tarjeta en «Acampadas».
+4. **Síguelas**: un panel como el del deck, con el árbol de colectivos, una columna por acampada con sus cuentas de verdad y un mapa. Internacional en takethestreet.net y estatal en tomalacalle.net. En móvil va una acampada por fila.
+5. **Cuatro ejes**: una tarjeta por eje, con una piña de monigotes en su color (*Techo* naranja, *Tierra* verde, *Sin fronteras* amarillo, *Paz* azul). Debajo, la franja violeta de los feminismos.
+6. **Quiénes somos**: dos párrafos, de Sol a todas las luchas.
+7. **Acampadas**: por país en takethestreet.net y por territorio en tomalacalle.net, más «¿Y tu ciudad?».
+8. **Cómo nos organizamos**, con el contacto para montar una acampada.
+9. **Difunde**: etiquetas y logos para descargar.
 
 En castellano, inglés, portugués, italiano y francés, en femenino genérico. takethestreet.net abre en inglés (`es/`, `pt/`, `it/`, `fr/`) y tomalacalle.net en castellano (`en/`, `pt/`, `it/`, `fr/`). El contacto de «¿Y tu ciudad?» es acampada26s@riseup.net. Los iconos de los ejes se generan con `python3 tools/ejes.py sites/<web>/img`.
 

sites/takethestreet/css/web.css

@@ -129,7 +129,36 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
   .ejes, .principios { grid-template-columns: minmax(0, 1fr); }
   .paises { gap: 14px; }
   .pais p { overflow-wrap: anywhere; }
-  .bt { font-size: 22px; }
   .bloque { padding: 32px 14px; }
   .intro p { font-size: 18px; }
 }
+
+.impacto { padding-top: 32px; }
+.cifras { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
+.cifras li { display: flex; align-items: baseline; gap: 8px; }
+.cifras b { font: 400 54px/1 var(--bt); color: var(--neon); }
+.cifras b a { text-decoration: none; }
+.cifras span { font: 20px/1.1 var(--bt); text-transform: uppercase; letter-spacing: .03em; max-width: 11em; }
+.impacto figure { margin: 0; }
+.impacto-mapa { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: 10px; box-shadow: 6px 6px 0 var(--fg); }
+.impacto-mapa text { font: 600 14px var(--txt); fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
+.impacto-mapa .rot { font: 400 14px var(--bt); letter-spacing: .05em; text-transform: uppercase; }
+.impacto-mapa a:hover use, .impacto-mapa a:focus use { transform-box: fill-box; transform-origin: center; transform: scale(1.3); }
+.impacto figcaption { max-width: 900px; margin: 14px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 15px; }
+.impacto figcaption p { margin: 0; }
+.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
+.leyenda li { display: flex; align-items: center; gap: 6px; }
+.impacto .base { max-width: 900px; margin: 6px auto 0; font-size: 13px; opacity: .75; }
+.pais:target { outline: 3px solid var(--neon); outline-offset: 6px; border-radius: 4px; }
+.contacto { margin: 22px 0 0; border: var(--bd); border-left: 14px solid var(--neon); border-radius: 10px; padding: 10px 16px; }
+@media (max-width: 640px) {
+  .acciones { flex-direction: column; align-items: stretch; gap: 14px; max-width: 460px; margin: 18px auto 0; }
+  .bt { display: block; font-size: 30px; padding: 18px 16px 15px; text-align: center; }
+  .idiomas { gap: 8px; font-size: 22px; }
+  .idiomas a { padding: 8px 12px 6px; }
+  .cifras { gap: 8px 18px; }
+  .cifras b { font-size: 44px; }
+  .cifras span { font-size: 17px; }
+  .impacto-mapa { box-shadow: 4px 4px 0 var(--fg); }
+  .impacto-mapa text { font-size: 19px; }
+}

sites/tomalacalle/css/web.css

@@ -129,7 +129,36 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp
   .ejes, .principios { grid-template-columns: minmax(0, 1fr); }
   .paises { gap: 14px; }
   .pais p { overflow-wrap: anywhere; }
-  .bt { font-size: 22px; }
   .bloque { padding: 32px 14px; }
   .intro p { font-size: 18px; }
 }
+
+.impacto { padding-top: 32px; }
+.cifras { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
+.cifras li { display: flex; align-items: baseline; gap: 8px; }
+.cifras b { font: 400 54px/1 var(--bt); color: var(--neon); }
+.cifras b a { text-decoration: none; }
+.cifras span { font: 20px/1.1 var(--bt); text-transform: uppercase; letter-spacing: .03em; max-width: 11em; }
+.impacto figure { margin: 0; }
+.impacto-mapa { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: 10px; box-shadow: 6px 6px 0 var(--fg); }
+.impacto-mapa text { font: 600 14px var(--txt); fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
+.impacto-mapa .rot { font: 400 14px var(--bt); letter-spacing: .05em; text-transform: uppercase; }
+.impacto-mapa a:hover use, .impacto-mapa a:focus use { transform-box: fill-box; transform-origin: center; transform: scale(1.3); }
+.impacto figcaption { max-width: 900px; margin: 14px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 15px; }
+.impacto figcaption p { margin: 0; }
+.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
+.leyenda li { display: flex; align-items: center; gap: 6px; }
+.impacto .base { max-width: 900px; margin: 6px auto 0; font-size: 13px; opacity: .75; }
+.pais:target { outline: 3px solid var(--neon); outline-offset: 6px; border-radius: 4px; }
+.contacto { margin: 22px 0 0; border: var(--bd); border-left: 14px solid var(--neon); border-radius: 10px; padding: 10px 16px; }
+@media (max-width: 640px) {
+  .acciones { flex-direction: column; align-items: stretch; gap: 14px; max-width: 460px; margin: 18px auto 0; }
+  .bt { display: block; font-size: 30px; padding: 18px 16px 15px; text-align: center; }
+  .idiomas { gap: 8px; font-size: 22px; }
+  .idiomas a { padding: 8px 12px 6px; }
+  .cifras { gap: 8px 18px; }
+  .cifras b { font-size: 44px; }
+  .cifras span { font-size: 17px; }
+  .impacto-mapa { box-shadow: 4px 4px 0 var(--fg); }
+  .impacto-mapa text { font-size: 19px; }
+}