diff --git a/README.md b/README.md index 6295a4b..a874f5a 100644 --- a/README.md +++ b/README.md @@ -51,9 +51,9 @@ 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**: la firma grande y centrada como título, sin lema. -2. **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. -3. **Dibujo** de la plaza y tres botones (Únete, Encuentra tu acampada, Difunde). +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?». @@ -255,7 +255,7 @@ Tres piezas, cada una con su uso: ![Hoja de marca](docs/marca/hoja.png) -- **Símbolo** (`docs/marca/simbolo*.svg`): una farola moderna que alumbra hacia abajo con dos rayos de luz entrelazados, naranja y amarillo. Es la luz que se queda encendida en la plaza. Se genera con `python3 tools/farola.py docs/marca`. Sirve para el favicon, los avatares de redes y las pegatinas, y se lee hasta a 16 px. Tres versiones: positivo, negativo y sobre naranja. +- **Símbolo** (`docs/marca/simbolo*.svg`): una farola al estilo de los *throw-ups* de los writers: relleno naranja, contorno negro grueso, brillos blancos, chorreones y destellos en la luz. Es la luz que se queda encendida en la plaza. Se genera con `python3 tools/farola.py docs/marca`. Sirve para el favicon, los avatares de redes y las pegatinas, y se lee hasta a 16 px. Tres versiones: positivo, negativo y sobre naranja. - **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. @@ -274,7 +274,7 @@ Grindy Brush es una versión demo **solo para uso personal**. Antes de usar el l ## 6. Dibujo -En la web va **la plaza** (`docs/plaza.svg`): el cruce del boceto 5 se abre en una plaza llena de gente, con tiendas, farolas y gente que entra por las cuatro calles. Es el mismo fichero copiado a `sites//img/calle.svg`. +En la web va **el boceto 5** (el cruce), copiado a `sites//img/calle.svg`. **La plaza** (`docs/plaza.svg`) es el mismo cruce abierto en una plaza llena de gente, con tiendas y farolas. La plaza y los bocetos 6 a 10 se generan con `python3 tools/plazas.py docs/bocetos docs/plaza.svg`. diff --git a/sites/takethestreet/css/web.css b/sites/takethestreet/css/web.css index c85a854..a3fbc45 100644 --- a/sites/takethestreet/css/web.css +++ b/sites/takethestreet/css/web.css @@ -19,16 +19,17 @@ body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 var(- a { color: inherit; } img { max-width: 100%; } -.cab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px 22px; } +.cab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 10px 24px; } +.cab .simbolo { justify-self: start; line-height: 0; } +.cab .simbolo img { height: 92px; } .cab h1 { margin: 0; line-height: 0; } -.firma { display: flex; align-items: flex-end; justify-content: center; gap: 18px; } -.firma .simbolo { height: 120px; } -.firma .logotipo { height: 78px; margin-bottom: 6px; } -.idiomas { align-self: flex-end; display: flex; gap: 6px; font: 20px/1 var(--bt); letter-spacing: .04em; } +.firma { display: block; line-height: 0; } +.firma .logotipo { height: 72px; } +.idiomas { justify-self: end; display: flex; gap: 6px; font: 20px/1 var(--bt); letter-spacing: .04em; } .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: 24px 20px 24px; border-top: var(--bd); border-bottom: var(--bd); text-align: center; overflow: hidden; } +.portada { padding: 0 20px 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; } @@ -72,7 +73,7 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp .pie { border-top: var(--bd); padding: 18px 20px; text-align: center; font-size: 14px; } .pie p { margin: 4px 0; } -.panel { padding-top: 10px; border-bottom: 0; } +.panel { padding-top: 32px; } .panel > p { margin: 0 0 14px; } .tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; font: 20px var(--bt); letter-spacing: .03em; } .tags span { border: 2px dashed var(--fg); padding: 1px 8px; } @@ -119,11 +120,10 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp .redes { gap: 8px; } .red { font-size: 18px; padding: 7px 10px 5px; } .mapa { font-size: 15px; } - .cab { padding: 10px 12px 16px; } - .idiomas { align-self: center; } - .firma { gap: 10px; } - .firma .simbolo { height: 56px; } - .firma .logotipo { height: 32px; margin-bottom: 3px; } + .cab { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px 14px; } + .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%; } .ejes, .principios { grid-template-columns: minmax(0, 1fr); } .paises { gap: 14px; } diff --git a/sites/takethestreet/es/index.html b/sites/takethestreet/es/index.html index df64736..f6d5cbd 100644 --- a/sites/takethestreet/es/index.html +++ b/sites/takethestreet/es/index.html @@ -15,11 +15,21 @@
+ +

Take the Street

-

Take the Street

+
+ Gente de colores llega por dos calles y llena el cruce + +
+

Síguelas

Cada acampada habla con su propia voz. Aquí están sus cuentas.

@@ -62,14 +72,6 @@
-
- Una plaza llena de gente de colores y tiendas de campaña - -

Cuatro ejes

diff --git a/sites/takethestreet/fr/index.html b/sites/takethestreet/fr/index.html index 7a3dbff..b2a3970 100644 --- a/sites/takethestreet/fr/index.html +++ b/sites/takethestreet/fr/index.html @@ -15,11 +15,21 @@
+ +

Take the Street

-

Take the Street

+
+ Des gens en couleurs arrivent par deux rues et remplissent le carrefour + +
+

Suis-les

Chaque campement parle de sa propre voix. Voici leurs comptes.

@@ -62,14 +72,6 @@
-
- Une place pleine de monde en couleurs et de tentes - -

Quatre axes

diff --git a/sites/takethestreet/img/calle.svg b/sites/takethestreet/img/calle.svg index 5625899..1666765 100644 --- a/sites/takethestreet/img/calle.svg +++ b/sites/takethestreet/img/calle.svg @@ -8,6 +8,4 @@ - - - + diff --git a/sites/takethestreet/index.html b/sites/takethestreet/index.html index 6190e0f..e68815a 100644 --- a/sites/takethestreet/index.html +++ b/sites/takethestreet/index.html @@ -15,11 +15,21 @@
+ +

Take the Street

-

Take the Street

+
+ Colourful people pour in from two streets and fill the crossing + +
+

Follow them

Each camp speaks with its own voice. Here are their accounts.

@@ -62,14 +72,6 @@
-
- A square full of colourful people and tents - -

Four axes

diff --git a/sites/takethestreet/it/index.html b/sites/takethestreet/it/index.html index b0ebbb4..64a0976 100644 --- a/sites/takethestreet/it/index.html +++ b/sites/takethestreet/it/index.html @@ -15,11 +15,21 @@
+ +

Take the Street

-

Take the Street

+
+ Gente colorata arriva da due strade e riempie l'incrocio + +
+

Seguile

Ogni accampata parla con la propria voce. Ecco i loro account.

@@ -62,14 +72,6 @@
-
- Una piazza piena di gente colorata e di tende - -

Quattro assi

diff --git a/sites/takethestreet/pt/index.html b/sites/takethestreet/pt/index.html index 7e5e2ee..4fc436b 100644 --- a/sites/takethestreet/pt/index.html +++ b/sites/takethestreet/pt/index.html @@ -15,11 +15,21 @@
+ +

Take the Street

-

Take the Street

+
+ Gente colorida chega por duas ruas e enche o cruzamento + +
+

Segue-as

Cada acampada fala com a sua própria voz. Aqui estão as suas contas.

@@ -62,14 +72,6 @@
-
- Uma praça cheia de gente colorida e de tendas - -

Quatro eixos

diff --git a/sites/tomalacalle/css/web.css b/sites/tomalacalle/css/web.css index c85a854..a3fbc45 100644 --- a/sites/tomalacalle/css/web.css +++ b/sites/tomalacalle/css/web.css @@ -19,16 +19,17 @@ body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 var(- a { color: inherit; } img { max-width: 100%; } -.cab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px 22px; } +.cab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 10px 24px; } +.cab .simbolo { justify-self: start; line-height: 0; } +.cab .simbolo img { height: 92px; } .cab h1 { margin: 0; line-height: 0; } -.firma { display: flex; align-items: flex-end; justify-content: center; gap: 18px; } -.firma .simbolo { height: 120px; } -.firma .logotipo { height: 78px; margin-bottom: 6px; } -.idiomas { align-self: flex-end; display: flex; gap: 6px; font: 20px/1 var(--bt); letter-spacing: .04em; } +.firma { display: block; line-height: 0; } +.firma .logotipo { height: 72px; } +.idiomas { justify-self: end; display: flex; gap: 6px; font: 20px/1 var(--bt); letter-spacing: .04em; } .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: 24px 20px 24px; border-top: var(--bd); border-bottom: var(--bd); text-align: center; overflow: hidden; } +.portada { padding: 0 20px 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; } @@ -72,7 +73,7 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp .pie { border-top: var(--bd); padding: 18px 20px; text-align: center; font-size: 14px; } .pie p { margin: 4px 0; } -.panel { padding-top: 10px; border-bottom: 0; } +.panel { padding-top: 32px; } .panel > p { margin: 0 0 14px; } .tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; font: 20px var(--bt); letter-spacing: .03em; } .tags span { border: 2px dashed var(--fg); padding: 1px 8px; } @@ -119,11 +120,10 @@ h3 { margin: 0; font: 400 34px/1 var(--bt); text-transform: uppercase; letter-sp .redes { gap: 8px; } .red { font-size: 18px; padding: 7px 10px 5px; } .mapa { font-size: 15px; } - .cab { padding: 10px 12px 16px; } - .idiomas { align-self: center; } - .firma { gap: 10px; } - .firma .simbolo { height: 56px; } - .firma .logotipo { height: 32px; margin-bottom: 3px; } + .cab { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px 14px; } + .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%; } .ejes, .principios { grid-template-columns: minmax(0, 1fr); } .paises { gap: 14px; } diff --git a/sites/tomalacalle/en/index.html b/sites/tomalacalle/en/index.html index 3f2c040..9dd5f47 100644 --- a/sites/tomalacalle/en/index.html +++ b/sites/tomalacalle/en/index.html @@ -15,11 +15,21 @@
+ +

Toma la calle

-

Toma la calle

+
+ Colourful people pour in from two streets and fill the crossing + +
+

Follow them

Each camp speaks with its own voice. Here are their accounts.

@@ -82,14 +92,6 @@
-
- A square full of colourful people and tents - -

Four axes

diff --git a/sites/tomalacalle/fr/index.html b/sites/tomalacalle/fr/index.html index 3c0f5db..272c59c 100644 --- a/sites/tomalacalle/fr/index.html +++ b/sites/tomalacalle/fr/index.html @@ -15,11 +15,21 @@
+ +

Toma la calle

-

Toma la calle

+
+ Des gens en couleurs arrivent par deux rues et remplissent le carrefour + +
+

Suis-les

Chaque campement parle de sa propre voix. Voici leurs comptes.

@@ -82,14 +92,6 @@
-
- Une place pleine de monde en couleurs et de tentes - -

Quatre axes

diff --git a/sites/tomalacalle/img/calle.svg b/sites/tomalacalle/img/calle.svg index 5625899..1666765 100644 --- a/sites/tomalacalle/img/calle.svg +++ b/sites/tomalacalle/img/calle.svg @@ -8,6 +8,4 @@ - - - + diff --git a/sites/tomalacalle/index.html b/sites/tomalacalle/index.html index 87d133a..08f2495 100644 --- a/sites/tomalacalle/index.html +++ b/sites/tomalacalle/index.html @@ -15,11 +15,21 @@
+ +

Toma la calle

-

Toma la calle

+
+ Gente de colores llega por dos calles y llena el cruce + +
+

Síguelas

Cada acampada habla con su propia voz. Aquí están sus cuentas.

@@ -82,14 +92,6 @@
-
- Una plaza llena de gente de colores y tiendas de campaña - -

Cuatro ejes

diff --git a/sites/tomalacalle/it/index.html b/sites/tomalacalle/it/index.html index 2d883fa..387b94c 100644 --- a/sites/tomalacalle/it/index.html +++ b/sites/tomalacalle/it/index.html @@ -15,11 +15,21 @@
+ +

Toma la calle

-

Toma la calle

+
+ Gente colorata arriva da due strade e riempie l'incrocio + +
+

Seguile

Ogni accampata parla con la propria voce. Ecco i loro account.

@@ -82,14 +92,6 @@
-
- Una piazza piena di gente colorata e di tende - -

Quattro assi

diff --git a/sites/tomalacalle/pt/index.html b/sites/tomalacalle/pt/index.html index 597b4ed..2dd79f1 100644 --- a/sites/tomalacalle/pt/index.html +++ b/sites/tomalacalle/pt/index.html @@ -15,11 +15,21 @@
+ +

Toma la calle

-

Toma la calle

+
+ Gente colorida chega por duas ruas e enche o cruzamento + +
+

Segue-as

Cada acampada fala com a sua própria voz. Aqui estão as suas contas.

@@ -82,14 +92,6 @@
-
- Uma praça cheia de gente colorida e de tendas - -

Quatro eixos