README.md

@@ -8,7 +8,7 @@ Web de la acampada del 26S en Madrid. HTML y CSS, sin JavaScript.
 
 1. `site/` va a `/var/www/acampada26s.net`. `deploy/nginx.conf` y `deploy/hub.conf` a nginx.
 2. `/c` es el HUB del pub OASIS, en `127.0.0.1:3000` de la misma máquina.
-3. Directo: `/c?type=feed` (los feeds del HUB). Comunicados: `/c?type=posts` (los blogposts públicos del HUB).
+3. Directo: `/c`. Comunicados: `/c?type=posts` (los blogposts públicos del HUB).
 4. Fotos subidas a mano: `tools/limpia-img.sh` antes, siempre.
 
 Código AGPL-3.0. Textos CC BY-SA 4.0. Tipografía Anton, OFL.

site/css/main.css

@@ -51,7 +51,7 @@ h3 { font-size: 26px; margin: 0 0 6px; }
 .cuadros, .botonera { display: grid; padding: 0; margin: 0; list-style: none; }
 
 .cuadros {
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   border-block: var(--bd);
 }
 .cuadros li + li { border-left: var(--bd); }
@@ -73,7 +73,7 @@ h3 { font-size: 26px; margin: 0 0 6px; }
 }
 
 .botonera {
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   gap: 16px;
   margin: 24px auto 0;
 }
@@ -111,8 +111,8 @@ footer { margin: 64px 0 24px; border-top: var(--bd); padding-top: 12px; font-siz
   .cuadros { grid-template-columns: 1fr; }
   .cuadros li + li { border-left: 0; border-top: var(--bd); }
   .cuadro { min-height: 96px; }
-  .botonera { gap: 8px; }
-  .botonera .bt { padding: 12px 4px; font-size: 18px; }
+  .botonera { grid-template-columns: 1fr 1fr; }
+  .botonera li:first-child { grid-column: 1 / -1; }
   h2 { font-size: 32px; }
 }
 
@@ -121,33 +121,18 @@ footer { margin: 64px 0 24px; border-top: var(--bd); padding-top: 12px; font-siz
   .bt:hover, .bt:focus-visible, .bt:active { transform: none; }
 }
 
-.colectivos { list-style: none; margin: 0 0 16px; padding: 0; columns: 2 300px; column-gap: 32px; }
-.colectivos > li { break-inside: avoid; border-bottom: 1px solid var(--fg); }
-.colectivos summary, .colectivos .cab {
-  display: grid;
-  grid-template-columns: 48px 1fr;
-  column-gap: 12px;
-  align-items: center;
-  padding: 8px 0;
+.colectivos { list-style: none; margin: 0 0 16px; padding: 0; columns: 2 280px; column-gap: 32px; }
+.colectivos li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--fg); }
+.colectivos a { font-family: var(--tit); font-size: 22px; text-transform: uppercase; text-decoration: none; }
+.colectivos a:hover, .colectivos a:focus-visible { color: var(--neon); }
+.colectivos span { display: block; font-size: 14px; }
+
+.unete { max-width: 480px; margin: 32px auto; }
+.unete .bt { padding: 22px 16px; font-size: 34px; }
+.bt.solo-movil { display: none; }
+
+@media (max-width: 640px) {
+  .unete { max-width: none; }
+  .bt.solo-movil { display: block; }
+  .bt.solo-pc { display: none; }
 }
-.colectivos summary { cursor: pointer; list-style: none; }
-.colectivos summary::-webkit-details-marker { display: none; }
-.colectivos img, .colectivos .sin-logo { grid-row: span 2; width: 48px; height: 48px; border: 2px solid var(--fg); }
-.colectivos .sin-logo { background: var(--fg); }
-.colectivos .n { font-family: var(--tit); font-size: 22px; line-height: 1.1; text-transform: uppercase; }
-.colectivos .n.solo { grid-row: span 2; }
-.colectivos .d { font-size: 14px; line-height: 1.3; }
-.colectivos summary .n::after { content: " +"; }
-.colectivos details[open] .n::after { content: " −"; }
-.colectivos summary:hover .n, .colectivos summary:focus-visible .n, .colectivos details[open] .n { color: var(--neon); }
-.colectivos summary:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
-.redes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 0 12px 60px; }
-.redes a {
-  display: block;
-  padding: 4px 10px;
-  font-size: 15px;
-  text-decoration: none;
-  border: 2px solid var(--fg);
-  border-radius: 8px;
-}
-.redes a:hover, .redes a:focus-visible { color: var(--neon); border-color: var(--neon); outline: none; }

site/index.html

@@ -6,7 +6,7 @@
 <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self'; img-src 'self'; font-src 'self'; base-uri 'none'; form-action 'none'">
 <meta name="referrer" content="no-referrer">
 <title>Acampada 26S</title>
-<meta name="description" content="Directo y comunicados de la acampada del 26S en Madrid.">
+<meta name="description" content="Comunicados, directo y organización de la acampada del 26S en Madrid.">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <link rel="stylesheet" href="/css/main.css">
 <link rel="preload" href="/fonts/anton.woff2" as="font" type="font/woff2" crossorigin>
@@ -16,54 +16,42 @@
   <h1 class="w">Acampada 26S</h1>
   <nav aria-label="Principal">
     <ul class="cuadros">
-      <li><a class="cuadro" href="/c?type=feed">Directo</a></li>
+      <li><a class="cuadro" href="/c">Directo</a></li>
       <li><a class="cuadro" href="/c?type=posts">Comunicados</a></li>
+      <li><a class="cuadro" href="#organizate">Organízate</a></li>
     </ul>
   </nav>
   <nav class="w" aria-label="Redes">
     <ul class="botonera">
-      <li><a class="bt" href="/c">OASIS</a></li>
-      <li><a class="bt" href="https://mastodon.social/@26s" rel="noopener noreferrer">Mastodon</a></li>
+      <li><a class="bt" href="https://play.google.com/store/apps/details?id=com.solarnethub.oasis" rel="noopener noreferrer">OASIS</a></li>
+      <li><a class="bt" href="https://x.com/acampada26s" rel="noopener noreferrer">X</a></li>
+      <li><a class="bt" href="https://www.instagram.com/acampada26s/" rel="noopener noreferrer">Instagram</a></li>
       <li><a class="bt" href="https://t.me/acampada26s" rel="noopener noreferrer">Telegram</a></li>
-      <!-- <li><a class="bt" href="https://www.instagram.com/acampada26s/" rel="noopener noreferrer">Instagram</a></li> -->
-      <!-- <li><a class="bt" href="https://x.com/acampada26s" rel="noopener noreferrer">X</a></li> -->
+      <li><a class="bt" href="https://mastodon.social/@26s" rel="noopener noreferrer">Mastodon</a></li>
     </ul>
   </nav>
 </header>
 
 <main class="w">
+  <section id="organizate">
+    <h2>Organízate</h2>
+    <p>Sigue el <a href="/c">directo</a> en OASIS sin instalar nada. Para organizarte en colectivo de forma segura, usa OASIS.</p>
+    <p class="unete">
+      <a class="bt solo-movil" href="https://play.google.com/store/apps/details?id=com.solarnethub.oasis" rel="noopener noreferrer">Únete</a>
+      <a class="bt solo-pc" href="https://code.03c8.net/KrakensLab/oasis/src/master/docs/install/install.md" rel="noopener noreferrer">Únete</a>
+    </p>
+    <p>Crea una comisión o únete con la invitación de tu colectivo.</p>
+  </section>
+
   <section id="colectivos">
     <h2>Colectivos</h2>
-    <p>Centros sociales y colectivos que están en la acampada. Toca uno para ver sus redes.</p>
+    <p>Centros sociales y colectivos de Madrid. Aquí también hay información y asambleas.</p>
     <ul class="colectivos">
-      <li><details><summary><img src="/img/colectivos/casika.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CSOA La Casika</span><span class="d">Móstoles</span></summary><ul class="redes"><li><a href="https://www.instagram.com/lacasika.csoa/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://apoyalacasika.wordpress.com" rel="noopener noreferrer">Blog de apoyo</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/inquilinas.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Sindicato de Inquilinas</span><span class="d">Vivienda</span></summary><ul class="redes"><li><a href="https://inquilinato.org" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/inquilinato_madrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/InquilinatoMad" rel="noopener noreferrer">X</a></li><li><a href="https://t.me/inquilinatoMad" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/larosa.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CSO La Rosa</span><span class="d">Centro · La Latina</span></summary><ul class="redes"><li><a href="https://csolarosa.net" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/CSO_LaRosa/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://t.me/CSO_LaRosa" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/eko.webp" alt="" width="48" height="48" loading="lazy"><span class="n">ESLA EKO</span><span class="d">Carabanchel</span></summary><ul class="redes"><li><a href="https://eslaeko.net" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/eko_carabanchel/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/EKO_Carabanchel" rel="noopener noreferrer">X</a></li><li><a href="https://t.me/ESLAEkoDifusion" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/enredadera.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CSOA La Enredadera</span><span class="d">Tetuán</span></summary><ul class="redes"><li><a href="https://www.laenre.net" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/la_enredadera_de_tetuan/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://t.me/laenredadera" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/animosa.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CSO La Animosa</span><span class="d">Hortaleza</span></summary><ul class="redes"><li><a href="https://www.instagram.com/csolaanimosa/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/CSOLaAnimosa" rel="noopener noreferrer">X</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/xr.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Rebelión o Extinción</span><span class="d">Clima</span></summary><ul class="redes"><li><a href="https://www.instagram.com/xrmadrid_/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/xrmadrid_" rel="noopener noreferrer">X</a></li><li><a href="https://t.me/XRMadrid" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
-      <li><div class="cab"><span class="sin-logo" aria-hidden="true"></span><span class="n">PUCVM</span><span class="d">Sindicatos y asambleas de vivienda de Madrid</span></div></li>
-      <li><details><summary><img src="/img/colectivos/ir.webp" alt="" width="48" height="48" loading="lazy"><span class="n solo">Izquierda Revolucionaria</span></summary><ul class="redes"><li><a href="https://izquierdarevolucionaria.net/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/izquierdarevol/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/IzquierdaRevol" rel="noopener noreferrer">X</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/liza.webp" alt="" width="48" height="48" loading="lazy"><span class="n">LIZA</span><span class="d">Plataforma anarquista</span></summary><ul class="redes"><li><a href="https://www.instagram.com/liza__madrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/Liza__Madrid" rel="noopener noreferrer">X</a></li><li><a href="https://lizaplataforma.com/" rel="noopener noreferrer">Web</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/ariskas.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Ariskas</span><span class="d">Vallekas</span></summary><ul class="redes"><li><a href="https://www.instagram.com/ariskas.vk/" rel="noopener noreferrer">Instagram</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/solidaridad.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Solidaridad Obrera</span><span class="d">Sindicato</span></summary><ul class="redes"><li><a href="https://www.solidaridadobrera.org/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/soliobrera/" rel="noopener noreferrer">Instagram</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/cnt.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CNT Madrid</span><span class="d">Sindicato</span></summary><ul class="redes"><li><a href="https://madrid.cnt.es/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/cntmadrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://t.me/CNTMadrid" rel="noopener noreferrer">Telegram</a></li><li><a href="https://bsky.app/profile/cnt-madrid.bsky.social" rel="noopener noreferrer">Bluesky</a></li><li><a href="https://kolektiva.social/@cntmadrid" rel="noopener noreferrer">Mastodon</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/fff.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Fridays For Future</span><span class="d">Clima</span></summary><ul class="redes"><li><a href="https://www.instagram.com/fridaysformadrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://mastodon.social/@fridaysformadrid" rel="noopener noreferrer">Mastodon</a></li><li><a href="https://bsky.app/profile/fridaysformadrid.bsky.social" rel="noopener noreferrer">Bluesky</a></li><li><a href="https://t.me/fffmadrid" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/crt.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CRT</span><span class="d">Corriente Revolucionaria de Trabajadores y Trabajadoras</span></summary><ul class="redes"><li><a href="https://crtweb.org/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/crtorg/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/CRTorg" rel="noopener noreferrer">X</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/contracorriente.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Contracorriente</span><span class="d">Juventud</span></summary><ul class="redes"><li><a href="https://www.instagram.com/contrac_mad/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/contrac_mad" rel="noopener noreferrer">X</a></li></ul></details></li>
-      <li><div class="cab"><span class="sin-logo" aria-hidden="true"></span><span class="n solo">Luciérnagas</span></div></li>
-      <li><div class="cab"><span class="sin-logo" aria-hidden="true"></span><span class="n solo">Articulación Antirracista Madrid</span></div></li>
-      <li><details><summary><img src="/img/colectivos/bbaa.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Asamblea BBAA x la Pública</span><span class="d">Bellas Artes · UCM x la Pública</span></summary><ul class="redes"><li><a href="https://ucmxlapublica.org/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/ucm_por_la_publica/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/UCMporlaPublica" rel="noopener noreferrer">X</a></li><li><a href="https://t.me/PlataformaUCM" rel="noopener noreferrer">Telegram</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/sindicato-estudiantes.webp" alt="" width="48" height="48" loading="lazy"><span class="n solo">Sindicato de Estudiantes</span></summary><ul class="redes"><li><a href="https://www.sindicatodeestudiantes.net/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/sindestudmadrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/SEMadrid_" rel="noopener noreferrer">X</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/marika.webp" alt="" width="48" height="48" loading="lazy"><span class="n solo">Movimiento Marika Madrid</span></summary><ul class="redes"><li><a href="https://x.com/marikasMMM" rel="noopener noreferrer">X</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/trans.webp" alt="" width="48" height="48" loading="lazy"><span class="n solo">Trans en Lucha</span></summary><ul class="redes"><li><a href="https://www.instagram.com/transenlucha/" rel="noopener noreferrer">Instagram</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/ecologistas.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Ecologistas en Acción</span><span class="d">Ecologismo social</span></summary><ul class="redes"><li><a href="https://www.ecologistasenaccion.org/federaciones/comunidad-de-madrid/madrid/" rel="noopener noreferrer">Web</a></li><li><a href="https://www.instagram.com/ecologistas_madrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://bsky.app/profile/madrid.ecologistasenaccion.org" rel="noopener noreferrer">Bluesky</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/legal-sol.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Comisión Legal Sol</span><span class="d">Apoyo legal</span></summary><ul class="redes"><li><a href="https://legal15m.wordpress.com/" rel="noopener noreferrer">Web</a></li><li><a href="https://x.com/LegalSol" rel="noopener noreferrer">X</a></li><li><a href="https://bsky.app/profile/legalsol.bsky.social" rel="noopener noreferrer">Bluesky</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/cjs.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CJS</span><span class="d">Coordinadora Juvenil Socialista</span></summary><ul class="redes"><li><a href="https://www.instagram.com/cjsmadrid_/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/CJS_Madrid" rel="noopener noreferrer">X</a></li><li><a href="https://bsky.app/profile/cjsmadrid.bsky.social" rel="noopener noreferrer">Bluesky</a></li><li><a href="https://cjsocialista.com/" rel="noopener noreferrer">Web</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/cjc.webp" alt="" width="48" height="48" loading="lazy"><span class="n">CJC</span><span class="d">Colectivos de Jóvenes Comunistas</span></summary><ul class="redes"><li><a href="https://www.instagram.com/cjcmadrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://juventudcomunista.es/" rel="noopener noreferrer">Web</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/frente-estudiantes.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Frente de Estudiantes</span><span class="d">Sindicato estudiantil</span></summary><ul class="redes"><li><a href="https://www.instagram.com/fde_madrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/fde_madrid" rel="noopener noreferrer">X</a></li><li><a href="https://frentedeestudiantes.es/" rel="noopener noreferrer">Web</a></li></ul></details></li>
-      <li><details><summary><img src="/img/colectivos/palestina.webp" alt="" width="48" height="48" loading="lazy"><span class="n">Acampada x Palestina</span><span class="d">Solidaridad con Palestina</span></summary><ul class="redes"><li><a href="https://www.instagram.com/acampadaxpalestinamadrid/" rel="noopener noreferrer">Instagram</a></li><li><a href="https://x.com/acampadamad" rel="noopener noreferrer">X</a></li></ul></details></li>
+      <li><a href="https://csolarosa.net" rel="noopener noreferrer">CSO La Rosa</a> <span>Centro · La Latina</span></li>
+      <li><a href="https://eslaeko.net" rel="noopener noreferrer">ESLA EKO</a> <span>Carabanchel</span></li>
+      <li><a href="https://www.laenre.net" rel="noopener noreferrer">CSOA La Enredadera</a> <span>Tetuán</span></li>
+      <li><a href="https://www.instagram.com/csolaanimosa/" rel="noopener noreferrer">CSO La Animosa</a> <span>Hortaleza</span></li>
+      <li><a href="https://apoyalacasika.wordpress.com" rel="noopener noreferrer">CSOA La Casika</a> <span>Móstoles</span></li>
     </ul>
     <p>¿Falta tu colectivo? Escribe a la comisión de comunicación en OASIS.</p>
   </section>