feat: calendario gancio-calendar + horarios semanales + mejoras CSS
- 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 <noreply@anthropic.com>
This commit is contained in:
SITO
parent
976e45f156
commit
f3823c4c53
3 changed files with 265 additions and 68 deletions
146
index.css
146
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){
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue