Mapa «Dónde estamos» con cifras; botones en columna en móvil hacia el mapa, el panel y el contacto
This commit is contained in:
parent
27a4ba5ca1
commit
db898b9a42
13 changed files with 343 additions and 154 deletions
|
|
@ -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; }
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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; }
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue