From 3e9f2af4afe8800ba78349d89f52c416c8bdb025 Mon Sep 17 00:00:00 2001 From: hacklab Date: Wed, 14 Oct 2026 12:56:17 +0200 Subject: [PATCH] =?UTF-8?q?Farola=20con=20la=20luz=20ondeando=20como=20una?= =?UTF-8?q?=20bandera;=20el=20dibujo=20a=20todo=20lo=20ancho=20y=20m=C3=A1?= =?UTF-8?q?s=20bajo=20en=20m=C3=B3vil?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- docs/marca/simbolo-naranja.svg | 2 +- docs/marca/simbolo-negativo.svg | 2 +- docs/marca/simbolo.svg | 2 +- sites/takethestreet/css/web.css | 8 ++++---- sites/takethestreet/favicon.svg | 2 +- sites/takethestreet/img/simbolo-negativo.svg | 2 +- sites/takethestreet/img/simbolo.svg | 2 +- sites/tomalacalle/css/web.css | 8 ++++---- sites/tomalacalle/favicon.svg | 2 +- sites/tomalacalle/img/simbolo-negativo.svg | 2 +- sites/tomalacalle/img/simbolo.svg | 2 +- tools/farola.py | 20 ++++++++++++++------ 13 files changed, 32 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 6113e6c..e8ce9b2 100644 --- a/README.md +++ b/README.md @@ -256,7 +256,7 @@ Tres piezas, cada una con su uso: ![Hoja de marca](docs/marca/hoja.png) -- **Símbolo** (`docs/marca/simbolo*.svg`): una farola moderna dentro de un aro grueso, como un emblema de tienda de graffiti (en la línea del sello de Writers Madrid), con el cono de luz en naranja. Plano y rotundo, para que se lea en un favicon, una pegatina o un avatar. Versiones: positivo, negativo, sobre naranja y pegatina (círculo naranja). Se genera con `python3 tools/farola.py docs/marca`. +- **Símbolo** (`docs/marca/simbolo*.svg`): una farola moderna dentro de un aro grueso, como un emblema de tienda de graffiti (en la línea del sello de Writers Madrid), con la luz en naranja, ondeando como las banderas del logo antifa. Plano y rotundo, para que se lea en un favicon, una pegatina o un avatar. Versiones: positivo, negativo, sobre naranja y pegatina (círculo naranja). Se genera con `python3 tools/farola.py docs/marca`. - **Logotipo** (`docs/marca/logotipo*.svg`): «TAKE THE STREET» en **Grindy Brush**, todo en negro (o en blanco sobre negro). Va convertido a trazados, así que no hace falta la fuente. Hay versión en una línea y en dos. - **Firma**: símbolo + logotipo. Es lo que va arriba a la izquierda de la web. - **Ilustración** (`docs/calle.svg`): la imagen principal de la portada, nunca en la cabecera. Ver el apartado 6. diff --git a/docs/marca/simbolo-naranja.svg b/docs/marca/simbolo-naranja.svg index 367abc9..6314460 100644 --- a/docs/marca/simbolo-naranja.svg +++ b/docs/marca/simbolo-naranja.svg @@ -1 +1 @@ - + diff --git a/docs/marca/simbolo-negativo.svg b/docs/marca/simbolo-negativo.svg index 947687f..ef891ec 100644 --- a/docs/marca/simbolo-negativo.svg +++ b/docs/marca/simbolo-negativo.svg @@ -1 +1 @@ - + diff --git a/docs/marca/simbolo.svg b/docs/marca/simbolo.svg index 368f8dd..f5e53ee 100644 --- a/docs/marca/simbolo.svg +++ b/docs/marca/simbolo.svg @@ -1 +1 @@ - + diff --git a/sites/takethestreet/css/web.css b/sites/takethestreet/css/web.css index dc0d617..c771a4c 100644 --- a/sites/takethestreet/css/web.css +++ b/sites/takethestreet/css/web.css @@ -29,11 +29,11 @@ img { max-width: 100%; } .idiomas a { border: var(--bd); border-radius: 6px; padding: 4px 9px 2px; text-decoration: none; box-shadow: 3px 3px 0 var(--fg); } .idiomas a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: 3px 3px 0 var(--neon); } -.portada { padding: 0 20px 24px; border-bottom: var(--bd); text-align: center; overflow: hidden; } +.portada { padding: 0 0 24px; border-bottom: var(--bd); text-align: center; overflow: hidden; } h1 { margin: 0; font: 400 clamp(52px, 8vw, 112px)/.92 var(--bt); text-transform: uppercase; } .c-techo { color: var(--techo); } .c-tierra { color: var(--tierra); } .c-fronteras { color: #c99500; } .c-paz { color: var(--paz); } -.calle { display: block; width: 100%; max-width: 1200px; height: auto; margin: 10px auto 0; } -.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; } +.calle { display: block; width: 100%; height: clamp(220px, 36vw, 600px); object-fit: cover; object-position: 65% 60%; margin: 0; } +.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; padding: 0 16px; } .bt { font: 400 26px/1 var(--bt); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border: var(--bd); border-radius: 8px; padding: 12px 22px 9px; box-shadow: 4px 4px 0 var(--fg); } .bt:first-child { background: var(--fg); color: var(--bg); box-shadow: 4px 4px 0 var(--neon); } .bt:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--neon); } @@ -125,7 +125,7 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp .cab .simbolo img { height: 54px; } .firma .logotipo { height: auto; width: 100%; max-height: 40px; } .idiomas { grid-column: 1 / -1; justify-self: center; } - .calle { width: 150%; max-width: none; margin-left: -25%; } + .calle { height: 210px; object-position: 72% 60%; } .ejes, .principios { grid-template-columns: minmax(0, 1fr); } .paises { gap: 14px; } .pais p { overflow-wrap: anywhere; } diff --git a/sites/takethestreet/favicon.svg b/sites/takethestreet/favicon.svg index 368f8dd..f5e53ee 100644 --- a/sites/takethestreet/favicon.svg +++ b/sites/takethestreet/favicon.svg @@ -1 +1 @@ - + diff --git a/sites/takethestreet/img/simbolo-negativo.svg b/sites/takethestreet/img/simbolo-negativo.svg index 947687f..ef891ec 100644 --- a/sites/takethestreet/img/simbolo-negativo.svg +++ b/sites/takethestreet/img/simbolo-negativo.svg @@ -1 +1 @@ - + diff --git a/sites/takethestreet/img/simbolo.svg b/sites/takethestreet/img/simbolo.svg index 368f8dd..f5e53ee 100644 --- a/sites/takethestreet/img/simbolo.svg +++ b/sites/takethestreet/img/simbolo.svg @@ -1 +1 @@ - + diff --git a/sites/tomalacalle/css/web.css b/sites/tomalacalle/css/web.css index dc0d617..c771a4c 100644 --- a/sites/tomalacalle/css/web.css +++ b/sites/tomalacalle/css/web.css @@ -29,11 +29,11 @@ img { max-width: 100%; } .idiomas a { border: var(--bd); border-radius: 6px; padding: 4px 9px 2px; text-decoration: none; box-shadow: 3px 3px 0 var(--fg); } .idiomas a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: 3px 3px 0 var(--neon); } -.portada { padding: 0 20px 24px; border-bottom: var(--bd); text-align: center; overflow: hidden; } +.portada { padding: 0 0 24px; border-bottom: var(--bd); text-align: center; overflow: hidden; } h1 { margin: 0; font: 400 clamp(52px, 8vw, 112px)/.92 var(--bt); text-transform: uppercase; } .c-techo { color: var(--techo); } .c-tierra { color: var(--tierra); } .c-fronteras { color: #c99500; } .c-paz { color: var(--paz); } -.calle { display: block; width: 100%; max-width: 1200px; height: auto; margin: 10px auto 0; } -.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; } +.calle { display: block; width: 100%; height: clamp(220px, 36vw, 600px); object-fit: cover; object-position: 65% 60%; margin: 0; } +.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; padding: 0 16px; } .bt { font: 400 26px/1 var(--bt); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border: var(--bd); border-radius: 8px; padding: 12px 22px 9px; box-shadow: 4px 4px 0 var(--fg); } .bt:first-child { background: var(--fg); color: var(--bg); box-shadow: 4px 4px 0 var(--neon); } .bt:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--neon); } @@ -125,7 +125,7 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp .cab .simbolo img { height: 54px; } .firma .logotipo { height: auto; width: 100%; max-height: 40px; } .idiomas { grid-column: 1 / -1; justify-self: center; } - .calle { width: 150%; max-width: none; margin-left: -25%; } + .calle { height: 210px; object-position: 72% 60%; } .ejes, .principios { grid-template-columns: minmax(0, 1fr); } .paises { gap: 14px; } .pais p { overflow-wrap: anywhere; } diff --git a/sites/tomalacalle/favicon.svg b/sites/tomalacalle/favicon.svg index 368f8dd..f5e53ee 100644 --- a/sites/tomalacalle/favicon.svg +++ b/sites/tomalacalle/favicon.svg @@ -1 +1 @@ - + diff --git a/sites/tomalacalle/img/simbolo-negativo.svg b/sites/tomalacalle/img/simbolo-negativo.svg index 947687f..ef891ec 100644 --- a/sites/tomalacalle/img/simbolo-negativo.svg +++ b/sites/tomalacalle/img/simbolo-negativo.svg @@ -1 +1 @@ - + diff --git a/sites/tomalacalle/img/simbolo.svg b/sites/tomalacalle/img/simbolo.svg index 368f8dd..f5e53ee 100644 --- a/sites/tomalacalle/img/simbolo.svg +++ b/sites/tomalacalle/img/simbolo.svg @@ -1 +1 @@ - + diff --git a/tools/farola.py b/tools/farola.py index 80e6fdf..5022cc7 100644 --- a/tools/farola.py +++ b/tools/farola.py @@ -1,21 +1,29 @@ import sys NAR, LUZ, INK, BL = "#f04e23", "#f45a1c", "#111", "#fff" -def onda(a, b, amp): +def ctrl(a, b, amp): (x0, y0), (x1, y1) = a, b dx, dy = x1 - x0, y1 - y0 L = (dx * dx + dy * dy) ** .5 px, py = -dy / L * amp, dx / L * amp - c1 = (x0 + dx / 3 + px, y0 + dy / 3 + py) - c2 = (x0 + dx * 2 / 3 - px, y0 + dy * 2 / 3 - py) - return f"C{c1[0]:.1f},{c1[1]:.1f} {c2[0]:.1f},{c2[1]:.1f} {x1},{y1}" + return (x0 + dx / 3 + px, y0 + dy / 3 + py), (x0 + dx * 2 / 3 - px, y0 + dy * 2 / 3 - py) + +def c(p1, p2, fin): + return f"C{p1[0]:.1f},{p1[1]:.1f} {p2[0]:.1f},{p2[1]:.1f} {fin[0]},{fin[1]}" + +def bandera(a, b, cc, d, amp, amp_b): + der = ctrl(b, cc, amp) + izq = ctrl(a, d, amp) + abajo = ctrl(cc, d, amp_b) + return (f"M{a[0]},{a[1]} H{b[0]} {c(der[0], der[1], cc)} {c(abajo[0], abajo[1], d)} " + f"{c(izq[1], izq[0], a)} Z") def farola(estilo="aro", ink=INK, luz=LUZ, fondo=None, papel=BL): bg = f'' if fondo else "" if estilo == "aro": defs = '' - cono = f'' - suelo = f'' + cono = f'' + suelo = "" poste = f'' cabeza = f'' aro = f''