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

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>