From f3823c4c53576666883d172d2f6a132f852f5ecd Mon Sep 17 00:00:00 2001 From: SITO Date: Thu, 9 Apr 2026 00:09:34 +0200 Subject: [PATCH] feat: calendario gancio-calendar + horarios semanales + mejoras CSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Integra gancio-calendar desde mad.convoca.la (place ID 42, CSO La Enredadera) - Añade calendario semanal de colectivos debajo del gancio con pills de colores - Corrige ID del lugar: 42 (no 286) confirmado via API - Tema light + custom properties --calendar-* para colores blanco/negro/rosa - Sidebar más compacto en móvil (65vw/220px), nav con fuente Impact uppercase - Leyenda más grande y legible (0.75rem, puntos 16px) - Márgenes 25px izquierda / 10px derecha en calendario semanal - Añade context.txt con guía completa de despliegue y referencias técnicas - Elimina botón "Calendario" redundante y espacio entre nav y calendario Co-Authored-By: Claude Sonnet 4.6 --- context.txt | 132 +++++++++++++++++++++++++++++++++++++++++++++++ index.css | 146 ++++++++++++++++++++++++++++++++++------------------ index.html | 55 ++++++++++++++------ 3 files changed, 265 insertions(+), 68 deletions(-) create mode 100644 context.txt diff --git a/context.txt b/context.txt new file mode 100644 index 0000000..05ff4b8 --- /dev/null +++ b/context.txt @@ -0,0 +1,132 @@ +================================================================================ + CSO LA ENREDADERA DE TETUÁN — CONTEXTO Y DESPLIEGUE + laenre.net +================================================================================ + +REPOSITORIO +----------- + Git: https://gitea.laenre.net/hacklab/ENRE_WEB.git + Usuario: hacklab + Rama principal: main + +ESTRUCTURA DE ARCHIVOS +---------------------- + index.html → Página principal (calendario + secciones de colectivos) + index.css → Estilos globales + convocala.html → Página de eventos embebida con gancio-calendar + calendario.html → Calendario semanal manual (referencia, no enlazado desde nav) + Code462WPink-Regular.ttf → Fuente personalizada del título + INFO/ → Imágenes de colectivos (logos, fotos) + subdir/ → Páginas secundarias (sobre_nosotrxs.html, campa.html...) + +DEPENDENCIAS EXTERNAS (CDN, sin instalar nada) +---------------------------------------------- + - Google Fonts: Rock Salt, Anton + https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap + https://fonts.googleapis.com/css2?family=Anton&display=swap + + - Gancio Calendar web component (desarrollado por CSO La Rosa): + https://rosa.frama.io/gancio-calendar/gancio-calendar.js + Repo: https://framagit.org/rosa/gancio-calendar + Playground: https://rosa.frama.io/gancio-calendar/ + + - Fuente de datos de eventos: mad.convoca.la (instancia Gancio Madrid) + Lugar: CSOA La Enredadera de Tetuán + ID en mad.convoca.la: 42 + URL pública: https://mad.convoca.la/place/CSO%20La%20Enredadera + API que usa el widget: https://mad.convoca.la/api/events?places=42 + +CÓMO FUNCIONA EL CALENDARIO +---------------------------- + El calendario de index.html usa el web component : + + + + + + + - places="42" → filtra eventos del CSOA La Enredadera + - accent_color="#ff00aa" → rosa fucsia corporativo + - Los eventos se publican en mad.convoca.la y aparecen aquí automáticamente + - Guía para publicar eventos: https://convoca.la/mad/guias/publicar_evento + + convocala.html es una página dedicada con el mismo widget + botones de acción + y enlace a la guía de publicación. + +PALETA DE COLORES +----------------- + Rosa fucsia: #ff00aa (color principal, botones, bordes) + Negro: #000000 (sidebar, fondos de títulos) + Blanco: #ffffff (fondo secciones) + Fuente: Impact / Anton (nav, calendario) + Rock Salt (cuerpo general) + Code462WPink (título h1) + +DESPLIEGUE EN EL SERVIDOR +-------------------------- + La web es HTML/CSS estático, no necesita backend ni build. + + 1. Clonar el repo en el servidor: + git clone https://hacklab@gitea.laenre.net/hacklab/ENRE_WEB.git + + 2. Servir el directorio raíz con cualquier servidor web estático: + - Nginx: apuntar document_root al directorio clonado + - Apache: igual + - Caddy: igual + - Para pruebas locales: python3 -m http.server 8080 + + 3. Actualizar desde el repo (sin reiniciar nada): + git pull + + IMPORTANTE: La web necesita servirse desde un servidor HTTP real + (no abrir index.html directamente como archivo) porque: + - Las fuentes locales usan rutas absolutas (/Code462WPink-Regular.ttf) + - El web component gancio-calendar necesita hacer fetch a mad.convoca.la + (requiere contexto HTTP para CORS) + +SERVIDOR LOCAL PARA PRUEBAS +---------------------------- + cd /home/sito/COFRE/NETACTIVIST/ENRE_WEB + python3 -m http.server 8080 + → Abrir http://localhost:8080 + +NGINX (ejemplo mínimo) +---------------------- + server { + listen 80; + server_name laenre.net www.laenre.net; + root /var/www/ENRE_WEB; + index index.html; + location / { + try_files $uri $uri/ =404; + } + } + +REDES SOCIALES Y CONTACTO +-------------------------- + Email: enredadera@riseup.net + Mastodon: https://masto.es/@csolaenre + Instagram: https://www.instagram.com/la_enredadera_de_tetuan/ + Hacklab: https://hacklab.laenre.net + Okupanel: https://okupanel.laenre.net + +NOTAS TÉCNICAS +-------------- + - El ID del lugar en mad.convoca.la es 42 (no confundir con 286 que + corresponde a otro lugar. Se confirmó via API: /api/events?places=42 + devuelve los eventos correctos de La Enredadera) + + - La rama "pruebas-calendario" en el repo local contiene una versión + anterior con el calendario semanal manual (JS puro, sin gancio). + Se puede recuperar si se quiere volver a ese enfoque. + + - El bot de reenvío a Mastodon/Bluesky está pendiente de configurar. + Cuando esté disponible, añadirlo a la sección de difusión en convocala.html + +================================================================================ diff --git a/index.css b/index.css index 1ce46e2..ce5c72b 100644 --- a/index.css +++ b/index.css @@ -147,16 +147,16 @@ main { margin-left: var(--sidebar-w); transition: margin-left .25s ease; flex-grow: 1; - padding: 0 16px 0 20px; /* 20px izquierda para separar del sidebar */ + padding: 0; text-align: center; font-size: 0.9em; } header { - background: #ff00aa; - color: white; - padding: 1px; - font-size: 2em; + background: #ff00aa; + color: white; + padding: 6px 16px 4px 20px; + font-size: 2em; } header h1 { @@ -243,6 +243,21 @@ section{ line-height: 1.6; } +/* El calendario va pegado al header, sin margen ni padding extra */ +section#agenda { + margin: 0; + padding: 0 0 0 8px; + border: none; + border-radius: 0; + box-shadow: none; + background: transparent; +} + +/* Calendario semanal: margen 25px izquierda, 10px derecha */ +section#agenda-semanal { + margin: 10px 10px 10px 25px; +} + section#feminismos{ padding-left: 16px; padding-right: 16px; @@ -530,86 +545,93 @@ button:hover { .cal-legend { display: flex; flex-wrap: wrap; - gap: 5px 14px; - margin: 10px 0 2px; + gap: 8px 20px; + margin: 14px 0 6px; justify-content: center; } .cal-legend-item { display: flex; align-items: center; - gap: 5px; - font-size: 0.55rem; + gap: 7px; + font-size: 0.75rem; font-family: var(--impact); + letter-spacing: .5px; } .cal-legend-dot { - width: 11px; - height: 11px; - border-radius: 3px; + width: 16px; + height: 16px; + border-radius: 4px; flex-shrink: 0; - border: 1px solid rgba(0,0,0,.12); + border: 1px solid rgba(0,0,0,.15); } /* ========== TELÉFONOS PEQUEÑOS (<= 480px) ========== */ @media (max-width: 480px){ - html{ font-size: 9px; } /* baja toda la escala */ - body{ overflow-x: hidden; } + body{ overflow-x: hidden; flex-direction: column; } .vertical-marquee{ display:none !important; } - body{ flex-direction: column; overflow-x: hidden; } .container{ width:100%; position: relative; } - main{ margin-left: 0 !important; font-size: 1rem; } - header{ padding: 16px 12px; padding-left:20px; font-size: 1.05em; } + main{ margin-left: 0 !important; font-size: 1rem; padding: 0; } + header{ padding: 10px 12px 6px; font-size: 1em; } - /* Hamburguesa + sidebar superpuesta */ + header h1{ font-size: clamp(1rem, 6vw, 1.4rem); margin: 2px 0 4px; } + + /* Hamburguesa */ .sb-toggle{ display:flex; } + + /* Sidebar: ancho moderado, no ocupa toda la pantalla */ .sidebar{ position: fixed; left: 0; top: 0; bottom: 0; - width: min(82vw, 300px); + width: min(65vw, 220px); transform: translateX(-100%); - z-index: 1000; overflow-y:auto; padding:20px; + z-index: 1000; overflow-y: auto; padding: 16px 14px; } + .sidebar h2{ font-size: 1.3rem; margin-top: 6px; } + .sidebar p{ font-size: 0.75rem; } + .sidebar .sidebar-nav ul{ margin-top: 20px; gap: 7px; } + .sidebar .sidebar-nav a{ font-size: 0.95rem; padding: 9px 10px; } + #nav-toggle:checked ~ .container .sidebar{ transform: translateX(0); } #nav-toggle:checked ~ .container::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999; } - /* Nav superior: 2 filas, botones más compactos */ - .top-nav ul, .top-nav.second ul{ - display:flex; - flex-wrap:wrap; - justify-content:center; - gap:6px; - padding:0 6px; - margin:10px 0 0; - } - .top-nav li, .top-nav.second li{ - list-style:none; - margin:0; - width:auto; - flex:0 0 auto; + /* Nav superior: chips compactos en 2-3 filas */ + .top-nav ul{ + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 5px 6px; + padding: 6px 8px 8px; + margin: 0; } + .top-nav li{ list-style: none; } .top-nav a, .top-nav.second a, .top-nav2 a{ - display:inline-block; - padding:5px 10px; - font-size:.8rem; + display: inline-block; + padding: 4px 10px; + font-size: .72rem; font-family: Impact, 'Anton', sans-serif; - letter-spacing: 1px; + letter-spacing: .8px; text-transform: uppercase; - line-height:1.1; - border:2px solid transparent; - border-radius:16px; - background:#fff; - color:#000; - text-decoration:none; - white-space:nowrap; + line-height: 1.2; + border: 2px solid transparent; + border-radius: 14px; + background: #fff; + color: #000; + text-decoration: none; + white-space: nowrap; } + .top-nav a:active{ border-color: #ff00aa; color: #ff00aa; } + + /* Gancio en móvil: ancho completo */ + gancio-calendar{ width: 100%; margin-left: 0; } /* Secciones y contenido */ - section{ margin:12px 0; padding:12px; border-radius:10px; } - section h2{ font-size:2rem; } + section{ margin: 10px 8px; padding: 12px; border-radius: 10px; } + section h2{ font-size: 1.1rem; } .content-page.readable{ max-width:100%; margin:16px auto 36px; padding:14px; font-size:1rem; line-height:1.7; } button{ font-size:.9em; padding:8px 12px; } - footer{ font-size:.85em; padding:14px 0; } + footer{ font-size:.85em; padding:14px 8px; } /* ====== CALENDARIO móvil ====== */ .cal{ border-radius:8px; } @@ -648,11 +670,13 @@ button:hover { .sb-toggle{ display:flex; } .sidebar{ position: fixed; left:0; top:0; bottom:0; - width: min(78vw, 320px); + width: min(55vw, 240px); background:#000; color:#fff; transform: translateX(-100%); - z-index:1000; overflow-y:auto; padding:20px; + z-index:1000; overflow-y:auto; padding:18px 14px; } + .sidebar h2{ font-size: 1.4rem; } + .sidebar .sidebar-nav a{ font-size: 1rem; padding: 10px 10px; } #nav-toggle:checked ~ .container .sidebar{ transform: translateX(0); } #nav-toggle:checked ~ .container::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999; @@ -689,6 +713,26 @@ button:hover { .cal-head-cell{ padding:7px 1px; font-size:.75rem; } } +/* ====== GANCIO-CALENDAR: colores de la Enredadera ====== */ +gancio-calendar { + display: block; + width: calc(100% - 70px); + margin-left: 35px; + + /* Fondo blanco, texto negro, líneas y acentos rosa fucsia */ + --calendar-surface: #ffffff; /* fondo principal */ + --calendar-surface-alt: #fff6fc; /* fondo alternativo (días fuera de mes, etc.) */ + --calendar-text: #111111; /* texto principal */ + --calendar-muted: #555555; /* texto secundario/hora */ + --calendar-accent: #ff00aa; /* color de acento (hoy, selección) */ + --calendar-border: #ff00aa; /* líneas del grid */ + --calendar-event-divider: #ffaadd; /* separador entre eventos */ + --calendar-chip-bg: #ff00aa; /* fondo de chips/tags */ + --calendar-chip-text: #000000; /* texto de chips/tags */ + --calendar-chip-border: #cc0088; /* borde de chips */ + --calendar-shadow: rgba(255,0,170,.12); /* sombra */ +} + /* ========== TABLETS HORIZONTALES / PORTÁTILES PEQUEÑOS (769px–1024px) ========== */ @media (min-width: 769px) and (max-width: 1024px){ diff --git a/index.html b/index.html index a6e576f..98c7151 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ La Enredadera de Tetuán + + @@ -63,25 +65,46 @@ - -
-

Calendario

+ +
-
- -
- + + + + +
+ + + +
+

Horarios Semanales

+ +
+ +
+
-
-
+
+