Rediseño de la enredadera y páginas nuevas

Portada
- La bajada del título pasa de un trazo de grosor constante a dos cintas
  trenzadas que se afilan, con la punta rematada en zarcillo. El viewBox es
  1000x72 y la caja mide el 7.2% del ancho de la rejilla, así que la escala
  sale uniforme y el dibujo no se deforma en ninguna pantalla.
- El giro de la esquina es una Bézier cúbica de salida vertical y la franja
  entra también vertical: radio mínimo 26 unidades en vez de 15.
- La franja entera pasa de trazos a cintas. La cola deja de ser un lazo y
  abre un bucle afilado que remata una espiral logarítmica verde, con centro
  y sentido derivados de la tangente del tallo.
- El rabillo de la hoja pasa de 24 a 42 unidades (recuadro 100x132) para que
  el limbo no cruce la raíz. Con él, el origen del giro (1.52%) y la etiqueta
  (62%), que se miden sobre ese alto.
- Letra de las etiquetas un 10% mayor. "La Enre" a 164 grados y tamaño 1.16;
  "Calendario", a 1.00.

Móvil
- El tallo pasa de una recta a una onda de coseno, media vuelta por celda, en
  un recuadro cuadrado para que la escala sea uniforme. Tres dibujos: la onda,
  su espejo para las celdas pares y el remate en espiral de la última.
- Las seis hojas entran sin deslizar de 320x568 en adelante: la celda reparte
  el alto disponible en vez de medir lo que mide la hoja, --ancho-hoja se mide
  contra las dos dimensiones y la cabecera baja de 104 a 68px.
- El abanico de REDES se recoloca (centro -0.25r, apertura 0.50r) para caber
  en el hueco nuevo.

Páginas
- colectivos.html, calendario.html, eventos.html, tatus.html, panel.html y
  404.html.
- El calendario semanal esconde la semana entera vacía que dibujaba de más.

Comprobado con qa.py: 0 fallos y 0 avisos en 150 mediciones (10 páginas por
15 pantallas), con contraste, foco, brotes y HTML roto incluidos.
This commit is contained in:
sito 2026-09-09 00:34:53 +02:00
parent f3823c4c53
commit 8bcaf1644c
17 changed files with 3812 additions and 1385 deletions

4
.gitignore vendored Normal file
View file

@ -0,0 +1,4 @@
# copias de trabajo
*.bak
index.css.puntuacion0

90
404.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esta hoja no existe · La Enredadera de Tetuán</title>
<meta name="description" content="La página que buscabas no está. Vuelve a la enredadera y sigue otra hoja.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="Esta hoja no existe · La Enredadera de Tetuán">
<meta property="og:description" content="La página que buscabas no está. Vuelve a la enredadera y sigue otra hoja.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Rock+Salt&display=swap">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<div class="container">
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="192" height="192">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/colectivos.html">Colectivos</a></li>
<li><a href="/calendario.html">Calendario</a></li>
<li><a href="/eventos.html">Eventos</a></li>
<li><a href="/subdir/campa.html">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html" aria-current="page">La Enre</a></li>
<li><a href="/subdir/contacto.html">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<main class="main">
<header class="cabecera">
<h1>Esta hoja no existe</h1>
<p class="sub">La rama que seguías se ha secado</p>
</header>
<a class="volver" href="/index.html">← Volver a la enredadera</a>
<article class="texto">
<h2>No está aquí</h2>
<p>La página que buscabas no existe. Puede que el enlace esté viejo o
que la hayamos movido de sitio.</p>
<p>Vuelve a <a href="/">la enredadera</a> y sigue otra hoja: ahí están
los <a href="/colectivos.html">colectivos</a>, el
<a href="/calendario.html">calendario</a> de cada semana y los
<a href="/eventos.html">eventos</a> que vienen.</p>
<p>Si has llegado desde un enlace de otra web y crees que deberíamos
saberlo, escríbenos a
<a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a>.</p>
</article>
<footer class="pie-pagina">
<p>
Calle de la Coruña nº 5, Madrid ·
<a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a> ·
<a href="https://masto.es/@csolaenre">@csolaenre</a>
</p>
</footer>
</main>
</div>
</body>
</html>

BIN
INFO/cartel_tatus.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

424
README.md
View file

@ -0,0 +1,424 @@
# Web del CSO La Enredadera de Tetuán
Sitio estático: HTML y CSS. **No hay build, ni framework, ni dependencias.**
Se despliega copiando la carpeta y sirviéndola con cualquier servidor web.
Todo el JavaScript que hay son los dos calendarios, que venían de antes y
funcionan. La navegación, el menú, las fichas de colectivo y el brote de REDES
son CSS puro: funcionan con JavaScript desactivado. **Comprobado**, no
supuesto: se desactiva el JS por CDP y se mira. Los dos calendarios, que sí lo
necesitan, avisan de ello con un `<noscript>` y dicen dónde mirar.
---
## Ver la web en local
```sh
python3 -m http.server 8099 --bind 127.0.0.1
```
y abrir <http://127.0.0.1:8099/>. Tiene que servirse por HTTP: si abres el
fichero con `file://` fallan las rutas absolutas y el calendario de convoca.la.
---
## Los ficheros
| Fichero | Qué es |
|---|---|
| `index.html` | Portada: la enredadera con seis hojas |
| `colectivos.html` | Las doce hojas de colectivos: once con ficha y Tattoo Circus, que lleva a su micrositio |
| `calendario.html` | Horarios semanales de cada colectivo |
| `eventos.html` | Agenda de convoca.la |
| `subdir/campa.html` | Campañas |
| `subdir/sobre_nosotrxs.html` | Quiénes somos y la historia del espacio |
| `subdir/contacto.html` | Dónde estamos y cómo proponer algo |
| `tatus.html`, `panel.html` | Tattoo Circus: micrositio aparte, con su propio CSS |
| `404.html` | Página de error, con el mismo armazón que el resto |
| `index.css` | **Todo el estilo del sitio**, menos los dos del Tattoo Circus |
| `INFO/` | Imágenes. **12 de las 18 no se usan** (3,2 MB): ver pendientes |
| `favicon.svg`, `favicon.ico` | Icono: una hoja verde con los nervios en rosa |
| `Code462WPink-Regular.ttf` | La fuente de los títulos, servida desde aquí |
---
## Añadir una hoja a la enredadera
Copia un `<li>` entero y cambia el enlace y el texto. **Nada más.** La
posición, el ángulo y el tamaño salen solos de `:nth-child`, así que la hoja
nueva se coloca en el punto que le toca sin tocar el CSS.
```html
<li>
<a class="hoja" href="/donde-va.html">
<svg class="hoja-svg" viewBox="0 0 100 114" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Como se llama</span>
</a>
</li>
```
Variantes:
- `class="hoja brota"` — hoja más tenue, para un colectivo que existe pero
todavía no ha escrito su ficha.
- Para que abra una ficha en vez de ir a otra página, el enlace apunta a
`#ficha-loquesea` y añades el `<article class="ficha" id="ficha-loquesea">`
al final del documento, copiando uno de los que ya hay.
**Aviso:** los ciclos son de 6. Si añades una séptima hoja a la portada, la
raíz seguirá pasando por su sitio, pero repasa a ojo que no se pise con la
vecina — y pasa el banco de pruebas (más abajo).
---
## Los colores
Están todos en `:root`, al principio de `index.css`. **Para recolorear el
sitio entero solo hay que tocar ahí.**
| Variable | Para qué |
|---|---|
| `--verde`, `--verde-hondo`, `--verde-humo` | fondos |
| `--rosa` | contorno de las hojas y acentos. **Nunca para texto normal:** da 3.1:1 |
| `--rosa-legible` | el rosa para textos y enlaces: 6.3:1 |
| `--verde-vivo` | nervios y zarcillos. Es adorno: 1.7:1, no vale para texto |
| `--verde-hoja` | el verde legible, para subtítulos |
| `--tinta`, `--tinta-suave` | textos |
| `--marron`, `--negro` | las dos hebras de la raíz |
Los contrastes están medidos contra WCAG AA. Si cambias un color, mídelo: hay
un cálculo hecho en `../BITACORA.md` que puedes reutilizar.
---
## Las tres medidas de la enredadera
Están en `.enredadera`, y **son tres cosas distintas a propósito**. Antes eran
una sola variable y se estorbaban entre sí.
| Variable | Qué manda |
|---|---|
| `--fila` | la **separación**: alto de la franja. Más alta = hojas más apartadas y menos hueco abajo |
| `--hoja-base` | el **tamaño** de la hoja |
| `--col` | el ancho **real** de columna, que es el tope de la hoja |
Por qué separadas: estirar la franja para que llene la pantalla agrandaba
también las hojas y volvía a juntarlas. Ese fue el callejón de «`--fila` a
63vh», anotado en `../BITACORA.md`.
Y `--col` no es `15vw`: coinciden solo por debajo de 1680px. A partir de ahí
la rejilla deja de crecer (`max-width:1680px`) pero `15vw` sigue subiendo, así
que a 1920 las hojas se salían de su columna y se pisaban.
En móvil mandan otras dos, en `.enredadera-wrap`:
- **`--ancho-hoja`**, de la que salen a la vez el ancho de la hoja y el hueco
bajo la cabecera, porque las hojas de móvil giran hacia arriba y sobresalen
~0.96 de su ancho por encima de donde se agarran. Si se separan esas dos
medidas, la primera hoja se come el subtítulo. Va contra las **dos**
dimensiones —`min(28vw, 13.6vh)`—: sólo con `vw`, en una pantalla baja las
seis hojas no entran sin deslizar.
- **`--celda`**, el alto de cada `<li>`. Es **más corto que la hoja a
propósito**: las hojas alternan lado, así que se entrelazan como en una
enredadera de verdad. Reparte entre las seis lo que queda tras la cabecera,
el hueco de entrada y lo que la última asoma por abajo, así que la portada
entra sin deslizar de 320x568 para arriba.
El tallo de móvil son **tres** dibujos, no uno: la onda que empieza a la
derecha, su espejo y el remate con espiral de la última celda. La onda es
`x = 50 ± 28·cos(pi·y/100)` en un recuadro de 100x100 que se pinta cuadrado
—`background-size:var(--celda) 100%`—, así que la escala sale uniforme. En los
dos bordes la tangente es vertical: por eso dos celdas seguidas empalman sin
junta, y por eso los extremos caen justo donde se agarra la hoja. Si tocas la
amplitud, toca también el `--centrar` de las hojas, que vale `AM/100`.
---
## Cuidado con `--tam` dentro de una hoja
Las reglas por hoja son de la forma:
```css
.enredadera > li:nth-child(6n+4) .hoja{ --giro:154deg; --tam:0.92; }
```
Ese `.hoja` es un **descendiente**, así que alcanza también a las hojas que
haya dentro del `<li>` —los brotes de REDES— y con especificidad (0,3,1), que
le gana a cualquier `.una-clase`. Poner `--tam` en `.hoja-brote` no hacía
nada: los brotes salían con el `--tam` de REDES, al doble de tamaño, y se
comían a las hojas vecinas.
**Regla:** dentro de un `<li>` de la enredadera, no confíes en `--tam`. Si
necesitas un tamaño propio, escríbelo en la medida, sin `var(--tam)`.
---
## La raíz (los dibujos de la enredadera)
Los tres dibujos —la bajada desde el título, el tramo de ordenador y el tallo
de móvil— **no están escritos a mano**: los genera un script, porque el
trenzado hay que calcularlo (la perpendicular a lo largo del recorrido).
```sh
cd ../prueba && python3 raiz2.py # regenera raiz2.json
```
Después hay que **reinyectar los SVG en el CSS**. Y lo más importante:
> Los puntos por donde pasa la raíz y las alturas de las que cuelgan las hojas
> (`--y` en las reglas `nth-child(6n+N)`) **tienen que coincidir**. Si mueves
> uno sin mover el otro, las hojas quedan flotando sin tocar la raíz.
Para eso está `../coherencia.py`: compara el CSS contra el JSON y avisa.
**Pásalo siempre después de tocar la raíz.**
### La bajada del título
Es el dibujo más delicado de los tres, porque empalma con dos cosas a la vez:
el título por arriba y la franja por la esquina de abajo a la izquierda.
- Su viewBox es **1000x72** y la caja que lo pinta mide `--bajada`, o sea el
**7.2% de `--rejilla`**. Los dos números van juntos: si cambias uno, cambia
el otro, o el dibujo se deforma —`preserveAspectRatio` es `none`—.
- Las hebras no son `stroke` sino **cintas rellenas** de grosor variable
(`../prueba/cinta.py`), afiladas en la punta y del grosor de la franja —9 y
5.5— en el empalme. Si tocas el grosor de la franja, toca también ése.
- El recorrido llega **vertical** al margen izquierdo: es lo que evita el pico
contra la franja. No lo hagas terminar en diagonal.
- `--fila` descuenta `--bajada` por su nombre. No vuelvas a meterla en una
constante fija: la bajada mide en proporción al ancho, no en `vh`.
---
## El banco de pruebas
```sh
cd ..
python3 coherencia.py # raíz y hojas cuadran
python3 qa.py --breve # las 10 páginas en 15 pantallas
python3 qa.py index.html # una sola, con detalle
```
Puntuación **0 = perfecto**. Mide, en cada página y cada tamaño de pantalla:
- desborde horizontal
- si la portada entra sin deslizar en ordenador
- hojas cortadas por los bordes
- hojas que se pisan entre sí
- etiquetas que se solapan
- **los brotes de REDES**: que no se salgan, no pisen a las hojas, no se
toquen entre ellos y no partan su etiqueta en dos líneas
- **contraste** de todos los textos contra su fondo real, con el umbral de
WCAG AA (4.5, o 3.0 si la letra es grande). Ojo: las fuentes usan `clamp()`
con `vw`, así que un titular puede ser «grande» en ordenador y dejar de
serlo en móvil — por eso se mide en las quince pantallas y no en una
- **contenido perdido** dentro de elementos con `overflow` oculto
- **foco fantasma**: enlaces que se tabulan pero no se ven
- espacio muerto en los bordes
- el menú desplegado: que se alcancen todos los enlaces
### El banco va por CDP, y no es un capricho
`chromium --dump-dom` y `--screenshot` **sujetan la ventana a un mínimo de
~500px**: si pides 320, maqueta a 500. La captura encima engaña, porque
reescala la imagen al ancho pedido y parece buena. Da igual `--headless`,
`--headless=new` o `--headless=old`.
Durante un tiempo el banco midió así, y **las cuatro pantallas de móvil (430,
390, 360 y 320) daban todas la medida de 500**: el 28% de cada barrido era
falso. Por eso `cdp.py` levanta chromium con `--remote-debugging-port` y fija
el viewport con `Emulation.setDeviceMetricsOverride`, que sí respeta cualquier
ancho. Hace falta `--remote-allow-origins=*` o el websocket devuelve 403.
**No vuelvas a medir con `--dump-dom`.** Si un día das con números idénticos
en varios anchos distintos, eso es la señal: el ancho no está cambiando.
Al medir cosas que se animan (los brotes, el menú) hay que **quitar la
transición antes**, o se mide a medio camino. Y `--r` y las demás variables
con `calc()` no se pueden leer con `getPropertyValue`: devuelven el texto. Se
miden creando un testigo con `width:var(--r)`.
### Recorrer el foco
```sh
python3 teclado.py # se usa desde otro script: ver el ejemplo al final
```
Pulsa Tab de verdad por CDP y anota cada parada. Mover `activeElement` con
`.focus()` no vale: no prueba el orden de tabulación ni lo que el navegador se
salta. Va aparte del banco porque cada parada es una ida y vuelta al
navegador y en las 98 mediciones sería eterno.
### Cuidado: la sonda se recorta
`SONDA_JS` no es el texto entero de la sonda: se **recorta** desde la línea
`var d=document.documentElement` hasta donde escribía su resultado. Todo lo
que se ponga fuera de ese trozo **desaparece sin avisar**. Pasó con el apagado
de animaciones: estuvo seis vueltas escrito y sin aplicarse. Al tocar la sonda,
comprobar que lo nuevo está de verdad:
```python
python3 -c "import qa; print('sinAnim' in qa.SONDA_JS)"
```
### La sonda apaga las animaciones
Lo primero que hace es meter `*{animation:none!important}`. La portada tiene
una entrada animada que acaba a los 0.8s y la sonda mide a los 1.1s: medir tan
cerca del final es pedir problemas. Como la animación termina en el estado
normal, apagarla deja justo lo que hay que medir.
### Cuidado al medir cosas que se abren
La barra lateral cierra con `transition: visibility 0s .32s`. Si un bloque de
la sonda la abre y la cierra, **todo lo que se mida después la ve todavía
abierta**. Ha mordido tres veces: al foco, a los brotes y al contraste. Por
eso el bloque del menú y el de los brotes quitan la transición mientras miden
y la reponen al salir. **Si añades una comprobación nueva, no la pongas
detrás de una que abra algo sin ese cuidado.**
Lo que el banco **no** ve, y hay que mirar a ojo:
- Las fichas de colectivo y los dos calendarios.
- **Los avisos de reserva.** El `.gancio-fallback` de `eventos.html` y el
`<noscript>` de `calendario.html` sólo se dibujan cuando el componente
externo no carga o no hay JavaScript. Cuando el banco mide, no están, así
que sus colores y tamaños **no se comprueban solos**. Ahí se coló un
contraste de 3.4:1. Para revisarlos hay que bloquear el script a mano:
```python
nav._envia("Network.enable")
nav._envia("Network.setBlockedURLs", {"urls": ["*rosa.frama.io*"]})
```
## Qué NO tocar
**El IIFE del calendario semanal** (`calendario.html`, dentro de `<script>`).
Lleva los horarios escritos a mano en `WEEKLY` y `COLORS`, y reglas especiales
—todos los viernes Hacklab salvo el segundo que es Art-Lab; Fridays el segundo
y el último viernes—. Para cambiar un horario se editan esos arrays, no el
resto del código.
Y hay un **contrato entre ese script y el CSS**: el script escribe
`style="--bg:...; --fg:..."` en cada píldora de color, y `.cal-pill` del CSS
las lee con `color-mix()`. Esas dos variables no se declaran en ninguna parte
del CSS —sólo se usan—, así que parecen sobrar y no sobran. Si se quitan las
reglas que las usan, las píldoras se quedan sin color.
**El web component de gancio** (`eventos.html`). Se carga desde
`rosa.frama.io` y trae la agenda de `mad.convoca.la`. El identificador del
lugar es `places="42"`, comprobado contra la API.
**No se puede recolorear.** Durante un tiempo el CSS le pasaba once variables
`--calendar-*` y aquí ponía que se tematizaba con ellas. Es falso: el
componente **las redefine dentro de su propio shadow DOM** —una tanda para
`.light` y otra para `.dark`— y esa definición gana a la que herede del host.
Comprobado: se le pasaba `--calendar-surface:#f5faef` y su `.calendar` seguía
calculando `#ffffff`. Tampoco expone ningún `::part`. Las once variables se
quitaron: no hacían nada.
Lo único que se puede hacer es **enmarcarlo desde fuera** (borde, radio,
sombra, fondo), que es lo que hay en la regla `gancio-calendar`, para que la
tarjeta blanca se lea como un panel puesto a propósito.
---
## Cosas pendientes de la asamblea
- **Orden de los colectivos.** Los cinco con la ficha sin escribir (`brota`)
van seguidos al final, así que la segunda fila entera sale desvaída.
Repartidos entre las dos filas se leería como "esta hoja está brotando"
y no como "la mitad de abajo está apagada". El orden lo decide la asamblea.
- **Hacklab**: el párrafo de su ficha lo escribí yo de forma provisional
porque la sección original no tenía ni una línea de texto. Conviene que lo
revise la gente del hacklab y lo ponga en sus palabras.
- **Bicilab**: el texto dice «domingos a las 17:00» y el calendario lo pinta a
las 19:00. Hay que decidir cuál es la hora buena.
- **«Asamblea ext.»** aparece en el calendario semanal pero **no tiene color
asignado en `COLORS`**, así que su píldora sale en blanco y no figura en la
leyenda. Las otras once etiquetas sí. O se le pone color, o se decide que va
neutra a propósito y entonces conviene explicarlo en la leyenda.
- En el calendario la etiqueta pone **«Fridays 🌱»** y en la leyenda
**«Fridays for Future»**. El color sí casa, pero los dos nombres deberían
ser el mismo para que la leyenda se entienda.
- **Ficha de Feminismos**: pone «el derecho a la libre **intervención** del
embarazo». La expresión habitual es «interrupción», y aquí el cambio de
palabra cambia el sentido. No lo he tocado porque el texto es suyo, pero
conviene que lo miren.
- **Ficha de Bicilab**: «Bocata de espaguetis todos los domingos a las 17:00
nos engrasamos las manos y recuperamos tu bicicleta!» son dos frases pegadas
sin puntuación, y a la exclamación le falta el «¡» de apertura. Tampoco lo
he tocado: es su voz.
- Dos botones apuntaban a PDF que no existen (`/archivos/biblioteca.pdf` y
`/archivos/asamblea.pdf`). Los quité y dejé el comentario en el HTML: cuando
subáis los ficheros, se reponen.
- Las campañas tenían seis botones que no llevaban a ninguna parte. Quitados,
con nota en el HTML de lo que prometía cada uno.
---
## La página de error
`404.html` existe, pero **el servidor tiene que saber usarla**. Con nginx:
```nginx
error_page 404 /404.html;
```
Sin esa línea, un enlace roto enseña el error por defecto del servidor y la
página no se usa nunca.
---
## Al compartir el enlace
Todas las páginas llevan `og:title`, `og:description` y `og:image` para que
Mastodon, Telegram o WhatsApp enseñen una vista previa decente. La imagen es
`INFO/cso_laenre.jpeg`, la foto de la fachada con el cartel pintado a mano.
**Una pega conocida:** la `og:image` va en **ruta relativa**, porque el
dominio propio del sitio no aparece escrito en ningún fichero —todos los
enlaces internos son relativos y las únicas URLs absolutas son de subdominios
(`hacklab.laenre.net`, `okupanel.laenre.net`)—. La mayoría de plataformas la
resuelven, pero **lo seguro es ponerla absoluta**. Cuando confirméis el
dominio, cambiad las ocho líneas `og:image` por la URL completa.
---
## Accesibilidad
Se ha cuidado y medido:
- Contrastes AA en todos los textos.
- Anillo de foco visible sobre cualquier fondo (en rosa era invisible sobre
las propias hojas).
- Nada oculto se puede tabular.
- Áreas de toque medidas en las ocho páginas: **todo lo pulsable llega a los
24px** que pide WCAG 2.5.8, y casi todo a 44. Lo que queda por debajo son
enlaces dentro de una frase, exentos por la norma.
Ojo con la píldora del calendario en móvil: se **ve** de 10px pero **mide**
24, gracias a un relleno vertical con `background-clip:content-box`. Necesita
`box-sizing:content-box`, o el `border-box` global se come la altura y la
barra desaparece.
- `:active` en todo lo pulsable: en un móvil no hay `:hover` y sin él el toque
no responde. `.tarjeta` queda fuera a propósito: es un `div` que no lleva a
ninguna parte.
- `color-scheme` declarado: `light` en el sitio, `dark` en el Tattoo Circus.
Sin eso, un navegador en tema oscuro pinta en oscuro lo que el CSS no
controla (barras de desplazamiento, controles, el lienzo inicial).
- Las imágenes de contenido llevan texto alternativo que **describe la
imagen**, no que repite el nombre del colectivo. Si un enlace es sólo una
imagen, el nombre del enlace va en un `aria-label` que dice **a dónde va**:
el `alt` describe el dibujo, y para un enlace eso no sirve.
- El logo de la barra lateral va con `alt=""`, decorativo a propósito: justo
debajo hay un `<h2>` que ya dice «La Enredadera», y con `alt` puesto, cuando
la imagen no cargaba, el texto se dibujaba **recortado** dentro de la caja de
48px.
- Se respeta `prefers-reduced-motion`, **y también el retardo**: la entrada
de la enredadera va escalonada, y anular sólo la duración dejaba las hojas
invisibles hasta 0.3s para luego aparecer de golpe.
Límite conocido: al ser CSS puro, **las fichas no se cierran con Escape** y el
contenido de detrás sigue siendo tabulable. Se cierran con la ✕, pulsando
fuera o con el botón atrás del navegador. Arreglarlo exigiría JavaScript.

275
calendario.html Normal file
View file

@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendario · La Enredadera de Tetuán</title>
<meta name="description" content="Horarios semanales de los colectivos del CSO La Enredadera de Tetuán.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="Calendario · La Enredadera de Tetuán">
<meta property="og:description" content="Horarios semanales de los colectivos del CSO La Enredadera de Tetuán.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Rock+Salt&display=swap">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<div class="container">
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="96" height="96">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/colectivos.html">Colectivos</a></li>
<li><a href="/calendario.html" aria-current="page">Calendario</a></li>
<li><a href="/eventos.html">Eventos</a></li>
<li><a href="/subdir/campa.html">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html">La Enre</a></li>
<li><a href="/subdir/contacto.html">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<main class="main">
<header class="cabecera">
<h1>CALENDARIO</h1>
<p class="sub">Qué pasa cada semana en la Enre</p>
</header>
<a class="volver" href="/index.html">← Volver a la enredadera</a>
<section class="pantalla" aria-label="Horarios semanales de colectivos">
<h2>Horarios semanales</h2>
<p class="pie">Las asambleas y talleres fijos de cada colectivo. Pulsa cualquier etiqueta para ver los eventos publicados en convoca.la.</p>
<!-- Sin JavaScript la rejilla se queda en un marco vacío, con dos flechas
que no hacen nada. Se esconden los tres trozos que dibuja el script y
se explica dónde está la información. No toca el IIFE. -->
<noscript>
<style>
#semanal-controls, #semanal-root, #semanal-legend-root{ display:none; }
</style>
<div class="gancio-fallback">
<p><strong>El horario se dibuja con JavaScript y lo tienes desactivado.</strong></p>
<p>Los horarios de cada colectivo están también en su ficha, en
<a href="/colectivos.html">Colectivos</a>, y los eventos concretos en
<a href="/eventos.html">Eventos</a>.</p>
</div>
</noscript>
<div class="cal-controls" id="semanal-controls" role="group" aria-label="Navegación de mes">
<button class="button semanal-prev" type="button" aria-label="Mes anterior">&larr;</button>
<div class="cal-title semanal-title" aria-live="polite"></div>
<button class="button semanal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
</div>
<div class="cal" id="semanal-root"></div>
<div class="cal-legend" id="semanal-legend-root"></div>
<script>
(function () {
const monthNames = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
const weekdayNames = ['L','M','X','J','V','S','D'];
const ENRE_EVENTS_URL = 'https://mad.convoca.la/place/42/CSO%20La%20Enredadera';
const COLORS = {
hacklab: { bg:'#39FF14', fg:'#000', label:'Hacklab' },
artlab: { bg:'#39FF14', fg:'#ff00aa', label:'Art-Lab' },
feminismos: { bg:'#6A0DAD', fg:'#fff', label:'Feminismos' },
vivienda: { bg:'#000000', fg:'#ff00aa', label:'Vivienda' },
bicilab: { bg:'#FF7A00', fg:'#000', label:'Bicilab' },
autodefensa: { bg:'#00BCD4', fg:'#fff', label:'Autodefensa' },
fridays: { bg:'#2E8B57', fg:'#fff', label:'Fridays for Future' },
euskera: { bg:'#FF0000', fg:'#00ff00', label:'Euskera' },
asamblea_enre: { bg:'#ff00ff', fg:'#fff', label:'Asamblea Enre' },
asamblea_externas: { bg:'#fff', fg:'#ff00ff', label:'Asamblea ext.' },
montana: { bg:'#8B4513', fg:'#fff', label:'Montaña' },
teatro: { bg:'#4169E1', fg:'#fff', label:'Teatro' }
};
const WEEKLY = [
{ group:'asamblea_externas', dow:0, start:'19:00' },
{ group:'asamblea_enre', dow:0, start:'20:00' },
{ group:'autodefensa', dow:1, start:'20:00' },
{ group:'teatro', dow:2, start:'11:00' },
{ group:'autodefensa', dow:2, start:'20:00' },
{ group:'euskera', dow:2, start:'18:15' },
{ group:'vivienda', dow:3, start:'19:00' },
{ group:'feminismos', dow:3, start:'20:00' },
{ group:'bicilab', dow:6, start:'19:00' },
{ group:'montana', dow:6, start:'10:00' }
];
function createPill(text, bg, fg) {
const pill = document.createElement('div');
pill.className = 'cal-pill';
pill.style.setProperty('--bg', bg);
pill.style.setProperty('--fg', fg);
pill.textContent = text;
pill.setAttribute('role', 'link');
pill.setAttribute('tabindex', '0');
pill.addEventListener('click', () => { window.location.href = ENRE_EVENTS_URL; });
pill.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); window.location.href = ENRE_EVENTS_URL; }
});
return pill;
}
function renderWeeklyPills(cell, wd) {
const todays = WEEKLY.filter(e => e.dow === wd);
if (!todays.length) return;
const wrap = document.createElement('div');
wrap.className = 'cal-pills';
todays.forEach(e => {
const c = COLORS[e.group] || { bg:'#eee', fg:'#000', label: e.group };
wrap.appendChild(createPill(c.label + (e.start ? ' ' + e.start : ''), c.bg, c.fg));
});
cell.appendChild(wrap);
}
const root = document.getElementById('semanal-root');
const legend = document.getElementById('semanal-legend-root');
const title = document.querySelector('.semanal-title');
const btnPrev = document.querySelector('.semanal-prev');
const btnNext = document.querySelector('.semanal-next');
const today = new Date();
let view = new Date();
view.setDate(1);
function buildCalendar(date) {
root.innerHTML = '';
const year = date.getFullYear();
const month = date.getMonth();
title.textContent = monthNames[month] + ' ' + year;
const startIndex = (new Date(year, month, 1).getDay() + 6) % 7;
const daysInMonth = new Date(year, month + 1, 0).getDate();
const fridays = [];
for (let d = 1; d <= daysInMonth; d++) {
if ((new Date(year, month, d).getDay() + 6) % 7 === 4) fridays.push(d);
}
const secondFri = fridays[1];
const lastFri = fridays[fridays.length - 1];
const head = document.createElement('div');
head.className = 'cal-row cal-head';
weekdayNames.forEach(w => {
const cell = document.createElement('div');
cell.className = 'cal-cell cal-head-cell';
cell.textContent = w;
head.appendChild(cell);
});
root.appendChild(head);
let day = 1 - startIndex;
for (let r = 0; r < 6; r++) {
const row = document.createElement('div');
row.className = 'cal-row';
for (let c = 0; c < 7; c++) {
const cell = document.createElement('div');
cell.className = 'cal-cell';
if (day >= 1 && day <= daysInMonth) {
if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate())
cell.classList.add('cal-today');
const num = document.createElement('span');
num.className = 'cal-daynum';
num.textContent = day;
cell.appendChild(num);
const wd = (new Date(year, month, day).getDay() + 6) % 7;
if (wd === 4) {
const wrap = document.createElement('div');
wrap.className = 'cal-pills';
if (day === secondFri)
wrap.appendChild(createPill('Art-Lab', COLORS.artlab.bg, COLORS.artlab.fg));
else
wrap.appendChild(createPill('Hacklab', COLORS.hacklab.bg, COLORS.hacklab.fg));
if (day === secondFri || day === lastFri)
wrap.appendChild(createPill('Fridays 🌱', COLORS.fridays.bg, COLORS.fridays.fg));
cell.appendChild(wrap);
} else {
renderWeeklyPills(cell, wd);
}
} else {
cell.classList.add('cal-empty');
}
row.appendChild(cell);
day++;
}
root.appendChild(row);
}
}
function buildLegend() {
legend.innerHTML = '';
['hacklab','artlab','feminismos','vivienda','bicilab','autodefensa','fridays','euskera','asamblea_enre','montana','teatro']
.forEach(key => {
const c = COLORS[key];
if (!c) return;
const item = document.createElement('div');
item.className = 'cal-legend-item';
const dot = document.createElement('span');
dot.className = 'cal-legend-dot';
dot.style.background = c.bg;
if (c.bg === '#fff') dot.style.border = '1px solid #ff00aa';
const txt = document.createElement('span');
txt.textContent = c.label;
item.appendChild(dot);
item.appendChild(txt);
legend.appendChild(item);
});
}
btnPrev.addEventListener('click', () => { view.setMonth(view.getMonth() - 1); buildCalendar(view); });
btnNext.addEventListener('click', () => { view.setMonth(view.getMonth() + 1); buildCalendar(view); });
buildCalendar(view);
buildLegend();
})();
</script>
</section>
<footer class="pie-pagina">
<p>
Calle de la Coruña nº 5, Madrid ·
<a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a> ·
<a href="https://masto.es/@csolaenre">@csolaenre</a>
</p>
</footer>
</main>
</div>
</body>
</html>

389
colectivos.html Normal file
View file

@ -0,0 +1,389 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colectivos · La Enredadera de Tetuán</title>
<meta name="description" content="Los colectivos que habitan el CSO La Enredadera de Tetuán: feminismos, vivienda, hacklab, bicilab, biblioteca libre y más.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="Colectivos · La Enredadera de Tetuán">
<meta property="og:description" content="Los colectivos que habitan el CSO La Enredadera de Tetuán: feminismos, vivienda, hacklab, bicilab, biblioteca libre y más.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Rock+Salt&display=swap">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<svg class="defs" aria-hidden="true" focusable="false" width="0" height="0">
<symbol id="hoja-forma" viewBox="0 0 100 132">
<!-- Volteada: el rabillo queda arriba y la hoja cuelga. Así el punto por
el que se agarra a la raíz es la esquina superior del recuadro, y el
giro no depende de ningún porcentaje. -->
<g transform="translate(0,132) scale(1,-1)" fill="none" stroke-linejoin="round" stroke-linecap="round">
<!-- Rabillo, en marrón: es la parte leñosa que engancha con el tallo.
Mide 42 y no 24: con el corto, el limbo nacía pegado a la raíz y
la cruzaba. El recuadro crece con él (114 -> 132) para que la caja
siga midiendo lo que se dibuja; el limbo no cambia de tamaño. -->
<path stroke="var(--rabillo)" stroke-width="3.2" d="M50 88 L50 130"/>
<!-- Zarcillo verde. Sale solo en algunas hojas: el CSS enciende
--zarcillo en una de cada tres para que no salgan calcadas. -->
<path stroke="var(--nervio)" stroke-width="1.9" stroke-opacity="var(--zarcillo,0)"
d="M50 100 C38 98 32 90 36 84 C39 80 45 82 44 88 C43 94 36 96 30 92"/>
<!-- Contorno de hoja de hiedra, en rosa -->
<path stroke="var(--trazo)" stroke-width="2.7"
d="M50 5 C56 20 61 36 65 48 C76 44 89 40 96 45 C96 62 84 74 70 80 C62 84 56 83 50 88 C44 83 38 84 30 80 C16 74 4 62 4 45 C11 40 24 44 35 48 C39 36 44 20 50 5 Z"/>
<!-- Nervadura palmada, en verde: los cinco nervios salen del rabillo -->
<g stroke="var(--nervio)" stroke-width="1.5">
<path d="M50 86 L50 13"/>
<path d="M50 86 C59 72 78 56 90 48"/>
<path d="M50 86 C41 72 22 56 10 48"/>
<path d="M50 86 C57 84 65 81 71 77"/>
<path d="M50 86 C43 84 35 81 29 77"/>
</g>
</g>
</symbol>
</svg>
<div class="container">
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="96" height="96">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/colectivos.html" aria-current="page">Colectivos</a></li>
<li><a href="/calendario.html">Calendario</a></li>
<li><a href="/eventos.html">Eventos</a></li>
<li><a href="/subdir/campa.html">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html">La Enre</a></li>
<li><a href="/subdir/contacto.html">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<main class="main">
<header class="cabecera">
<h1>COLECTIVOS</h1>
<p class="sub">Cada hoja, una asamblea. Pulsa para conocerla.</p>
</header>
<a class="volver" href="/index.html">← Volver a la enredadera</a>
<div class="enredadera-wrap">
<ul class="enredadera" id="hojas">
<li>
<a class="hoja" href="#ficha-feminismos">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Feminismos</span>
</a>
</li>
<li>
<a class="hoja" href="#ficha-vivienda">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Vivienda</span>
</a>
</li>
<li>
<a class="hoja" href="#ficha-fridays">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Fridays for Future</span>
</a>
</li>
<li>
<a class="hoja" href="#ficha-hacklab">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Hacklab</span>
</a>
</li>
<li>
<a class="hoja" href="#ficha-biblioteka">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Biblioteca Libre</span>
</a>
</li>
<li>
<a class="hoja" href="#ficha-bicilab">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Bicilab</span>
</a>
</li>
<li>
<a class="hoja" href="/tatus.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Tattoo Circus</span>
</a>
</li>
<!-- Colectivos que existen pero aún no han escrito su ficha.
Van con la clase "brota": hoja más tenue, pero visible. -->
<li>
<a class="hoja brota" href="#ficha-circo">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Circo</span>
</a>
</li>
<li>
<a class="hoja brota" href="#ficha-tienda-gratis">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Tienda Gratis</span>
</a>
</li>
<li>
<a class="hoja brota" href="#ficha-warawas">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Warawas</span>
</a>
</li>
<li>
<a class="hoja brota" href="#ficha-hongos">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Hongos</span>
</a>
</li>
<li>
<a class="hoja brota" href="#ficha-fermentos">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Fermentos</span>
</a>
</li>
</ul>
</div>
<footer class="pie-pagina">
<p>
Calle de la Coruña nº 5, Madrid ·
<a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a> ·
<a href="https://masto.es/@csolaenre">@csolaenre</a>
</p>
</footer>
</main>
</div>
<!-- ==============================================================
FICHAS. Cada una se abre con :target, sin JavaScript. El botón
atrás del navegador funciona y el enlace se puede compartir:
laenre.net/colectivos.html#ficha-feminismos
"Cerrar" apunta a #hojas, que deja de cumplirse el :target.
============================================================== -->
<article class="ficha" id="ficha-feminismos" aria-labelledby="t-feminismos">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-feminismos">Feminismos Tetuán</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<a href="https://www.instagram.com/feminismostetuan" target="_blank" rel="noopener" aria-label="Instagram de Feminismos Tetuán (abre en otra pestaña)">
<img src="/INFO/feminismos_tetuan.jpg" alt="Ilustración de dos manos entrelazadas sobre fondo lila, con «feminismos tetuán» escrito a mano" loading="lazy" width="1080" height="1080">
</a>
<p><strong>Feminismo Tetuán</strong> es una asamblea de barrio que nace a raíz del movimiento del <strong>8M</strong>.</p>
<p>Es una asamblea abierta no mixta transinclusiva. <strong>Nos reunimos los jueves a las 20</strong> en el CSO La Enredadera.</p>
<p>Uno de los temas que más trabajamos es el derecho a la libre intervención del embarazo, ya que en nuestro barrio se encuentra la clínica Dator, la primera clínica en realizar abortos en España.</p>
<ul class="enlaces">
<li><a href="https://linktr.ee/FeminismosTetuan" target="_blank" rel="noopener">LinkTree<span class="sr-only"> (abre en otra pestaña)</span></a></li>
<li><a href="https://www.instagram.com/feminismostetuan/" target="_blank" rel="noopener">Instagram<span class="sr-only"> (abre en otra pestaña)</span></a></li>
</ul>
</div>
</div>
</article>
<article class="ficha" id="ficha-vivienda" aria-labelledby="t-vivienda">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-vivienda">Colectivo de Vivienda</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<a href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener" aria-label="Instagram de la Organización de Vivienda de Tetuán (abre en otra pestaña)">
<img src="/INFO/ovt.jpg" alt="Logotipo en blanco y negro: la silueta de una casa con una llama en la chimenea y el texto «Organización de Vivienda de Tetuán»" loading="lazy" width="1080" height="1080">
</a>
<p>Asamblea abierta desde donde defendemos que la vivienda es para quien la habita y no un negocio.</p>
<p><strong>Nos reunimos los jueves a las 19</strong> en el CSO La Enredadera.</p>
<ul class="enlaces">
<li><a href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener">Instagram<span class="sr-only"> (abre en otra pestaña)</span></a></li>
</ul>
</div>
</div>
</article>
<article class="ficha" id="ficha-fridays" aria-labelledby="t-fridays">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-fridays">Fridays for Future</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<a href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener" aria-label="Enlaces de Fridays for Future Madrid (abre en otra pestaña)">
<img src="/INFO/fridays_madrid.jpg" alt="Logotipo circular verde: un globo terráqueo dibujado a mano, rodeado por el texto «Fridays for Future Madrid»" loading="lazy" width="1080" height="1080">
</a>
<p>Somos parte del movimiento global juvenil por la Justicia Climática.</p>
<p><strong>Nos reunimos el segundo y el último viernes de cada mes</strong> en el CSO La Enredadera.</p>
<ul class="enlaces">
<li><a href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">LinkTree<span class="sr-only"> (abre en otra pestaña)</span></a></li>
<li><a href="https://www.instagram.com/fridaysformadrid/" target="_blank" rel="noopener">Instagram<span class="sr-only"> (abre en otra pestaña)</span></a></li>
</ul>
</div>
</div>
</article>
<article class="ficha" id="ficha-hacklab" aria-labelledby="t-hacklab">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-hacklab">Hacklab La Raíz</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<a href="https://hacklab.laenre.net" target="_blank" rel="noopener" aria-label="Web del Hacklab La Raíz (abre en otra pestaña)">
<img src="/INFO/hacklab.jpeg" alt="Ilustración de raíces de árbol sobre un circuito impreso verde oscuro con nodos luminosos, y el texto «Hacklab La Raíz»" loading="lazy" width="640" height="640">
</a>
<!-- PENDIENTE: escribir aquí el párrafo del Hacklab. La sección
original no tenía ni una línea de texto, solo las dos fotos. -->
<p>Tecnología libre, cacharreo y autodefensa digital en el CSO La Enredadera. <strong>Nos juntamos los viernes</strong>, salvo el segundo del mes, que es Art-Lab.</p>
<a href="https://hacklab.laenre.net/eventos.html" target="_blank" rel="noopener" aria-label="Eventos del Hacklab La Raíz (abre en otra pestaña)">
<img src="/INFO/teclado_negro_planta.jpg" alt="Primer plano de un teclado gris oscuro con brotes verdes creciendo entre las teclas" loading="lazy" width="474" height="474">
</a>
<ul class="enlaces">
<li><a href="https://hacklab.laenre.net" target="_blank" rel="noopener">hacklab.laenre.net<span class="sr-only"> (abre en otra pestaña)</span></a></li>
</ul>
</div>
</div>
</article>
<article class="ficha" id="ficha-biblioteka" aria-labelledby="t-biblioteka">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-biblioteka">Biblioteca Libre</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</p>
<!-- El botón original apuntaba a /archivos/biblioteca.pdf, que no existe.
Cuando subáis el PDF, devolvedlo aquí como <ul class="enlaces">. -->
</div>
</div>
</article>
<article class="ficha" id="ficha-bicilab" aria-labelledby="t-bicilab">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-bicilab">Bicilab</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<p>Bocata de espaguetis todos los domingos a las 17:00 nos engrasamos las manos y recuperamos tu bicicleta!</p>
<!-- OJO: el calendario semanal pone Bicilab el domingo a las 19:00 y este
texto dice 17:00. Hay que decidir cuál es la hora buena. -->
<!-- El botón original apuntaba a /archivos/asamblea.pdf, que no existe. -->
</div>
</div>
</article>
<article class="ficha" id="ficha-circo" aria-labelledby="t-circo">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-circo">Circo</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<p class="aviso">Esta hoja todavía está brotando. El colectivo existe y se reúne en la Enre, pero aún no ha escrito su presentación. Si eres parte, pásate por la asamblea de los lunes y la publicamos.</p>
</div>
</div>
</article>
<article class="ficha" id="ficha-tienda-gratis" aria-labelledby="t-tienda">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-tienda">Tienda Gratis</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<p class="aviso">Esta hoja todavía está brotando. El colectivo existe y se reúne en la Enre, pero aún no ha escrito su presentación. Si eres parte, pásate por la asamblea de los lunes y la publicamos.</p>
</div>
</div>
</article>
<article class="ficha" id="ficha-warawas" aria-labelledby="t-warawas">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-warawas">Warawas</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<p class="aviso">Esta hoja todavía está brotando. El colectivo existe y se reúne en la Enre, pero aún no ha escrito su presentación. Si eres parte, pásate por la asamblea de los lunes y la publicamos.</p>
</div>
</div>
</article>
<article class="ficha" id="ficha-hongos" aria-labelledby="t-hongos">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-hongos">Hongos</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<p class="aviso">Esta hoja todavía está brotando. El colectivo existe y se reúne en la Enre, pero aún no ha escrito su presentación. Si eres parte, pásate por la asamblea de los lunes y la publicamos.</p>
</div>
</div>
</article>
<article class="ficha" id="ficha-fermentos" aria-labelledby="t-fermentos">
<a class="ficha-fondo" href="#hojas" aria-label="Cerrar la ficha" tabindex="-1"></a>
<div class="ficha-caja">
<div class="ficha-cab">
<h2 id="t-fermentos">Fermentos</h2>
<a class="ficha-cerrar" href="#hojas" aria-label="Cerrar">×</a>
</div>
<div class="ficha-cuerpo">
<p class="aviso">Esta hoja todavía está brotando. El colectivo existe y se reúne en la Enre, pero aún no ha escrito su presentación. Si eres parte, pásate por la asamblea de los lunes y la publicamos.</p>
</div>
</div>
</article>
</body>
</html>

103
eventos.html Normal file
View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eventos · La Enredadera de Tetuán</title>
<meta name="description" content="Agenda de eventos del CSO La Enredadera de Tetuán, publicada en mad.convoca.la.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="Eventos · La Enredadera de Tetuán">
<meta property="og:description" content="Agenda de eventos del CSO La Enredadera de Tetuán, publicada en mad.convoca.la.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Rock+Salt&display=swap">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
<!-- Web component gancio-calendar (CSO La Rosa) https://framagit.org/rosa/gancio-calendar -->
<script type="module" src="https://rosa.frama.io/gancio-calendar/gancio-calendar.js"></script>
</head>
<body>
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<div class="container">
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="96" height="96">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/colectivos.html">Colectivos</a></li>
<li><a href="/calendario.html">Calendario</a></li>
<li><a href="/eventos.html" aria-current="page">Eventos</a></li>
<li><a href="/subdir/campa.html">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html">La Enre</a></li>
<li><a href="/subdir/contacto.html">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<main class="main">
<header class="cabecera">
<h1>EVENTOS</h1>
<p class="sub">Lo que viene: conciertos, charlas, talleres y kafetas</p>
</header>
<a class="volver" href="/index.html">← Volver a la enredadera</a>
<section class="pantalla" aria-label="Calendario de eventos">
<h2>Agenda</h2>
<p class="pie">Se alimenta sola desde <a href="https://mad.convoca.la/place/CSO%20La%20Enredadera" target="_blank" rel="noopener">mad.convoca.la<span class="sr-only"> (abre en otra pestaña)</span></a>, la agenda activista de Madrid. Para publicar aquí, sigue la <a href="https://convoca.la/mad/guias/publicar_evento" target="_blank" rel="noopener">guía de convoca.la<span class="sr-only"> (abre en otra pestaña)</span></a>.</p>
<!--
places="42" es el identificador de CSO La Enredadera en mad.convoca.la.
Comprobado contra https://mad.convoca.la/api/events?places=42
-->
<gancio-calendar
baseurl="https://mad.convoca.la"
title=""
instance_name="mad.convoca.la"
instance_description="Agenda activista y cultural de Tetuán"
locale="es-ES"
places="42"
accent_color="#ff00aa"
theme="light">
<div class="gancio-fallback">
<p><strong>La agenda no ha cargado.</strong></p>
<p>Se sirve desde convoca.la, así que necesita conexión. Puedes verla directamente en
<a href="https://mad.convoca.la/place/CSO%20La%20Enredadera" target="_blank" rel="noopener">mad.convoca.la<span class="sr-only"> (abre en otra pestaña)</span></a>.</p>
</div>
</gancio-calendar>
</section>
<footer class="pie-pagina">
<p>
Calle de la Coruña nº 5, Madrid ·
<a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a> ·
<a href="https://masto.es/@csolaenre">@csolaenre</a>
</p>
</footer>
</main>
</div>
</body>
</html>

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

12
favicon.svg Normal file
View file

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 128" width="128" height="128">
<rect width="100" height="128" fill="#eef4e5"/>
<path d="M50 6 C 76 30, 92 66, 84 94 C 76 118, 60 126, 50 126 C 40 126, 24 118, 16 94 C 8 66, 24 30, 50 6 Z"
fill="#7fb069" stroke="#4f7f3c" stroke-width="5" stroke-linejoin="round"/>
<g fill="none" stroke="#ff00aa" stroke-width="4" stroke-linecap="round">
<path d="M50 14 L50 122"/>
<path d="M50 46 C 40 51, 32 60, 26 71"/>
<path d="M50 46 C 60 51, 68 60, 74 71"/>
<path d="M50 78 C 41 82, 34 90, 29 100"/>
<path d="M50 78 C 59 82, 66 90, 71 100"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 634 B

1655
index.css

File diff suppressed because one or more lines are too long

View file

@ -4,379 +4,178 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Enredadera de Tetuán</title>
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf">
<meta name="description" content="CSO La Enredadera de Tetuán. Centro Social Autogestionado en la Calle de la Coruña 5, Madrid. Haciendo barrio desde 2009.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="La Enredadera de Tetuán">
<meta property="og:description" content="CSO La Enredadera de Tetuán. Centro Social Autogestionado en la Calle de la Coruña 5, Madrid. Haciendo barrio desde 2009.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Rock+Salt&display=swap">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
<!-- Web component gancio-calendar (CSO La Rosa) https://framagit.org/rosa/gancio-calendar -->
<script type="module" src="https://rosa.frama.io/gancio-calendar/gancio-calendar.js"></script>
</head>
<body>
<!-- Menú lateral: checkbox + label, sin una línea de JavaScript -->
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir/cerrar menú">☰</label>
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<!-- ==========================================================
LA FORMA DE LA HOJA. Se define una sola vez por página y
cada hoja la reutiliza con <use>. Los colores salen de las
variables --limbo, --borde y --nervio, que pone el CSS.
========================================================== -->
<svg class="defs" aria-hidden="true" focusable="false" width="0" height="0">
<symbol id="hoja-forma" viewBox="0 0 100 132">
<!-- Volteada: el rabillo queda arriba y la hoja cuelga. Así el punto por
el que se agarra a la raíz es la esquina superior del recuadro, y el
giro no depende de ningún porcentaje. -->
<g transform="translate(0,132) scale(1,-1)" fill="none" stroke-linejoin="round" stroke-linecap="round">
<!-- Rabillo, en marrón: es la parte leñosa que engancha con el tallo.
Mide 42 y no 24: con el corto, el limbo nacía pegado a la raíz y
la cruzaba. El recuadro crece con él (114 -> 132) para que la caja
siga midiendo lo que se dibuja; el limbo no cambia de tamaño. -->
<path stroke="var(--rabillo)" stroke-width="3.2" d="M50 88 L50 130"/>
<!-- Zarcillo verde. Sale solo en algunas hojas: el CSS enciende
--zarcillo en una de cada tres para que no salgan calcadas. -->
<path stroke="var(--nervio)" stroke-width="1.9" stroke-opacity="var(--zarcillo,0)"
d="M50 100 C38 98 32 90 36 84 C39 80 45 82 44 88 C43 94 36 96 30 92"/>
<!-- Contorno de hoja de hiedra, en rosa -->
<path stroke="var(--trazo)" stroke-width="2.7"
d="M50 5 C56 20 61 36 65 48 C76 44 89 40 96 45 C96 62 84 74 70 80 C62 84 56 83 50 88 C44 83 38 84 30 80 C16 74 4 62 4 45 C11 40 24 44 35 48 C39 36 44 20 50 5 Z"/>
<!-- Nervadura palmada, en verde: los cinco nervios salen del rabillo -->
<g stroke="var(--nervio)" stroke-width="1.5">
<path d="M50 86 L50 13"/>
<path d="M50 86 C59 72 78 56 90 48"/>
<path d="M50 86 C41 72 22 56 10 48"/>
<path d="M50 86 C57 84 65 81 71 77"/>
<path d="M50 86 C43 84 35 81 29 77"/>
</g>
</g>
</symbol>
</svg>
<div class="container">
<div class="vertical-marquee left-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
</marquee>
</div>
<div class="vertical-marquee right-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
OKUPA RESISTE 1312 <3
</marquee>
</div>
<aside id="sidebar" class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="Logo de La Enredadera" class="logo">
<h2>La Enredadera</h2>
<p>Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav">
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="96" height="96">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
<li><a href="/colectivos.html">Colectivos</a></li>
<li><a href="/calendario.html">Calendario</a></li>
<li><a href="/eventos.html">Eventos</a></li>
<li><a href="/subdir/campa.html">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html">La Enre</a></li>
<li><a href="/subdir/contacto.html">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="/convocala.html">Eventos</a></li>
<li><a href="comunicados.html">Comunicados</a></li>
<li><a href="mailto:enredadera@riseup.net">Contacto</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<main class="main-content">
<header>
<h1>CSO LA ENREDADERA DE TETUÁN</h1>
<nav class="top-nav">
<ul>
<li><a href="/index.html#feminismos">feminismos tetuan</a></li>
<li><a href="/subdir/campa.html">campañas</a></li>
<li><a href="/index.html#fridays">fridays for future</a></li>
<li><a href="/index.html#ovt">organizacion vivienda tetuan</a></li>
<li><a href="/index.html#circo">circo</a></li>
<li><a href="https://hacklab.laenre.net">hacklab la raiz</a></li>
<li><a href="/index.html#tienda-gratis">tienda gratis</a></li>
<li><a href="/index.html#biblioteka">biblioteka</a></li>
<li><a href="/index.html#warawas">warawas</a></li>
<li><a href="/index.html#hongos">hongos</a></li>
<li><a href="/index.html#fermentos">fermentos</a></li>
<li><a href="/index.html#bicilab">bicilab</a></li>
</ul>
</nav>
<main class="main">
<header class="cabecera">
<h1>La Enredadera</h1>
<!-- El espacio antes de cada «·» es duro: sin esto, al partir en dos
líneas la segunda empezaba por el separador. -->
<p class="sub">Centro social autogestionado&nbsp;· Tetuán, Madrid&nbsp;· desde 2009</p>
</header>
<!-- ======================================================
LA ENREDADERA.
Para añadir una hoja: copia un <li> entero y cambia el
href y el texto. La posición y el ángulo salen solos.
====================================================== -->
<div class="enredadera-wrap">
<ul class="enredadera">
<!-- CALENDARIO: gancio-calendar embebido desde mad.convoca.la -->
<section id="agenda" class="panel" aria-label="Calendario de eventos">
<li>
<a class="hoja" href="/colectivos.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Colectivos</span>
</a>
</li>
<!--
places="286" = ID de CSO La Enredadera en mad.convoca.la
https://mad.convoca.la/place/CSO%20La%20Enredadera
-->
<gancio-calendar
baseurl="https://mad.convoca.la"
title="Agenda de La Enredadera de Tetuán"
instance_name="mad.convoca.la"
instance_description="Agenda activista y cultural de Tetuán"
locale="es-ES"
places="42"
accent_color="#ff00aa"
theme="light">
</gancio-calendar>
<li>
<a class="hoja" href="/calendario.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Calendario</span>
</a>
</li>
</section>
<li>
<a class="hoja" href="/eventos.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Eventos</span>
</a>
</li>
<!-- REDES: al pulsarla brotan tres hojas con las redes. Todo con un
checkbox y CSS, ni una línea de JavaScript. -->
<li class="li-redes">
<input type="checkbox" id="redes-toggle" class="sr-only">
<label class="hoja" for="redes-toggle">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Redes</span>
</label>
<ul class="brotes">
<li>
<a class="hoja hoja-brote" href="https://masto.es/@csolaenre" rel="me">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Mastodon</span>
</a>
</li>
<li>
<a class="hoja hoja-brote" href="https://t.me/laenredadera">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Telegram</span>
</a>
</li>
<li>
<a class="hoja hoja-brote" href="https://www.instagram.com/la_enredadera_de_tetuan/">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Instagram</span>
</a>
</li>
</ul>
</li>
<li>
<a class="hoja" href="/subdir/campa.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Campañas</span>
</a>
</li>
<li>
<a class="hoja" href="/subdir/sobre_nosotrxs.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">La Enre</span>
</a>
</li>
</ul>
</div>
<!-- CALENDARIO SEMANAL DE COLECTIVOS -->
<section id="agenda-semanal" aria-label="Horarios semanales de colectivos">
<h2>Horarios Semanales</h2>
<div class="cal-controls" id="semanal-controls" role="group" aria-label="Navegación de mes">
<button class="button semanal-prev" type="button" aria-label="Mes anterior">&larr;</button>
<div class="cal-title semanal-title" aria-live="polite"></div>
<button class="button semanal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
</div>
<div class="cal" id="semanal-root"></div>
<div class="cal-legend" id="semanal-legend-root"></div>
<script>
(function () {
const monthNames = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
const weekdayNames = ['L','M','X','J','V','S','D'];
const ENRE_EVENTS_URL = 'https://mad.convoca.la/place/42/CSO%20La%20Enredadera';
const COLORS = {
hacklab: { bg:'#39FF14', fg:'#000', label:'Hacklab' },
artlab: { bg:'#39FF14', fg:'#ff00aa', label:'Art-Lab' },
feminismos: { bg:'#6A0DAD', fg:'#fff', label:'Feminismos' },
vivienda: { bg:'#000000', fg:'#ff00aa', label:'Vivienda' },
bicilab: { bg:'#FF7A00', fg:'#000', label:'Bicilab' },
autodefensa: { bg:'#00BCD4', fg:'#fff', label:'Autodefensa' },
fridays: { bg:'#2E8B57', fg:'#fff', label:'Fridays for Future' },
euskera: { bg:'#FF0000', fg:'#00ff00', label:'Euskera' },
asamblea_enre: { bg:'#ff00ff', fg:'#fff', label:'Asamblea Enre' },
asamblea_externas: { bg:'#fff', fg:'#ff00ff', label:'Asamblea ext.' },
montana: { bg:'#8B4513', fg:'#fff', label:'Montaña' },
teatro: { bg:'#4169E1', fg:'#fff', label:'Teatro' }
};
const WEEKLY = [
{ group:'asamblea_externas', dow:0, start:'19:00' },
{ group:'asamblea_enre', dow:0, start:'20:00' },
{ group:'autodefensa', dow:1, start:'20:00' },
{ group:'teatro', dow:2, start:'11:00' },
{ group:'autodefensa', dow:2, start:'20:00' },
{ group:'euskera', dow:2, start:'18:15' },
{ group:'vivienda', dow:3, start:'19:00' },
{ group:'feminismos', dow:3, start:'20:00' },
{ group:'bicilab', dow:6, start:'19:00' },
{ group:'montana', dow:6, start:'10:00' }
];
function createPill(text, bg, fg) {
const pill = document.createElement('div');
pill.className = 'cal-pill';
pill.style.setProperty('--bg', bg);
pill.style.setProperty('--fg', fg);
pill.textContent = text;
pill.setAttribute('role', 'link');
pill.setAttribute('tabindex', '0');
pill.addEventListener('click', () => { window.location.href = ENRE_EVENTS_URL; });
pill.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); window.location.href = ENRE_EVENTS_URL; }
});
return pill;
}
function renderWeeklyPills(cell, wd) {
const todays = WEEKLY.filter(e => e.dow === wd);
if (!todays.length) return;
const wrap = document.createElement('div');
wrap.className = 'cal-pills';
todays.forEach(e => {
const c = COLORS[e.group] || { bg:'#eee', fg:'#000', label: e.group };
wrap.appendChild(createPill(c.label + (e.start ? ' ' + e.start : ''), c.bg, c.fg));
});
cell.appendChild(wrap);
}
const root = document.getElementById('semanal-root');
const legend = document.getElementById('semanal-legend-root');
const title = document.querySelector('.semanal-title');
const btnPrev = document.querySelector('.semanal-prev');
const btnNext = document.querySelector('.semanal-next');
const today = new Date();
let view = new Date();
view.setDate(1);
function buildCalendar(date) {
root.innerHTML = '';
const year = date.getFullYear();
const month = date.getMonth();
title.textContent = monthNames[month] + ' ' + year;
const startIndex = (new Date(year, month, 1).getDay() + 6) % 7;
const daysInMonth = new Date(year, month + 1, 0).getDate();
const fridays = [];
for (let d = 1; d <= daysInMonth; d++) {
if ((new Date(year, month, d).getDay() + 6) % 7 === 4) fridays.push(d);
}
const secondFri = fridays[1];
const lastFri = fridays[fridays.length - 1];
const head = document.createElement('div');
head.className = 'cal-row cal-head';
weekdayNames.forEach(w => {
const cell = document.createElement('div');
cell.className = 'cal-cell cal-head-cell';
cell.textContent = w;
head.appendChild(cell);
});
root.appendChild(head);
let day = 1 - startIndex;
for (let r = 0; r < 6; r++) {
const row = document.createElement('div');
row.className = 'cal-row';
for (let c = 0; c < 7; c++) {
const cell = document.createElement('div');
cell.className = 'cal-cell';
if (day >= 1 && day <= daysInMonth) {
if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate())
cell.classList.add('cal-today');
const num = document.createElement('span');
num.className = 'cal-daynum';
num.textContent = day;
cell.appendChild(num);
const wd = (new Date(year, month, day).getDay() + 6) % 7;
if (wd === 4) {
const wrap = document.createElement('div');
wrap.className = 'cal-pills';
if (day === secondFri)
wrap.appendChild(createPill('Art-Lab', COLORS.artlab.bg, COLORS.artlab.fg));
else
wrap.appendChild(createPill('Hacklab', COLORS.hacklab.bg, COLORS.hacklab.fg));
if (day === secondFri || day === lastFri)
wrap.appendChild(createPill('Fridays 🌱', COLORS.fridays.bg, COLORS.fridays.fg));
cell.appendChild(wrap);
} else {
renderWeeklyPills(cell, wd);
}
} else {
cell.classList.add('cal-empty');
}
row.appendChild(cell);
day++;
}
root.appendChild(row);
}
}
function buildLegend() {
legend.innerHTML = '';
['hacklab','artlab','feminismos','vivienda','bicilab','autodefensa','fridays','euskera','asamblea_enre','montana','teatro']
.forEach(key => {
const c = COLORS[key];
if (!c) return;
const item = document.createElement('div');
item.className = 'cal-legend-item';
const dot = document.createElement('span');
dot.className = 'cal-legend-dot';
dot.style.background = c.bg;
if (c.bg === '#fff') dot.style.border = '1px solid #ff00aa';
const txt = document.createElement('span');
txt.textContent = c.label;
item.appendChild(dot);
item.appendChild(txt);
legend.appendChild(item);
});
}
btnPrev.addEventListener('click', () => { view.setMonth(view.getMonth() - 1); buildCalendar(view); });
btnNext.addEventListener('click', () => { view.setMonth(view.getMonth() + 1); buildCalendar(view); });
buildCalendar(view);
buildLegend();
})();
</script>
</section>
<section id="feminismos">
<h2>Feminismos</h2>
<p><strong>Feminismo Tetuán</strong> es una asamblea de barrio que nace a raíz del movimiento del <strong>8M</strong>.</p>
<a class="colectivo-img-link" href="https://www.instagram.com/feminismostetuan" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/feminismos_tetuan.jpg" alt="Feminismos Tetuán">
</a>
<a class="colectivo-btn" href="https://linktr.ee/FeminismosTetuan?utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGnRoxnOqEyhqJxFoRTPlDSH8zvge2GNvrAQDn4Ou98RwCysuYT0AABDgbbFWw_aem_tbCIw3s5HlsIgRoH4D4p1A" target="_blank" rel="noopener">LinkTree</a>
<a class="colectivo-btn" href="https://www.instagram.com/feminismostetuan/" target="_blank" rel="noopener">Instagram</a>
<p>Es una asamblea abierta no mixta transinclusiva. <strong>Nos reunimos los jueves a las 20</strong> en el CSO La Enredadera.</p>
<p>Uno de los temas que más trabajamos es el derecho a la libre intervención del embarazo, ya que en nuestro barrio se encuentra la clínica Dator, la primera clínica en realizar abortos en España.</p>
</section>
<section id="fridays">
<h2>Fridays for Future</h2>
<p>Somos parte del movimiento global juvenil por la Justicia Climática.</p>
<a class="colectivo-img-link" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/photo_5913560549843653631_y.jpg" alt="Fridays for Future Madrid">
</a>
<a class="colectivo-img-link" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/fridays_madrid.jpg" alt="Fridays for Future Madrid">
</a>
<a class="colectivo-btn" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">LinkTree</a>
<a class="colectivo-btn" href="https://www.instagram.com/fridaysformadrid/" target="_blank" rel="noopener">Instagram</a>
</section>
<section id="ovt">
<h2>Colectivo de Vivienda</h2>
<p>Asamblea abierta desde donde defendemos que la vivienda es para quien la habita y no un negocio.</p>
<a class="colectivo-img-link" href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/ovt.jpg" alt="Organización Vivienda Tetuán">
</a>
<a class="colectivo-btn" href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener">Instagram</a>
</section>
<section id="circo">
<h2>Circo</h2>
<p>Información próximamente.</p>
</section>
<section id="hacklab">
<h2>Hacklab</h2>
<a class="colectivo-img-link" href="https://hacklab.laenre.net" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/hacklab.jpeg" alt="Hacklab La Raíz">
</a>
<a class="colectivo-img-link" href="https://hacklab.laenre.net/eventos.html" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/teclado_negro_planta.jpg" alt="">
</a>
<a class="colectivo-btn" href="https://hacklab.laenre.net" target="_blank" rel="noopener">hacklab.laenre.net</a>
</section>
<section id="tienda-gratis">
<h2>Tienda Gratis</h2>
<p>Información próximamente.</p>
</section>
<section id="biblioteka">
<h2>Biblioteca Libre</h2>
<p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</p>
<a class="colectivo-btn" href="/archivos/biblioteca.pdf">Mas información</a>
</section>
<section id="warawas">
<h2>Warawas</h2>
<p>Información próximamente.</p>
</section>
<section id="hongos">
<h2>Hongos</h2>
<p>Información próximamente.</p>
</section>
<section id="fermentos">
<h2>Fermentos</h2>
<p>Información próximamente.</p>
</section>
<section id="bicilab">
<h2>BICILAB</h2>
<p>Bocata de espaguetis todos los domingos a las 17:00 nos engrasamos las manos y recuperamos tu bicicleta!</p>
<a class="colectivo-btn" href="/archivos/asamblea.pdf">Descargar Actas</a>
</section>
<footer>
<p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
<p>📌 Calle de la Coruña nº5, Madrid</p>
<p>⚡ Mastodon: <a href="https://masto.es/@csolaenre">@csolaenre</a></p>
</footer>
</main>
</div>
</body>
</html>

615
panel.html Normal file
View file

@ -0,0 +1,615 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Cartelera del Tattoo Circus para proyectar en el local.">
<!-- Vista previa al compartir el enlace. -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="Tattoo Circus · Panel">
<meta property="og:description" content="El horario del fin de semana de jornadas, para proyectar.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<meta name="robots" content="noindex">
<meta name="referrer" content="no-referrer">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'; object-src 'none'">
<title>Tattoo Circus · Panel</title>
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<style>
/* Este micrositio es oscuro por diseño. */
:root{ color-scheme: dark; }
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@font-face {
font-family: 'Code462WPink';
src: url('/Code462WPink-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root{
--neon: #E84A1F;
--cream: #f4ecd8;
--black: #0a0a0a;
--divider: rgba(232,74,31,.35);
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html, body{
height: 100vh;
width: 100vw;
overflow: hidden;
background: var(--black);
font-family: 'Special Elite', 'Courier New', monospace;
color: var(--neon);
}
body{
display: flex;
flex-direction: column;
}
/* ============================================================
HEADER FIJO — banner crema con el título principal
Altura controlada: ~12-14% del viewport
============================================================ */
header.title{
background: var(--cream);
color: #000;
text-align: center;
padding: clamp(8px, 1.6vh, 26px) 2vw;
flex-shrink: 0;
border-bottom: 3px solid #000;
}
header.title h1{
font-family: 'Code462WPink', cursive;
font-size: clamp(2.2rem, 5.5vw, 7rem);
letter-spacing: clamp(6px, 1.2vw, 24px);
text-transform: uppercase;
line-height: 1;
color: #000;
}
header.title .sub{
margin-top: clamp(4px, .6vh, 12px);
font-family: 'Anton', Impact, sans-serif;
font-size: clamp(.75rem, 1.1vw, 1.6rem);
letter-spacing: clamp(3px, .6vw, 12px);
text-transform: uppercase;
color: #000;
opacity: .6;
}
/* ============================================================
DAY BANNER — banner negro con el día actual
============================================================ */
.day-banner{
background: var(--black);
color: var(--neon);
text-align: center;
padding: clamp(8px, 1.4vh, 24px) 2vw;
font-family: 'Anton', Impact, sans-serif;
font-size: clamp(1.8rem, 4vw, 5rem);
letter-spacing: clamp(6px, 1.3vw, 22px);
text-transform: uppercase;
text-shadow: 0 0 12px rgba(232,74,31,.7);
border-bottom: 2px solid var(--neon);
flex-shrink: 0;
transition: opacity .4s ease;
}
/* ============================================================
SCHEDULE — contenedor de filas que rellena el espacio restante
Cada .row distribuye verticalmente con flex:1
============================================================ */
.schedule{
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
transition: opacity .4s ease;
min-height: 0;
}
.row{
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns: clamp(100px, 11vw, 220px) 1fr clamp(110px, 11vw, 200px);
column-gap: clamp(16px, 2.2vw, 50px);
padding: clamp(8px, 1.2vh, 20px) clamp(20px, 3vw, 60px);
align-items: center;
border-bottom: 1px solid var(--divider);
overflow: hidden;
}
.row:last-child{ border-bottom: none; }
/* alternancia de fondos */
.row:nth-child(odd){
background: var(--cream);
color: #000;
}
.row:nth-child(even){
background: var(--black);
color: var(--neon);
}
/* ============================================================
HORA (columna izquierda)
============================================================ */
.row .time{
font-family: 'Anton', Impact, sans-serif;
font-size: clamp(1.4rem, 2.4vw, 3rem);
letter-spacing: 1.5px;
font-weight: 700;
white-space: nowrap;
line-height: 1;
}
.row:nth-child(odd) .time{ color: #000; }
.row:nth-child(even) .time{
color: var(--neon);
text-shadow: 0 0 10px rgba(232,74,31,.6);
}
/* ============================================================
ACTIVIDAD (columna derecha) — title + detail + crew
Tipografía bien jerarquizada y line-height ajustado
============================================================ */
.row .act{
font-size: clamp(.9rem, 1.3vw, 1.7rem);
line-height: 1.3;
min-width: 0;
overflow: hidden;
}
.row .act .title{
display: block;
font-family: 'Anton', Impact, sans-serif;
font-weight: 700;
font-size: 1.15em;
letter-spacing: clamp(1px, .12vw, 3px);
text-transform: uppercase;
line-height: 1.18;
word-wrap: break-word;
overflow-wrap: break-word;
}
.row .act .detail{
display: block;
margin-top: .35em;
font-size: .8em;
line-height: 1.25;
/* atenuarlo bajaba el naranja a 3.6:1 sobre el negro */
font-style: italic;
}
.row .act .crew{
display: block;
margin-top: .3em;
font-size: .72em;
line-height: 1.25;
opacity: .65;
}
/* ============================================================
HIGHLIGHT — badge para conciertos / cabaret / freakshow
============================================================ */
.row .act .highlight{
display: inline-block;
background: var(--neon);
color: #000;
padding: 3px 14px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(232,74,31,.6);
letter-spacing: clamp(2px, .25vw, 5px);
}
.row:nth-child(odd) .act .highlight{
background: #000;
color: var(--cream);
box-shadow: none;
}
/* ============================================================
PLANTA (columna derecha) — badge que indica el piso
============================================================ */
.row .planta{
justify-self: end;
text-align: center;
font-family: 'Anton', Impact, sans-serif;
font-size: clamp(.75rem, 1vw, 1.25rem);
letter-spacing: clamp(1px, .15vw, 3px);
text-transform: uppercase;
line-height: 1.1;
padding: clamp(4px, .6vh, 9px) clamp(8px, 1vw, 16px);
border: 2px solid currentColor;
border-radius: 6px;
white-space: nowrap;
}
.row:nth-child(odd) .planta{ color: #000; }
.row:nth-child(even) .planta{
color: var(--neon);
box-shadow: 0 0 8px rgba(232,74,31,.4);
}
/* ============================================================
PLANTAS SLIDE — 4 rectángulos anchos a pantalla completa
============================================================ */
.plantas-slide{
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
min-height: 0;
overflow: hidden;
}
.planta-card{
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(6px, 1.2vh, 16px);
padding: clamp(10px, 1.8vh, 28px) clamp(24px, 4vw, 70px);
border-bottom: 1px solid var(--divider);
overflow: hidden;
}
.planta-card:last-child{ border-bottom: none; }
.planta-card:nth-child(odd){ background: var(--cream); color: #000; }
.planta-card:nth-child(even){ background: var(--black); color: var(--neon); }
.planta-head{
display: flex;
align-items: baseline;
gap: clamp(10px, 1.5vw, 26px);
flex-wrap: wrap;
}
.planta-name{
font-family: 'Anton', Impact, sans-serif;
font-size: clamp(1.6rem, 3.2vw, 4rem);
letter-spacing: clamp(2px, .5vw, 10px);
text-transform: uppercase;
line-height: 1;
}
.planta-card:nth-child(even) .planta-name{ text-shadow: 0 0 12px rgba(232,74,31,.6); }
.planta-tag{
font-family: 'Anton', Impact, sans-serif;
font-size: clamp(.85rem, 1.4vw, 1.8rem);
letter-spacing: clamp(1px, .2vw, 4px);
text-transform: uppercase;
opacity: .65;
}
.planta-items{
display: flex;
flex-wrap: wrap;
gap: clamp(8px, 1.2vw, 20px);
}
.planta-item{
font-size: clamp(.9rem, 1.5vw, 2rem);
line-height: 1.15;
letter-spacing: .5px;
padding: clamp(4px, .7vh, 10px) clamp(10px, 1.3vw, 22px);
border: 2px solid currentColor;
border-radius: 6px;
}
/* ============================================================
BREAKPOINTS por tamaño de pantalla
============================================================ */
/* Laptops 1366x768 — más compacto, hueco para ~10 filas en 768px */
@media (max-width: 1440px) and (max-height: 900px){
header.title{ padding: clamp(5px, 1vh, 12px) 2vw; }
header.title h1{ font-size: clamp(1.7rem, 4vw, 3.2rem); letter-spacing: 5px; }
header.title .sub{ font-size: .72rem; letter-spacing: 3px; margin-top: 2px; }
.day-banner{ font-size: clamp(1.3rem, 3vw, 2.2rem); padding: 5px 2vw; letter-spacing: clamp(4px, 1vw, 14px); }
.row{
grid-template-columns: clamp(74px, 8vw, 120px) 1fr clamp(96px, 9vw, 150px);
column-gap: clamp(10px, 1.6vw, 26px);
padding: 3px clamp(14px, 2.2vw, 36px);
}
.row .time{ font-size: clamp(1rem, 1.7vw, 1.6rem); }
.row .act{ font-size: clamp(.78rem, 1vw, 1rem); line-height: 1.16; }
.row .act .title{ font-size: 1.02em; line-height: 1.1; letter-spacing: .5px; }
.row .act .detail{ font-size: .76em; margin-top: .12em; line-height: 1.12; }
.row .act .crew{ font-size: .68em; margin-top: .1em; line-height: 1.12; }
.row .act .highlight{ padding: 2px 10px; }
.row .planta{ font-size: clamp(.6rem, .8vw, .9rem); letter-spacing: 1px; padding: 3px 7px; }
}
/* Portátiles muy cortos (≤720px de alto): apretar aún más para que nada se corte */
@media (max-width: 1440px) and (max-height: 720px){
header.title h1{ font-size: clamp(1.4rem, 3.4vw, 2.4rem); letter-spacing: 4px; }
header.title .sub{ font-size: .62rem; letter-spacing: 2px; }
.day-banner{ font-size: clamp(1.1rem, 2.6vw, 1.8rem); padding: 3px 2vw; }
.row{ padding: 2px clamp(12px, 2vw, 30px); }
.row .act{ font-size: clamp(.72rem, .95vw, .92rem); line-height: 1.12; }
.row .act .detail{ font-size: .74em; }
.row .act .crew{ font-size: .66em; }
}
/* QHD (1440p) — escala intermedia agradable */
@media (min-width: 2000px) and (max-width: 2800px){
header.title h1{ font-size: clamp(4rem, 5.5vw, 8rem); }
.day-banner{ font-size: clamp(3rem, 4.2vw, 6rem); }
.row .time{ font-size: clamp(2.2rem, 2.5vw, 3.6rem); }
.row .act{ font-size: clamp(1.3rem, 1.4vw, 1.9rem); }
}
/* 4K / TV grande (≥2800px) — escala generosa */
@media (min-width: 2800px){
header.title h1{ font-size: clamp(6rem, 5.8vw, 11rem); letter-spacing: 28px; }
.day-banner{ font-size: clamp(4.5rem, 5vw, 8rem); letter-spacing: 26px; }
.row .time{ font-size: clamp(3rem, 2.8vw, 4.5rem); }
.row .act{ font-size: clamp(1.6rem, 1.5vw, 2.3rem); }
}
/* Ventana realmente pequeña (alguien abre el panel en laptop pequeña/tablet) */
/* En móvil esto deja de ser una proyección. El panel mete todo el
horario en una pantalla a la fuerza (filas de alto flexible con
overflow oculto), y a 320px la charla de título más largo perdía 23px
de texto sin avisar. Aquí las filas crecen lo que necesiten y el
horario se desliza, que es lo propio de un teléfono. */
@media (max-width: 480px){
.schedule{ overflow-y: auto; }
.row{ flex: 0 0 auto; overflow: visible; }
}
@media (max-width: 900px){
header.title h1{ font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: 3px; }
.day-banner{ font-size: clamp(1.4rem, 5vw, 2.2rem); letter-spacing: 4px; padding: 5px 2vw; }
.row{ grid-template-columns: 64px 1fr auto; column-gap: 8px; padding: 5px 12px; }
.row .time{ font-size: .95rem; }
.row .act{ font-size: .8rem; line-height: 1.2; }
.row .act .title{ font-size: 1em; line-height: 1.1; }
.row .act .detail, .row .act .crew{ font-size: .72em; margin-top: .15em; }
.row .planta{ font-size: .62rem; letter-spacing: 1px; padding: 3px 6px; border-width: 1px; }
.planta-card{ padding: 8px 14px; gap: 6px; }
.planta-name{ font-size: 1.4rem; letter-spacing: 2px; }
.planta-tag{ font-size: .8rem; }
.planta-item{ font-size: .8rem; padding: 3px 8px; border-width: 1px; }
}
/* ===== IMAGE SLIDE — PANTALLA COMPLETA ===== */
/* Cuando el body tiene .image-mode, oculta TODO menos la imagen */
body.image-mode header.title,
body.image-mode .day-banner,
body.image-mode .progress{
display: none;
}
body.image-mode .schedule{
height: 100vh;
}
.image-slide{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: #000;
overflow: hidden;
width: 100%;
height: 100%;
}
.image-slide img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
/* hints para renderizar lo más nítido posible al escalar */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: high-quality;
}
/* ===== FADE TRANSITIONS ===== */
.fading{ opacity: 0; }
/* ===== PROGRESS BAR ===== */
.progress{
height: 8px;
background: rgba(232,74,31,.12);
flex-shrink: 0;
position: relative;
border-top: 1px solid rgba(232,74,31,.3);
}
.progress-bar{
height: 100%;
background: var(--neon);
width: 0%;
box-shadow: 0 0 14px var(--neon);
}
</style>
</head>
<body>
<header class="title">
<h1>TATTOO CIRCUS</h1>
<div class="sub">★ La Enredadera de Tetuán · Fin de semana de jornadas ★</div>
</header>
<div class="day-banner" id="day-banner">VIERNES</div>
<div class="schedule" id="schedule"></div>
<div class="progress">
<div class="progress-bar" id="progress-bar"></div>
</div>
<script>
const FADE_MS = 400;
const SLIDES = [
{
type: 'day',
day: 'VIERNES',
duration: 10000,
slots: [
{ time: '16:00', title: 'Apertura', planta: 'Planta Baja' },
{ time: '16:30', title: 'Taller de carteo a presxs', detail: 'Agrietando los muros de prisión', planta: 'Planta Baja' },
{ time: '18:00', title: '¿Se puede regularizar la vida en un sistema colonial?', detail: 'Dinámicas para entender el proceso de documentación desde una perspectiva decolonial y antifascista', crew: 'Articulación Antirracista de Madrid · Sindicato de Manteros', planta: 'Planta Baja' },
{ time: '20:00', title: 'Cena', planta: 'Planta Primera' },
{ time: '20:30', title: 'Cabaret de Circo', highlight: true, planta: 'Planta Primera' },
{ time: '23:00', title: 'Cierre', planta: 'Planta Primera' }
]
},
{
type: 'day',
day: 'SÁBADO',
duration: 10000,
slots: [
{ time: '11:30', title: 'Apertura', planta: 'Planta Baja' },
{ time: '12:00', title: 'Manifestación Orgullo Loco', detail: 'Centro de salud mental Tetuán → Ni terapia, ni castigo, ni explotación', planta: 'Exterior' },
{ time: '14:00', title: 'Comida', planta: 'Planta Primera' },
{ time: '16:00', title: 'Contra el psistema productivo', detail: 'Manicomios, orfanatos, asilos y otras instituciones de control → INSANIA', planta: 'Planta Baja' },
{ time: '18:00', title: 'Salir con vida', detail: 'Autobiografía de un preso en lucha → Toni Chavero', planta: 'Planta Baja' },
{ time: '20:00', title: 'Cena', planta: 'Planta Primera' },
{ time: '20:30', title: 'Conciertos', highlight: true, planta: 'Planta Baja' },
{ time: '23:00', title: 'Cierre', planta: 'Planta Baja' }
]
},
{
type: 'day',
day: 'DOMINGO',
duration: 10000,
slots: [
{ time: '11:30', title: 'Apertura', planta: 'Planta Baja' },
{ time: '12:00', title: 'Las familias y la cárcel', crew: 'Coordinadora de Familias y Presxs · Famílies de Presos de Catalunya', planta: 'Planta Baja' },
{ time: '14:00', title: 'Comida', planta: 'Planta Primera' },
{ time: '16:00', title: 'Más fuertes que la muerte y la prisión', detail: 'Represión anti-anarquista a nivel internacional', planta: 'Planta Baja' },
{ time: '18:00', title: 'Taller de identificación policial', detail: 'Identificar policía y proteger derechos en protestas → LEGAL SOL', planta: 'Planta Baja' },
{ time: '19:30', title: 'Flamenco', detail: 'Un quejío contra los muros', planta: 'Planta Primera' },
{ time: '20:00', title: 'Cena', planta: 'Planta Primera' },
{ time: '20:30', title: 'Freakshow', highlight: true, planta: 'Planta Primera' },
{ time: '22:00', title: 'Rifa', planta: 'Planta Primera' }
]
},
{
type: 'plantas',
day: 'MAPA DE PLANTAS',
duration: 12000,
floors: [
{ name: 'PLANTA BAJA', items: ['Charlas', 'Conciertos/DJ', 'Carteo a presxs', 'Baños'] },
{ name: 'PLANTA PRIMERA', tag: 'Villapaloma', items: ['Barra', 'Distris', 'Espectáculos', 'Baños'] },
{ name: 'PLANTA DOS', items: ['Citas de Tattoo', 'Piercing', 'Masaje', 'Gemas dentales', 'Peluquería'] },
{ name: 'PLANTA TRES', items: ['Tattoo', 'Piercing', 'Gemas dentales'] }
]
}
];
const dayEl = document.getElementById('day-banner');
const scheduleEl = document.getElementById('schedule');
const progressEl = document.getElementById('progress-bar');
// Utilidad: crea un elemento con clase y texto. textContent NO interpreta HTML —
// garantiza que aunque cambien los datos en el futuro no se pueda inyectar markup.
function el(tag, className, text){
const n = document.createElement(tag);
if (className) n.className = className;
if (text != null) n.textContent = text;
return n;
}
function clearChildren(parent){
while (parent.firstChild) parent.removeChild(parent.firstChild);
}
function renderSlide(slide){
clearChildren(scheduleEl);
if (slide.type === 'image'){
document.body.classList.add('image-mode');
const wrap = el('div', 'image-slide');
const img = document.createElement('img');
img.src = slide.src;
img.alt = 'Cartel Tattoo Circus';
wrap.appendChild(img);
scheduleEl.appendChild(wrap);
return;
}
document.body.classList.remove('image-mode');
dayEl.textContent = slide.day;
if (slide.type === 'plantas'){
const wrap = el('div', 'plantas-slide');
slide.floors.forEach(f => {
const card = el('div', 'planta-card');
const head = el('div', 'planta-head');
head.appendChild(el('span', 'planta-name', f.name));
if (f.tag) head.appendChild(el('span', 'planta-tag', f.tag));
card.appendChild(head);
const list = el('div', 'planta-items');
f.items.forEach(it => list.appendChild(el('span', 'planta-item', it)));
card.appendChild(list);
wrap.appendChild(card);
});
scheduleEl.appendChild(wrap);
return;
}
slide.slots.forEach(s => {
const row = el('div', 'row');
row.appendChild(el('div', 'time', s.time));
const act = el('div', 'act');
const titleSpan = el('span', 'title');
if (s.highlight){
titleSpan.appendChild(el('span', 'highlight', s.title));
} else {
titleSpan.textContent = s.title;
}
act.appendChild(titleSpan);
if (s.detail) act.appendChild(el('span', 'detail', s.detail));
if (s.crew) act.appendChild(el('span', 'crew', s.crew));
row.appendChild(act);
if (s.planta) row.appendChild(el('div', 'planta', s.planta));
scheduleEl.appendChild(row);
});
}
function startProgress(duration){
progressEl.style.transition = 'none';
progressEl.style.width = '0%';
// forzar reflow
void progressEl.offsetWidth;
progressEl.style.transition = `width ${duration}ms linear`;
progressEl.style.width = '100%';
}
let idx = 0; // empieza con el cartel
function tick(){
scheduleEl.classList.add('fading');
dayEl.classList.add('fading');
setTimeout(() => {
idx = (idx + 1) % SLIDES.length;
const slide = SLIDES[idx];
renderSlide(slide);
scheduleEl.classList.remove('fading');
dayEl.classList.remove('fading');
startProgress(slide.duration);
setTimeout(tick, slide.duration);
}, FADE_MS);
}
// primera slide (sin fade)
const first = SLIDES[idx];
renderSlide(first);
startProgress(first.duration);
setTimeout(tick, first.duration);
</script>
</body>
</html>

View file

@ -3,118 +3,101 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Enredadera de Tetuán — Campañas</title>
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf">
<title>Campañas · La Enredadera de Tetuán</title>
<meta name="description" content="Campañas activas e históricas del CSO La Enredadera de Tetuán.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="Campañas · La Enredadera de Tetuán">
<meta property="og:description" content="Campañas activas e históricas del CSO La Enredadera de Tetuán.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Rock+Salt&display=swap">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div class="container">
<!-- Marquesinas laterales -->
<div class="vertical-marquee left-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
</marquee>
</div>
<div class="vertical-marquee right-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
OKUPA RESISTE 1312 <3
</marquee>
</div>
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<!-- Sidebar -->
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="Logo de La Enredadera" class="logo">
<h2>La Enredadera</h2>
<p>Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav">
<ul>
<li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">Eventos</a></li>
<li><a href="comunicados.html">Comunicados</a></li>
<li><a href="mailto:enredadera@riseup.net">Contacto</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://twitter.com/Laenredadera">Twitter</a></li>
</ul>
</nav>
</aside>
<div class="container">
<!-- Contenido principal -->
<main class="main-content">
<header>
<h1>CSO LA ENREDADERA DE TETUÁN</h1>
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="192" height="192">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/colectivos.html">Colectivos</a></li>
<li><a href="/calendario.html">Calendario</a></li>
<li><a href="/eventos.html">Eventos</a></li>
<li><a href="/subdir/campa.html" aria-current="page">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html">La Enre</a></li>
<li><a href="/subdir/contacto.html">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<!-- Respeto tu último nav tal cual -->
<nav class="top-nav">
<ul>
<li><a href="/campa.html/">CAMPAÑAS</a></li>
<li><a href="/">Inicio</a></li>
<li><a href="https://hacklab.laenre.net">Hacklab</a></li>
<li><a href="/index.html#yoga">Yoga</a></li>
<li><a href="/index.html#feminismo">Feminismos</a></li>
<li><a href="/index.html#fridays">F.F.F</a></li>
<li><a href="/index.html#OVT">OVt</a></li>
</ul>
</nav>
<nav class="top-nav second">
<ul>
<li><a href="/#musica_andina/">Música Andina</a></li>
<li><a href="/#biblioteka/">Biblioteka</a></li>
<li><a href="/#Warawas/">Warawas</a></li>
<li><a href="/#felines/">Felines</a></li>
<li><a href="/#Hongos/">Hongos</a></li>
<li><a href="/#Fermentos/">Fermentos</a></li>
<li><a href="/#bicilab/">Bicilab</a></li>
</ul>
</nav>
</header>
<main class="main">
<!-- Intro campañas -->
<section id="presentacion">
<h2>📣 Campañas</h2>
<header class="cabecera">
<h1>CAMPAÑAS</h1>
<p class="sub">En lo que andamos metidas ahora mismo</p>
</header>
<a class="volver" href="/index.html">← Volver a la enredadera</a>
<article class="texto">
<p>
Aquí reunimos las campañas que impulsamos desde La Enredadera y con el barrio:
defensa de vivienda, espacios comunes, apoyo mutuo y cultura libre.
Súmate, difunde y participa en las asambleas abiertas.
</p>
</section>
<!-- Campañas activas -->
<section id="activas">
<h2>🔥 Activas</h2>
<h2>Activas</h2>
<h3>Stop Desahucios Tetuán</h3>
<div class="tarjeta"><h3>Stop Desahucios Tetuán</h3>
<p>
Red de apoyo vecinal para frenar desahucios, acompañar a familias y presionar por soluciones reales.
</p>
<p>
<button onclick="window.location.href='#'">🗓️ Próximas convocatorias</button>
<button onclick="window.location.href='#'">📥 Cartelería / materiales</button>
</p>
<h3>Barrios Vivos: Espacio Público para la Gente</h3>
</div><div class="tarjeta"><h3>Barrios Vivos: Espacio Público para la Gente</h3>
<p>
Recuperar plazas y calles para la vida social, el juego, la cultura y el encuentro, frente a la especulación y el coche.
</p>
<p>
<button onclick="window.location.href='#'">📝 Propuestas ciudadanas</button>
<button onclick="window.location.href='#'">📥 Dossier de campaña</button>
</p>
<h3>Red de Cuidados y Apoyo Mutuo</h3>
</div><div class="tarjeta"><h3>Red de Cuidados y Apoyo Mutuo</h3>
<p>
Red comunitaria para acompañamiento a mayores, comedores vecinales, ropero y banco de alimentos.
</p>
<p>
<button onclick="window.location.href='#'">🤝 Cómo sumarte</button>
<button onclick="window.location.href='#'">📥 Recursos y guías</button>
</p>
</section>
</div>
<!-- Campañas pasadas / histórico -->
<section id="historico">
<h2>📚 Histórico</h2>
<!-- Los botones originales de estas tarjetas no llevaban a ninguna parte
(onclick="window.location.href='#'"). Los he quitado. Prometían:
🗓️ Próximas convocatorias · 📥 Cartelería / materiales · 📝 Propuestas ciudadanas · 📥 Dossier de campaña · 🤝 Cómo sumarte · 📥 Recursos y guías
Cuando exista el destino, se ponen como <ul class="enlaces">. -->
<h2>Histórico</h2>
<ul>
<li>Defensa de Centros Sociales (2009–2024)</li>
<li>Escuela Pública y de Barrio</li>
@ -125,14 +108,19 @@
Si quieres consultar materiales antiguos, escríbenos a
<a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a>.
</p>
</section>
</article>
<footer class="pie-pagina">
<p>
Calle de la Coruña nº 5, Madrid ·
<a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a> ·
<a href="https://masto.es/@csolaenre">@csolaenre</a>
</p>
</footer>
</main>
</div>
<footer>
<p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
<p>📌 Plaza de la Resistencia, Local 3, Madrid</p>
<p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
</footer>
</main>
</div>
</body>
</html>

View file

@ -3,76 +3,112 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Enredadera de Tetuán</title>
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf">
<title>Contacto · La Enredadera de Tetuán</title>
<meta name="description" content="Cómo contactar y visitar el CSO La Enredadera de Tetuán: Calle de la Coruña 5, Madrid. Asamblea abierta los lunes.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="Contacto · La Enredadera de Tetuán">
<meta property="og:description" content="Cómo contactar y visitar el CSO La Enredadera de Tetuán: Calle de la Coruña 5, Madrid. Asamblea abierta los lunes.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Rock+Salt&display=swap">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div class="container">
<div class="vertical-marquee left-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
</marquee>
</div>
<div class="vertical-marquee right-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
OKUPA RESISTE 1312 <3
</marquee>
</div>
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="Logo de La Enredadera" class="logo">
<h2>La Enredadera</h2>
<p>Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav">
<ul>
<li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">Eventos</a></li>
<li><a href="comunicados.html">Comunicados</a></li>
<li><a href="mailto:enredadera@riseup.net">Contacto</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<div class="container">
<main class="main-content">
<header>
<h1>CSO LA ENREDADERA DE TETUÁN</h1>
<nav class="top-nav">
<ul>
<li><a href="/subdir/campa.html">campañas</a></li>
<li><a href="/">inicio</a></li>
<li><a href="https://hacklab.laenre.net">hacklab</a></li>
<li><a href="/index.html#yoga">yoga</a></li>
<li><a href="/index.html#feminismos">feminismos tetuan</a></li>
<li><a href="/index.html#fridays">f.f.f</a></li>
<li><a href="/index.html#OVT">ovt</a></li>
</ul>
</nav>
<nav class="top-nav second">
<ul>
<li><a href="/#circo/"></a>circo</li>
<li><a href="/#circo/"></a>Tienda Gratis</li>
<li><a href="/#biblioteka/">biblioteka</a></li>
<li><a href="/#Warawas/">warawas</a></li>
<li><a href="/#Hongos/">hongos</a></li>
<li><a href="/#Fermentos/">fermentos</a></li>
<li><a href="/#bicilab/">bicilab</a></li>
</ul>
</nav>
</header>
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="192" height="192">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/colectivos.html">Colectivos</a></li>
<li><a href="/calendario.html">Calendario</a></li>
<li><a href="/eventos.html">Eventos</a></li>
<li><a href="/subdir/campa.html">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html">La Enre</a></li>
<li><a href="/subdir/contacto.html" aria-current="page">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<main class="main">
<header class="cabecera">
<h1>CONTACTO</h1>
<p class="sub">Cómo llegar, cuándo venir y cómo escribirnos</p>
</header>
<a class="volver" href="/index.html">← Volver a la enredadera</a>
<article class="texto">
<h2>Dónde estamos</h2>
<p>El CSO La Enredadera está en la <strong>Calle de la Coruña nº 5</strong>, en el barrio de
Tetuán, Madrid. Metro de Estrecho y Alvarado a un paseo.</p>
<div class="tarjeta">
<h3>Asamblea de bienvenida</h3>
<p>Si quieres conocer el espacio, proponer una actividad o sumarte a un colectivo,
el sitio es la asamblea. <strong>Todos los lunes de 19:00 a 20:00</strong> atendemos a
quien viene de fuera, y a las <strong>20:00</strong> empieza la asamblea de la Enre.</p>
<p>No hace falta avisar ni traer nada preparado. Ven y cuéntanos.</p>
</div>
<h2>Escríbenos</h2>
<ul class="enlaces">
<li><a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></li>
<li><a href="https://masto.es/@csolaenre" rel="me">Mastodon</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
</ul>
<h2>Quiero organizar algo aquí</h2>
<p>La Enre acoge actividades de colectivos y eventos puntuales de gente de fuera, pero
con unos acuerdos: asistencia a la asamblea previa, turno de puerta y barra durante el
evento, limpieza del espacio después y un 10% de lo recaudado para sostener la casa.</p>
<p>La música para a las 23:00 y el espacio se desaloja a las 23:30, por respeto al
vecindario. Los conciertos y pinchadas van en la planta baja, nunca en Villa Paloma.</p>
<p><strong>Líneas rojas:</strong> no hay sitio aquí para actitudes machistas, racistas,
homófobas, tránsfobas ni excluyentes de ningún tipo. Tampoco para espacios de
masculinidad exclusiva.</p>
<h2>Qué pasa cada semana</h2>
<p>Los horarios fijos de cada colectivo están en el <a href="/calendario.html">calendario</a>,
y lo que se convoca puntualmente en <a href="/eventos.html">eventos</a>.</p>
</article>
<footer>
<p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
<p>📌 Calle de la coruña nº5</p>
<p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
</footer>
</main>
</div>
<footer class="pie-pagina">
<p>
Calle de la Coruña nº 5, Madrid ·
<a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a> ·
<a href="https://masto.es/@csolaenre">@csolaenre</a>
</p>
</footer>
</main>
</div>
</body>
</html>

View file

@ -1,87 +0,0 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Enredadera de Tetuán</title>
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div class="container">
<div class="vertical-marquee left-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
</marquee>
</div>
<div class="vertical-marquee right-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
OKUPA RESISTE 1312 <3
</marquee>
</div>
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="Logo de La Enredadera" class="logo">
<h2>La Enredadera</h2>
<p>Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav">
<ul>
<li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">Eventos</a></li>
<li><a href="comunicados.html">Comunicados</a></li>
<li><a href="mailto:enredadera@riseup.net">Contacto</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<main class="main-content">
<header>
<h1>CSO LA ENREDADERA DE TETUÁN</h1>
<nav class="top-nav">
<ul>
<li><a href="/subdir/campa.html">campañas</a></li>
<li><a href="/">inicio</a></li>
<li><a href="https://hacklab.laenre.net">hacklab</a></li>
<li><a href="/index.html#yoga">yoga</a></li>
<li><a href="/index.html#feminismos">feminismos tetuan</a></li>
<li><a href="/index.html#fridays">f.f.f</a></li>
<li><a href="/index.html#OVT">ovt</a></li>
</ul>
</nav>
<nav class="top-nav second">
<ul>
<li><a href="/#circo/"></a>circo</li>
<li><a href="/#circo/"></a>Tienda Gratis</li>
<li><a href="/#biblioteka/">biblioteka</a></li>
<li><a href="/#Warawas/">warawas</a></li>
<li><a href="/#Hongos/">hongos</a></li>
<li><a href="/#Fermentos/">fermentos</a></li>
<li><a href="/#bicilab/">bicilab</a></li>
</ul>
</nav>
</header>
<section id="ovt">
<h2> Ven a conocernos!</h2>
<p>Asamblea externos los lunes a las 19:00 - 20:00 </p>
<button <a href="https://okupanel.laenre.net">ACTIVIDADES COLECTIVES</button>
<button <a href="https://www.laenre.net/subdir/sobre_nosotrxs.html">SOBRE NOSOTRES</button>
<button <a href="https://www.laenre.net/#calendario">EVENTOS</button>
<button <a href="https://www.laenre.net/valores.html">CARTA DE VALORES</button>
</section>
<footer>
<p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
<p>📌 Calle de la coruña nº5</p>
<p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
</footer>
</main>
</div>
</body>
</html>

View file

@ -1,81 +1,68 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>La Enredadera de Tetuán — Sobre Nosotrxs</title>
<!-- Fuentes/estilos globales del sitio -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiénes somos · La Enredadera de Tetuán</title>
<meta name="description" content="Quiénes somos, cómo empezó todo y cómo vemos Tetuán. CSO La Enredadera.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="Quiénes somos · La Enredadera de Tetuán">
<meta property="og:description" content="Quiénes somos, cómo empezó todo y cómo vemos Tetuán. CSO La Enredadera.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="stylesheet" href="/index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Rock+Salt&display=swap">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div class="container">
<!-- Marquesinas laterales -->
<div class="vertical-marquee left-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
</marquee>
</div>
<div class="vertical-marquee right-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
OKUPA RESISTE 1312 &lt;3
</marquee>
</div>
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="Logo de La Enredadera" class="logo">
<h2>La Enredadera</h2>
<p>Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav">
<ul>
<li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://t.me/laenredadera">Eventos</a></li>
<li><a href="comunicados.html">Comunicados</a></li>
<li><a href="mailto:enredadera@riseup.net">Contacto</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://twitter.com/Laenredadera">Twitter</a></li>
</ul>
</nav>
</aside>
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<!-- Contenido principal -->
<main class="main-content">
<header>
<h1>CSO LA ENREDADERA DE TETUÁN</h1>
<div class="container">
<nav class="top-nav">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/CAMPAÑAS/">Campañas</a></li>
<li><a href="/colectivos/">Colectivos</a></li>
<li><a href="/feminismos/">Feminismos</a></li>
<li><a href="/hacklab/">Hacklab</a></li>
<li><a href="/OVT/">O.v.t</a></li>
<li><a href="/yoga/">Yoga</a></li>
<li><a href="/fridays/">Fridays for Future</a></li>
</ul>
</nav>
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="192" height="192">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/colectivos.html">Colectivos</a></li>
<li><a href="/calendario.html">Calendario</a></li>
<li><a href="/eventos.html">Eventos</a></li>
<li><a href="/subdir/campa.html">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html" aria-current="page">La Enre</a></li>
<li><a href="/subdir/contacto.html">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<nav class="top-nav second">
<ul>
<li><a href="/Musica_andina/">Música Andina</a></li>
<li><a href="/biblioteka/">Biblioteka</a></li>
<li><a href="/Warawas/">Warawas</a></li>
<li><a href="/felines/">Felines</a></li>
<li><a href="/Hongos/">Hongos</a></li>
<li><a href="/Fermentos/">Fermentos</a></li>
<li><a href="/Bicilab/">Bicilab</a></li>
</ul>
</nav>
</header>
<main class="main">
<!-- Página: Sobre Nosotrxs -->
<article class="content-page readable">
<h2>Sobre Nosotrxs</h2>
<header class="cabecera">
<h1>LA ENRE</h1>
<p class="sub">Quiénes somos y cómo empezó todo esto</p>
</header>
<h3>QUIÉNES SOMOS</h3>
<a class="volver" href="/index.html">← Volver a la enredadera</a>
<article class="texto">
<h2>QUIÉNES SOMOS</h2>
<p>Somos un grupo muy diverso de vecinxs de Tetuán.</p>
<p>Algunxs vivimos en el barrio desde hace muchos años, otrxs hemos llegado recientemente o simplemente venimos de visita de vez en cuando, porque Tetuán es un buen «barrio de acogida«.</p>
<p>Algunxs somos jóvenes, otrxs ya tenemos alguna edad aunque conservamos un corazón joven aún.</p>
@ -87,7 +74,7 @@
<p>Entendemos La Enredadera como un espacio para la transformación social, donde aprendemos a relacionarnos de manera diferente, eliminando las relaciones de poder y donde damos pasos para construirnos como seres más libres. Intentamos generar herramientas para cambiar verdades inamovibles de nuestra vida y de nuestra sociedad, cambiar un sistema que nos oprime, basado en desigualdades y en la explotación del planeta.</p>
<p>¿No te dan ganas de conocernos? 🙂</p>
<h3>CÓMO EMPEZÓ TODO ESTO</h3>
<h2>CÓMO EMPEZÓ TODO ESTO</h2>
<p>Esa es una buena pregunta… seguramente todas las personas que participamos en la Enredadera podríamos contar una historia diferente de cuándo pisamos la Enre por primera vez. O de quién nos contó acerca de ella, o qué estaba ocurriendo el primer día que asomamos la cabeza por la puerta. Como en casi todo, aquí cada unx tiene su historia!</p>
<p>Pero podemos contarles sobre cómo surgió la idea de okupar un Centro Social para el Barrio.</p>
<p>Durante el final de 2007 y todo el año 2008, un grupo de vecinas y vecinos de la zona de Bellas Vistas habían estado, durante meses, organizando y disfrutando actividades en plena calle. La intención era recuperar el espacio público, recordarnos que la calle es de todos y todas y que merece la pena habitarla y encontrarnos con otrxs vecinxs en ella. En esa época entre cada vez más vecinxs, organizamos varios Mercadillos de Trueque, en la plaza de la calle Tenerife esq. San Raimundo, y también juegos callejeros, dos Pasacalles por un Barrio Mestizo y Solidario y, para culminar, todo un verano de sesiones de cine nocturno en plena calle.</p>
@ -95,7 +82,7 @@
<p>Y fue así que, pensando, esas personas decidimos okupar un edificio abandonado en el barrio de Tetuán, para que el mal tiempo no fuese un problema para todo el entusiasmo y la ilusión que teníamos en nuestro proyecto. Y durante la navidad de 2008, con mucho frío, algunas personas entramos en el edificio que ahora conocemos, que entonces aún no se llamaba Enredadera, y que estaba realmente en mal estado, porque los edificios que se dejan abandonados, como quizás ya sabrán, se llenan pronto de basura, ratas, goteras, humedades, y escombros. Pero como teníamos muchas ganas de utilizar ese espacio, trabajamos durante varios meses y en Junio de 2009, oficialmente, abrió las puertas La Enredadera, con una bonita fiesta de inauguración en la que armamos un pequeño taller de radio en plena calle, samba, payasos y hasta un dragón chino que vino desde China para apoyarnos!</p>
<p>Y desde entonces… pues han pasado muchas cosas! Mucha gente nos hemos ido acercando y conociendo, y muchas actividades, muchos aprendizajes y muchas cosas que nos hemos enseñado unxs a otrxs…. y hasta un desalojo judicial, en Febrero de 2010! Y una amenaza de precinto iniciada en verano de 2016 por parte del Ayuntamiento de Madrid! Pero, como advertíamos, La Enre No Se Toca y aquí seguimos, llevando a cabo todo aquello que no hemos dejado de soñar ni por un minuto!</p>
<h3>CÓMO VEMOS NUESTRO BARRIO</h3>
<h2>CÓMO VEMOS NUESTRO BARRIO</h2>
<p>Tetuán es un barrio muy diverso, ¿no creen?</p>
<p>En sus calles se encuentran personas de muchos países diferentes, que hablan lenguas muy distintas; hay jóvenes y no tan jóvenes, hay diferentes rostros, diferentes modas, diferentes peinados y muchas formas distintas de vestir, cantar, reír, bailar…</p>
<p>Sí, ¿verdad? Nuestro barrio es muy variado! Hay calles que parecen ser de un pequeño pueblito y hay grandes avenidas que van llenas de coches… demasiados coches, es cierto, en nuestro barrio el tráfico es bien cansado, aunque ya mucha gente se decide a coger la bici porque tanto coche hace que el aire sea difícil de respirar.</p>
@ -105,14 +92,19 @@
<p>Y la misma policía también saca a veces por la fuerza a personas que okupan casas o edificios de gente rica y que llevan abandonados muchos años, para reutilizarlos y darles un uso, porque ya saben que la vivienda está muy muy cara en Tetuán, como en Madrid. Y hay gente que ya dice que «ya es suficiente» y se mete en una casa abandonada para arreglarla y hacerla su hogar, pero la policía les molesta y les echa a la calle, y eso nos parece injusto, porque es una injusticia que con la necesidad de viviendas que hay, haya casas vacías en el barrio porque a sus propietarios ricos les apetece especular con ellas.</p>
<p>Esto es más o menos un conjunto de ideas de cómo vemos el barrio. Todo esto y muchas cosas más ocurren a diario en Tetuán; lo que ocurre es que a veces no nos enteramos porque caminamos por la calle cansad@s o no prestamos mucha atención a lo que vemos en la calle, porque tenemos ganas de regresar a casa a descansar. O porque creemos que lo que vemos en la calle «no es nuestro problema», porque a veces todavía se nos olvida que lo que les ocurre a nuestrxs vecinxs, podría ocurrirnos a nosotrxs mismxs, y que si no nos cuidamos entre nosotrxs, que somos la gente del barrio, nadie nos va a cuidar jamás.</p>
<p>Nuestro barrio, como decíamos, es un barrio muy variado. Hay de todo, y eso es una suerte, porque habiendo tanta variedad, podemos tener muchos puntos de vista y muchas ideas diferentes para trabajar juntxs en un barrio mejor. Pero aun así, todavía ocurre, según observamos, algunos vivimos muy separados de otros; por eso, ya desde hace un tiempo, estamos intentando crear una red de todos los vecinos y vecinas, para que así ya no seamos más desconocidos ni extraños y que nos reconozcamos, nos saludemos y nos preocupamos los unos de las otras, las unas de los otros. Esa es la forma más bonita y real de solidaridad que conocemos. Y queremos ponerla en práctica!</p>
</article>
</article>
<footer class="pie-pagina">
<p>
Calle de la Coruña nº 5, Madrid ·
<a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a> ·
<a href="https://masto.es/@csolaenre">@csolaenre</a>
</p>
</footer>
</main>
</div>
<footer>
<p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
<p>📌 Plaza de la Resistencia, Local 3, Madrid</p>
<p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
</footer>
</main>
</div>
</body>
</html>

574
tatus.html Normal file
View file

@ -0,0 +1,574 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Tattoo Circus en el CSO La Enredadera de Tetuan: tres dias de tatuajes, charlas, conciertos, cabaret y freakshow. Calle de la Coruna 5, Madrid.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="Tattoo Circus · La Enredadera">
<meta property="og:description" content="Tattoo Circus en el CSO La Enredadera de Tetuan: tres dias de tatuajes, charlas, conciertos, cabaret y freakshow. Calle de la Coruna 5, Madrid.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<meta name="referrer" content="no-referrer-when-downgrade">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'; object-src 'none'">
<title>Tattoo Circus · La Enredadera</title>
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<style>
/* Este micrositio es oscuro por diseño. */
:root{ color-scheme: dark; }
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@font-face {
font-family: 'Code462WPink';
src: url('/Code462WPink-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root{
--neon: #E84A1F;
--neon-soft: #F26B33;
--bg: #0a0a0a;
--cream: #f4ecd8;
}
*{ box-sizing: border-box; }
html, body{
margin: 0;
padding: 0;
background: var(--bg);
color: var(--neon);
font-family: 'Special Elite', 'Courier New', monospace;
min-height: 100vh;
}
body{
background:
radial-gradient(ellipse at top, rgba(232,74,31,.12), transparent 60%),
radial-gradient(ellipse at bottom, rgba(232,74,31,.08), transparent 60%),
var(--bg);
}
.topbar{
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 22px;
border-bottom: 2px solid var(--neon);
box-shadow: 0 0 18px rgba(232,74,31,.4);
}
.topbar a.back{
font-family: 'Anton', Impact, sans-serif;
letter-spacing: 1.5px;
font-size: 1rem;
color: #000;
background: var(--neon);
padding: 8px 14px;
border-radius: 18px;
text-decoration: none;
text-transform: uppercase;
border: 2px solid #000;
box-shadow: 0 0 10px var(--neon);
transition: .2s;
}
/* :active también: en un móvil no hay :hover y el toque no respondía. */
.topbar a.back:hover,
.topbar a.back:active{
background: #000;
color: var(--neon);
border-color: var(--neon);
}
.topbar .actions{
display: flex;
gap: 10px;
align-items: center;
}
.topbar .brand{
font-family: 'Anton', Impact, sans-serif;
color: var(--neon);
letter-spacing: 2px;
text-transform: uppercase;
font-size: .95rem;
text-shadow: 0 0 8px var(--neon);
}
header.hero{
background: var(--cream);
color: #000;
text-align: center;
padding: 40px 20px 28px;
border-bottom: 4px solid #000;
}
header.hero h1{
font-family: 'Code462WPink', 'Rock Salt', cursive;
color: #000;
font-size: clamp(2.6rem, 9vw, 6rem);
margin: 0;
letter-spacing: 10px;
text-transform: uppercase;
line-height: 1;
}
header.hero .sub{
margin-top: 14px;
font-family: 'Anton', Impact, sans-serif;
letter-spacing: 6px;
text-transform: uppercase;
color: #000;
opacity: .7;
font-size: 1rem;
}
.intro{
max-width: 820px;
margin: 10px auto 30px;
padding: 0 22px;
text-align: center;
color: var(--neon-soft);
font-size: 1.1rem;
line-height: 1.6;
text-shadow: 0 0 4px rgba(232,74,31,.3);
}
.panel{
max-width: 880px;
margin: 20px auto 50px;
padding: 0;
background: #000;
border: 2px solid var(--neon);
border-radius: 14px;
overflow: hidden;
box-shadow:
0 0 18px rgba(232,74,31,.5),
inset 0 0 30px rgba(232,74,31,.08);
}
.panel h2{
font-family: 'Anton', Impact, sans-serif;
color: #000;
background: var(--neon);
display: block;
text-align: center;
padding: 14px 18px;
margin: 0;
border-radius: 0;
letter-spacing: 8px;
text-transform: uppercase;
font-size: 1.9rem;
box-shadow: 0 0 14px var(--neon);
border-top: 3px solid #000;
border-bottom: 3px solid #000;
}
.panel h2:first-of-type{ border-top: none; }
.panel .day{
padding: 0;
margin: 0;
}
.panel .slot{
display: grid;
grid-template-columns: 110px 1fr;
gap: 18px;
padding: 14px 24px;
margin: 0;
align-items: baseline;
border-bottom: 1px solid rgba(232,74,31,.35);
}
.panel .day .slot:last-child{ border-bottom: none; }
/* === FILAS ALTERNADAS CREMA / NEGRO === */
.panel .day .slot:nth-child(odd){
background: var(--cream);
color: #000;
}
.panel .day .slot:nth-child(even){
background: #000;
color: var(--neon-soft);
}
.panel .time{
font-family: 'Anton', Impact, sans-serif;
font-size: 1.2rem;
letter-spacing: 1px;
white-space: nowrap;
}
.panel .day .slot:nth-child(odd) .time{
color: #000;
text-shadow: none;
}
.panel .day .slot:nth-child(even) .time{
color: var(--neon);
text-shadow: 0 0 6px rgba(232,74,31,.5);
}
.panel .act{
font-size: 1.02rem;
line-height: 1.5;
}
.panel .act strong{
display: block;
font-family: 'Anton', Impact, sans-serif;
font-weight: 700;
font-size: 1.15em;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.panel .day .slot:nth-child(odd) .act strong{
color: #000;
text-shadow: none;
}
.panel .day .slot:nth-child(even) .act strong{
color: var(--neon);
text-shadow: 0 0 4px rgba(232,74,31,.4);
}
.panel .act .detail{
display: block;
font-size: .92rem;
margin-top: 4px;
font-style: italic;
}
.panel .day .slot:nth-child(odd) .act .detail{ color: #3a3a3a; }
.panel .day .slot:nth-child(even) .act .detail{ color: #d4a070; }
.panel .act .crew{
display: block;
font-size: .85rem;
margin-top: 5px;
}
.panel .day .slot:nth-child(odd) .act .crew{ color: #555; }
/* Sin opacidad: el naranja sobre negro está a 5.1:1 y atenuarlo al 85%
lo bajaba a 4.1:1, por debajo del mínimo. La jerarquía ya la marcan el
tamaño y el color, que alterna gris en las filas impares. */
.panel .day .slot:nth-child(even) .act .crew{ color: var(--neon); }
.panel .highlight{
padding: 2px 10px;
border-radius: 4px;
font-weight: 700;
letter-spacing: 3px;
}
.panel .day .slot:nth-child(odd) .highlight{
background: #000;
color: var(--cream);
}
.panel .day .slot:nth-child(even) .highlight{
background: var(--neon);
color: #000;
box-shadow: 0 0 8px var(--neon);
}
footer{
text-align: center;
padding: 24px 16px 36px;
color: var(--neon);
font-family: 'Anton', Impact, sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
font-size: .9rem;
text-shadow: 0 0 6px var(--neon);
}
footer a{
color: var(--neon);
text-decoration: none;
border-bottom: 1px dashed var(--neon);
}
@media (max-width: 560px){
.topbar{ padding: 10px 14px; }
.topbar .brand{ font-size: .75rem; letter-spacing: 1px; }
.topbar a.back{ font-size: .82rem; padding: 6px 10px; }
header.hero{ padding: 30px 12px 18px; }
header.hero h1{ letter-spacing: 4px; }
header.hero .sub{ font-size: .8rem; letter-spacing: 3px; }
.panel{ margin: 14px 10px 30px; padding: 0; }
.panel h2{ font-size: 1.4rem; letter-spacing: 4px; padding: 10px 12px; }
.panel .slot{ grid-template-columns: 70px 1fr; gap: 10px; padding: 12px 14px; }
.panel .time{ font-size: 1rem; }
.panel .act{ font-size: .95rem; }
.intro{ font-size: 1rem; }
}
/* === ESCRITORIO: panel centrado, fuentes equilibradas === */
@media (min-width: 1024px){
header.hero{ padding: 50px 30px 30px; }
header.hero h1{
font-size: clamp(3.5rem, 6.5vw, 5.5rem);
letter-spacing: 10px;
}
header.hero .sub{
font-size: 1.1rem;
letter-spacing: 7px;
margin-top: 16px;
}
.panel{
max-width: 1100px;
margin: 30px auto 60px;
padding: 0;
border-width: 2px;
}
.panel h2{
font-size: 2.2rem;
letter-spacing: 9px;
padding: 16px 22px;
margin: 0;
border-radius: 0;
}
.panel .day{
padding: 0;
margin: 0;
}
.panel .slot{
grid-template-columns: 150px 1fr;
gap: 28px;
padding: 18px 36px;
margin: 0;
align-items: baseline;
}
.panel .time{
font-size: 1.6rem;
letter-spacing: 2px;
}
.panel .act{
font-size: 1.2rem;
line-height: 1.5;
}
.panel .act strong{
font-size: 1.3rem;
}
.panel .act .detail{
font-size: 1rem;
margin-top: 5px;
}
.panel .act .crew{
font-size: .92rem;
margin-top: 6px;
}
.panel .highlight{
padding: 3px 12px;
font-size: 1.3rem;
}
footer{
font-size: 1rem;
letter-spacing: 5px;
padding: 32px 16px 44px;
}
.topbar{ padding: 16px 28px; }
.topbar .brand{ font-size: 1rem; letter-spacing: 2px; }
.topbar a.back{ font-size: .95rem; padding: 9px 16px; }
}
/* === PANTALLAS XL: un punto más, sin pasarse === */
@media (min-width: 1600px){
.panel{ max-width: 1280px; }
.panel .slot{ grid-template-columns: 170px 1fr; padding: 20px 44px; }
.panel .time{ font-size: 1.85rem; }
.panel .act{ font-size: 1.35rem; }
.panel .act strong{ font-size: 1.45rem; }
.panel h2{ font-size: 2.5rem; letter-spacing: 11px; }
header.hero h1{ font-size: clamp(4rem, 6vw, 6.5rem); letter-spacing: 12px; }
header.hero .sub{ font-size: 1.25rem; letter-spacing: 9px; }
}
/* Texto solo para lectores de pantalla. Esta página tiene su propio
CSS, así que la clase no se hereda de index.css. */
.sr-only{
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
</style>
</head>
<body>
<div class="topbar">
<span class="brand">★ La Enredadera de Tetuán ★</span>
<div class="actions">
<a class="back" href="/panel.html" target="_blank" rel="noopener">📺 Panel<span class="sr-only"> (abre en otra pestaña)</span></a>
<a class="back" href="/">← volver</a>
</div>
</div>
<header class="hero">
<h1>TATTOO CIRCUS</h1>
<div class="sub">Madrid · Fin de semana de jornadas</div>
</header>
<section class="panel" aria-label="Cartel del fin de semana">
<h2>Viernes</h2>
<div class="day">
<div class="slot">
<div class="time">16:00</div>
<div class="act"><strong>Apertura</strong></div>
</div>
<div class="slot">
<div class="time">16:30</div>
<div class="act">
<strong>Taller de carteo a presxs</strong>
<span class="detail">Agrietando los muros de prisión</span>
</div>
</div>
<div class="slot">
<div class="time">18:00</div>
<div class="act">
<strong>¿Se puede regularizar la vida en un sistema colonial?</strong>
<span class="detail">Dinámicas para entender el proceso de documentación desde una perspectiva decolonial y antifascista.</span>
<span class="crew">A cargo de Articulación Antirracista de Madrid y Sindicato de Manteros</span>
</div>
</div>
<div class="slot">
<div class="time">20:00</div>
<div class="act"><strong>Cena</strong></div>
</div>
<div class="slot">
<div class="time">20:30</div>
<div class="act"><strong><span class="highlight">CABARET DE CIRCO</span></strong></div>
</div>
<div class="slot">
<div class="time">23:00</div>
<div class="act"><strong>Cierre</strong></div>
</div>
</div>
<h2>Sábado</h2>
<div class="day">
<div class="slot">
<div class="time">11:30</div>
<div class="act"><strong>Apertura</strong></div>
</div>
<div class="slot">
<div class="time">12:00</div>
<div class="act">
<strong>Manifestación Orgullo Loco</strong>
<span class="detail">Centro de salud mental de Tetuán · Ni terapia ni castigos ni explotación: lokes-delinkuentes-animales por la abolición</span>
</div>
</div>
<div class="slot">
<div class="time">14:00</div>
<div class="act"><strong>Comida</strong></div>
</div>
<div class="slot">
<div class="time">16:00</div>
<div class="act">
<strong>Contra el psistema productivo</strong>
<span class="detail">Manicomios, orfanatos, asilos y otras instituciones de control, vigilancia y castigo</span>
<span class="crew">A cargo de INSANIA</span>
</div>
</div>
<div class="slot">
<div class="time">18:00</div>
<div class="act">
<strong>Salir con vida</strong>
<span class="detail">Autobiografía de un preso en lucha</span>
<span class="crew">A cargo de Toni Chavero</span>
</div>
</div>
<div class="slot">
<div class="time">20:00</div>
<div class="act"><strong>Cena</strong></div>
</div>
<div class="slot">
<div class="time">20:30</div>
<div class="act"><strong><span class="highlight">CONCIERTOS</span></strong></div>
</div>
<div class="slot">
<div class="time">23:00</div>
<div class="act"><strong>Cierre</strong></div>
</div>
</div>
<h2>Domingo</h2>
<div class="day">
<div class="slot">
<div class="time">11:30</div>
<div class="act"><strong>Apertura</strong></div>
</div>
<div class="slot">
<div class="time">12:00</div>
<div class="act">
<strong>Las familias y la cárcel</strong>
<span class="crew">A cargo de la Coordinadora de Familias y Presxs y de Famílies de Presos de Catalunya</span>
</div>
</div>
<div class="slot">
<div class="time">14:00</div>
<div class="act"><strong>Comida</strong></div>
</div>
<div class="slot">
<div class="time">16:00</div>
<div class="act">
<strong>Más fuertes que la muerte, más fuertes que la prisión</strong>
<span class="detail">Actualización de las últimas oleadas de represión anti-anarquista a nivel internacional</span>
</div>
</div>
<div class="slot">
<div class="time">18:00</div>
<div class="act">
<strong>Taller de identificación policial</strong>
<span class="detail">Herramientas para identificar a agentes policiales y proteger derechos en contextos de protesta</span>
<span class="crew">A cargo de LEGAL SOL</span>
</div>
</div>
<div class="slot">
<div class="time">19:30</div>
<div class="act">
<strong>Flamenco</strong>
<span class="detail">Un quejío contra los muros</span>
</div>
</div>
<div class="slot">
<div class="time">20:00</div>
<div class="act"><strong>Cena</strong></div>
</div>
<div class="slot">
<div class="time">20:30</div>
<div class="act"><strong><span class="highlight">FREAKSHOW</span></strong></div>
</div>
<div class="slot">
<div class="time">22:00</div>
<div class="act"><strong>Rifa</strong></div>
</div>
<div class="slot">
<div class="time">23:00</div>
<div class="act"><strong>Cierre</strong></div>
</div>
</div>
</section>
<footer>
★ Tattoo Circus · <a href="/">laenre.net</a> ★
</footer>
</body>
</html>