From 976e45f15635c406fb1b6a54d4a36b7bbcb2b008 Mon Sep 17 00:00:00 2001 From: SITO Date: Wed, 8 Apr 2026 23:29:28 +0200 Subject: [PATCH] mejora css/js: calendario compacto, nav Impact, FFF, hoy y leyenda MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - index.css: sidebar 210px, nav con fuente Impact/Anton uppercase y tamaño rem absoluto, calendario sin gap (bordes internos), celdas 68px, pills 12px, daynum 0.88rem, hoy resaltado con círculo rosa, padding lateral en main para separar del sidebar, corrección de bugs (font-size 4px→legible, max-width 6mv→100%) - index.html: JS actualizado con Fridays for Future en 2º y último viernes, resaltado del día actual, leyenda de colectivos, todos los colectivos del último pull (euskera, teatro, montaña, asambleas) Co-Authored-By: Claude Sonnet 4.6 --- index.css | 417 ++++++++++++++++++----------------- index.html | 634 ++++++++++++++++++++++++----------------------------- 2 files changed, 503 insertions(+), 548 deletions(-) diff --git a/index.css b/index.css index b65be1a..1ce46e2 100644 --- a/index.css +++ b/index.css @@ -11,8 +11,8 @@ } :root{ - --sidebar-w: 250px; - --sidebar-rail: 56px; + --sidebar-w: 210px; /* reducido de 250px */ + --sidebar-rail: 48px; /* “Impact” consistente: Anton (Google) + fallback a Impact */ --impact: 'Anton', Impact, Haettenschweiler, 'Arial Black', sans-serif; @@ -144,12 +144,12 @@ body { main { - margin-left: var(--sidebar-w); - transition: margin-left .25s ease; - flex-grow: 1; - padding: 0px 0px; - text-align: center; - font-size: 0.9em; + margin-left: var(--sidebar-w); + transition: margin-left .25s ease; + flex-grow: 1; + padding: 0 16px 0 20px; /* 20px izquierda para separar del sidebar */ + text-align: center; + font-size: 0.9em; } header { @@ -166,9 +166,9 @@ header h1 { .top-nav a, .top-nav.second a { - font-family: 'Rock Salt'; - letter-spacing: 3px; - font-size: 0.5em; + font-family: Impact, 'Anton', sans-serif; + letter-spacing: 1.5px; + font-size: 0.9rem; /* rem absoluto, no hereda nada */ } @@ -199,12 +199,12 @@ header h1 { .top-nav ul { list-style: none; - padding: 0; + padding: 8px 10px; margin: 0; display: flex; - flex-wrap: wrap; /* Permite que haya varias filas si no caben */ + flex-wrap: wrap; justify-content: center; - gap: 5px; /* Espacio entre enlaces */ + gap: 6px 8px; } .top-nav li { @@ -215,43 +215,33 @@ header h1 { text-decoration: none; background-color: white; color: black; - font-weight: bold; - padding: 15px 15px; - border-radius: 20px; - transition: background 0.3s, color 0.3s; - font-size: 0.5em; + font-weight: 900; + padding: 6px 13px; + border-radius: 18px; + border: 2px solid transparent; display: inline-block; + text-transform: uppercase; + transition: color .15s, border-color .15s, box-shadow .15s; } .top-nav a:hover { - background: white; color: #ff00aa; - text-decoration: none; - background-color: white; - border: 2px solid #ff00aa; - box-shadow: 4px 8px black; - border-radius: 12px; - padding: clamp(20px, 2vw, 24px); - text-align: center; - user-select: none; - - transition: transform .18s ease, box-shadow .18s ease, background .18s ease; - + border-color: #ff00aa; + box-shadow: 2px 3px 0 #ff00aa; } /* Secciones del index: fondo blanco, borde rosa, texto negro */ section{ - background: #fff; /* fondo blanco */ - color: #111; /* texto negro */ - padding: 18px 20px; - padding-left: 50px; - margin: 16px auto; - max-width: 6mv; - border: 2px solid #ff00aa; /* borde rosa */ + background: #fff; + color: #111; + padding: 14px 18px; + margin: 10px auto; + max-width: 100%; + border: 2px solid #ff00aa; border-radius: 12px; - box-shadow: 0 6px 18px rgba(0,0,0,.08); + box-shadow: 0 4px 14px rgba(0,0,0,.07); line-height: 1.6; -} +} section#feminismos{ padding-left: 16px; @@ -391,166 +381,172 @@ button:hover { ̣ /* ====== CALENDARIO ====== */ -.cal { - display: grid; - gap: 8px; - background: #FFFFFF; - border: 1px solid rgba(0,255,255,0.18); - border-radius: 12px; - padding: 10px; - box-shadow: 0 0 20px rgba(0,255,255,0.05); + +/* Botones prev / next */ +.button { + background: #000; + color: #ff00aa; + border: 2px solid #ff00aa; + border-radius: 8px; + padding: 5px 14px; + font-size: 1rem; + font-weight: bold; + font-family: inherit; + cursor: pointer; + transition: background .15s, color .15s, transform .1s; + line-height: 1; +} +.button:hover { + background: #ff00aa; + color: #000; + transform: scale(1.08); } -.cal-controls{ +.cal-controls { display: flex; align-items: center; justify-content: center; - gap: 10px; - margin: 6px 0 12px; -} -.cal-title{ - min-width: 300px; - text-align: center; - font-weight: bold; - color: pink; - text-shadow: 0 0 8px rgba(0,255,255,0.25); + gap: 12px; + margin: 6px 0 10px; } -.cal-row{ - display: grid; - grid-template-columns: repeat(7, minmax(0,1fr)); - gap: 8px; +.cal-title { + min-width: 180px; + text-align: center; + font-weight: bold; + font-size: 0.9rem; + color: #ff00aa; + letter-spacing: 2px; + text-transform: uppercase; } -.cal-cell{ - position: relative; - background: #FFFFFF; - border: 1px solid rgba(255,0,171,1); /* líneas rosas */ - border-radius: 8px; - min-height: 90px; + +/* Grid: sin gap, bordes como líneas internas */ +.cal { + background: #fff; + border: 2px solid #ff00aa; + border-radius: 12px; overflow: hidden; - padding-top:28px; + box-shadow: 0 4px 18px rgba(255,0,170,.15); } -.cal-head{ - opacity: 0.9; + +.cal-row { + display: grid; + grid-template-columns: repeat(7, 1fr); + border-bottom: 1px solid rgba(255,0,170,.15); } -.cal-head-cell{ - background: #FFFFFFF - border: 1px solid rgba(255,0,171,1); +.cal-row:last-child { border-bottom: none; } + +/* Cabecera días */ +.cal-head { background: #000; } + +.cal-head-cell { + background: #000; + color: #ff00aa; text-align: center; font-weight: bold; - padding: 8px 0; - border: 1px solid rgba(255,0,171,1); -} -.cal-daynum{ - position: absolute; - top: 6px; left: 20px; - font-size: 1.2rem; - color: var(--muted); - z-index: 2; -} -.cal-empty{ - background: ; - border-style: dashed; - opacity: 0.5; + font-size: 0.78rem; + padding: 8px 2px; + border-right: 1px solid rgba(255,0,170,.2); } +.cal-head-cell:last-child { border-right: none; } -/* celdas con evento: fondo con imagen + overlay oscuro */ -.cal-event{ - background: ; -} -.cal-event::before{ - content: ""; - position: absolute; inset: 0; - background-image: var(--bgimg); - background-size: cover; - background-position: center; - filter: contrast(1.05) saturate(1.05); - opacity: 0.9; - transition: transform .25s ease, opacity .2s ease; -} -.cal-event::after{ - content: ""; - position: absolute; inset: 0; - background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.6)); - pointer-events: none; -} -.cal-event .cal-label{ - position: absolute; - left: 8px; bottom: 16px; - z-index: 2; - display: inline-block; - background: var(--green); - color: #000; - border: 1px solid #0f0; - padding: 4px 8px; - border-radius: 6px; - font-weight: 700; - box-shadow: 0 0 8px rgba(0,255,0,0.35); -} - -.cal-event:hover::before{ - transform: scale(1.04); - opacity: 1; -} - -/* badge leyenda */ -.cal-legend{ - margin-top: 10px; - color: var(--muted); -} -.badge{ - display: inline-block; - border: 1px solid rgba(0,255,0,0.5); - color: var(--green); - padding: 2px 6px; - border-radius: 6px; - margin-right: 6px; -} - -/* --- Corrección de typo existente --- */ -.cal-head-cell{ - background: #FFFFFF; /* antes tenías #FFFFFFF */ - border: 1px solid rgba(255,0,171,1); - text-align: center; - font-weight: bold; - padding: 8px 0; -} - -/* --- Ajustes de celda para que quepan las tiras --- */ -.cal-cell{ - min-height: 110px; /* un poco más alta */ - padding-top: 22px; /* deja hueco al número del día */ -} - -/* Contenedor vertical de tiras */ -.cal-pills{ +/* Celda de día */ +.cal-cell { position: relative; - z-index: 3; /* por encima de ::before/::after */ + background: #fff; + border-right: 1px solid rgba(255,0,170,.1); + min-height: 68px; + padding: 20px 3px 3px; + overflow: hidden; +} +.cal-cell:last-child { border-right: none; } + +/* Fin de semana: fondo levemente rosado */ +.cal-cell:nth-child(6), +.cal-cell:nth-child(7) { background: #fff6fc; } + +/* HOY */ +.cal-today { + background: #fff0f8 !important; + box-shadow: inset 0 0 0 2px #ff00aa; +} + +.cal-daynum { + position: absolute; + top: 3px; + left: 5px; + font-size: 0.88rem; + font-weight: bold; + color: #444; + z-index: 2; +} + +.cal-today .cal-daynum { + background: #ff00aa; + color: #fff; + border-radius: 50%; + width: 22px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.72rem; + top: 2px; + left: 2px; +} + +.cal-empty { + background: #f5f5f5 !important; + opacity: .5; +} + +/* Pills */ +.cal-pills { display: flex; flex-direction: column; - gap: 7px; - margin-top: 15px; + gap: 2px; + margin-top: 1px; } -/* Tira (pill) de cada colectivo */ -.cal-pill{ +.cal-pill { background: var(--bg); color: var(--fg); - border: 1px solid rgba(0,0,0,.15); - border-radius: 6px; - padding: 3px 6px; + border-radius: 4px; + padding: 2px 5px; + font-size: 12px; font-weight: 700; - font-size: 16px; - line-height: 1.1; - box-shadow: 0 0 6px rgba(0,0,0,.06); + line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + border: 1px solid rgba(0,0,0,.08); + cursor: pointer; +} +.cal-pill:hover { + filter: brightness(1.08); } -.cal-pill:hover{ - filter: brightness(1.05); - box-shadow: 0 0 10px rgba(0,0,0,.12); +/* Leyenda */ +.cal-legend { + display: flex; + flex-wrap: wrap; + gap: 5px 14px; + margin: 10px 0 2px; + justify-content: center; +} +.cal-legend-item { + display: flex; + align-items: center; + gap: 5px; + font-size: 0.55rem; + font-family: var(--impact); +} +.cal-legend-dot { + width: 11px; + height: 11px; + border-radius: 3px; + flex-shrink: 0; + border: 1px solid rgba(0,0,0,.12); } @@ -594,15 +590,18 @@ button:hover { } .top-nav a, .top-nav.second a, .top-nav2 a{ display:inline-block; - padding:5px 9px; /* más pequeño */ - font-size:.8em; /* más pequeño */ + padding:5px 10px; + font-size:.8rem; + font-family: Impact, 'Anton', sans-serif; + letter-spacing: 1px; + text-transform: uppercase; line-height:1.1; - border:1px solid #ff00aa; - border-radius:16px; /* un poco más compacto */ + border:2px solid transparent; + border-radius:16px; background:#fff; color:#000; text-decoration:none; - white-space:nowrap; /* evita que se partan dentro del botón */ + white-space:nowrap; } /* Secciones y contenido */ @@ -612,14 +611,18 @@ button:hover { button{ font-size:.9em; padding:8px 12px; } footer{ font-size:.85em; padding:14px 0; } - /* ====== CALENDARIO (sin scroll lateral) ====== */ - .cal{ width:100%; padding:8px; gap:4px; border-radius:10px; } - .cal-row{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; } - .cal-cell{ min-height:56px; padding-top:18px; } - .cal-daynum{ font-size:1rem; top:6px; left:6px; z-index:2; } - .cal-pills{ gap:7px; margin-top:6px; } - .cal-pill{ font-size:.72rem; padding:2px 4px; line-height:1.3; } - .cal-head .cal-head-cell{ padding:6px 0; font-size:1.1rem; } + /* ====== CALENDARIO móvil ====== */ + .cal{ border-radius:8px; } + .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); } + .cal-cell{ min-height:52px; padding:17px 2px 2px; } + .cal-daynum{ font-size:.65rem; top:2px; left:3px; } + .cal-today .cal-daynum{ width:16px; height:16px; font-size:.55rem; } + .cal-pills{ gap:1px; margin-top:0; } + .cal-pill{ font-size:7px; padding:1px 2px; border-radius:3px; } + .cal-head-cell{ padding:6px 1px; font-size:.7rem; } + .cal-title{ font-size:.75rem; min-width:140px; } + .cal-legend{ gap:3px 8px; } + .cal-legend-item{ font-size:.5rem; } } @@ -662,8 +665,10 @@ button:hover { } .top-nav li, .top-nav.second li{ list-style:none; } .top-nav a, .top-nav.second a, .top-nav2 a{ - display:block; padding:8px 12px; font-size:.95em; - border:1px solid #ff00aa; border-radius:20px; + display:inline-block; padding:7px 13px; font-size:.88rem; + font-family: Impact, 'Anton', sans-serif; + text-transform: uppercase; letter-spacing: 1px; + border:2px solid transparent; border-radius:18px; background:#fff; color:#000; text-decoration:none; } @@ -673,14 +678,15 @@ button:hover { button{ font-size:1em; padding:10px 16px; } footer{ font-size:.95em; padding:16px 0; } - /* Calendario fluido (sin scroll lateral) */ - .cal{ width:100%; padding:10px; gap:6px; border-radius:12px; } - .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; } - .cal-cell{ min-height:70px; padding-top:20px; } - .cal-daynum{ font-size:1rem; top:6px; left:8px; z-index:2; } - .cal-pills{ gap:5px; margin-top:8px; } - .cal-pill{ font-size:4px; padding:3px 5px; } - .cal-head .cal-head-cell{ padding:8px 0; font-size:1rem; } + /* Calendario tablet vertical */ + .cal{ border-radius:10px; } + .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); } + .cal-cell{ min-height:64px; padding:20px 3px 3px; } + .cal-daynum{ font-size:.72rem; top:3px; left:5px; } + .cal-today .cal-daynum{ width:18px; height:18px; font-size:.6rem; } + .cal-pills{ gap:2px; margin-top:1px; } + .cal-pill{ font-size:8.5px; padding:1px 3px; } + .cal-head-cell{ padding:7px 1px; font-size:.75rem; } } /* ========== TABLETS HORIZONTALES / PORTÁTILES PEQUEÑOS (769px–1024px) ========== */ @@ -707,19 +713,24 @@ button:hover { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0; } .top-nav li, .top-nav.second li{ list-style:none; } - .top-nav a, .top-nav.second a{ font-size:1em; padding:10px 15px; } + .top-nav a, .top-nav.second a{ + font-size:.9rem; padding:6px 13px; + font-family: Impact, 'Anton', sans-serif; + text-transform: uppercase; letter-spacing:1px; + } section{ padding:20px; max-width:90%; margin:12px auto; } button{ font-size:1em; padding:12px 22px; } footer{ font-size:1em; padding:22px; } - /* Calendario (compacto, sin desbordes) */ - .cal{ width:100%; padding:10px; gap:6px; border-radius:12px; } - .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; } - .cal-cell{ min-height:84px; padding-top:22px; } - .cal-daynum{ font-size:2rem; } - .cal-pills{ margin-top:8px; gap:6px; } - .cal-pill{ font-size:4px; } + /* Calendario tablet horizontal */ + .cal{ border-radius:10px; } + .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); } + .cal-cell{ min-height:72px; padding:21px 3px 3px; } + .cal-daynum{ font-size:.76rem; top:3px; left:5px; } + .cal-today .cal-daynum{ width:18px; height:18px; font-size:.62rem; } + .cal-pills{ margin-top:1px; gap:2px; } + .cal-pill{ font-size:9px; padding:2px 4px; } } diff --git a/index.html b/index.html index 45660b8..a6e576f 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,3 @@ - @@ -9,409 +8,354 @@ - - -
-
- - NI DIOS NI AMO, NI PATRIA NI ESTADO -0-> - -
+ + +
-
- - OKUPA RESISTE 1312 <3 - -
+
+ + NI DIOS NI AMO, NI PATRIA NI ESTADO -0-> + +
- - -
-
-

CSO LA ENREDADERA DE TETUÁN

- -
- + - -
-

Calendario

-
- -
- -
+ +
+

Calendario

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

Feminismos

+

Feminismo Tetuán es una asamblea de barrio que nace a raíz del movimiento del 8M.

+ + + Feminismos Tetuán + + + LinkTree + Instagram + +

Es una asamblea abierta no mixta transinclusiva. Nos reunimos los jueves a las 20 en el CSO La Enredadera.

+

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.

+
+
+

Fridays for Future

+

Somos parte del movimiento global juvenil por la Justicia Climática.

-
+ + Fridays for Future Madrid + + + Fridays for Future Madrid + -
-

Feminismos

- -

- Feminismo Tetuán es una asamblea de barrio que nace a raíz - del movimiento del 8M. -

+ LinkTree + Instagram +
+
+

Colectivo de Vivienda

+

Asamblea abierta desde donde defendemos que la vivienda es para quien la habita y no un negocio.

- - Feminismos Tetuán - + + Organización Vivienda Tetuán + + Instagram +
- - LinkTree - - - - Instagram - - -

- Es una asamblea abierta no mixta transinclusiva. -
- Nos reunimos los jueves a las 20 en el CSO La Enredadera, - donde organizamos acciones, debates. -

- -

- 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. Esta clínica está - bajo el ataque constant> -

- -

- También realizamos debates y otras acciones, como salir a la plaza una vez al - mes para visibilizar las violencias que sufren las mujeres en la sociedad - patriarcal, o debates sobre temas como la pronografía, la prostitución, etc. -

- -

- Queremos mantener viva la lucha contra la sociedad patriarcal - y lo vemos como algo muy necesario en el momento actual, en el que la extrema - derecha está atacando los derechos de las mujeres y personas trans. De ahí - que sigamos con nues> -

-
+
+

Circo

+

Información próximamente.

+
-
-

Fridays for Future

-

Somos parte del movimiento global juvenil por la Justicia Climática.

+
+

Hacklab

+ + Hacklab La Raíz + + + + + hacklab.laenre.net +
- - Fridays for Future Madrid - - - Fridays for Future Madrid - +
+

Tienda Gratis

+

Información próximamente.

+
- - LinkTree - - - Instagram - -
+
+

Biblioteca Libre

+

Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.

+ Mas información +
-
-

Colectivo de Vivienda

-

Asamblea abierta desde donde defendemos que la vivienda es para quien la habita y no un negocio.

- - Organización Vivienda Tetuán - +
+

Warawas

+

Información próximamente.

+
- - Instagram - -
-
-

Circo

-

Información próximamente.

-
+
+

Hongos

+

Información próximamente.

+
-
-

Hacklab

- - - +
+

Fermentos

+

Información próximamente.

+
- - - - - hacklab.laenre.net - -
+
+

BICILAB

+

Bocata de espaguetis todos los domingos a las 17:00 nos engrasamos las manos y recuperamos tu bicicleta!

+ Descargar Actas +
-
-

Tienda Gratis

-

Información próximamente.

-
-
-

Biblioteca Libre

-

Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.

+ +
- - Mas información - - - -
-

Warawas

-

Información próximamente.

-
- -
-

Hongos

-

Información próximamente.

-
- -
-

Fermentos

-

Información próximamente.

-
- -
-

BICILAB

-

Bocata de espaguetis todos los domingos a las 17:00 nos engrasamos las manos y recuperamos tu bicicleta!

- - - Descargar Actas - -
- - - -
+