hacklab/takethestreet
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
hacklab 2026-10-14 14:31:59 +02:00
parent 27a4ba5ca1
commit db898b9a42
13 changed files with 343 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

31
sites/takethestreet/css/web.css
View file

@ -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; }
}