8bcaf1644c
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.
574 lines
17 KiB
HTML
574 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Tattoo Circus en el CSO La Enredadera de Tetuan: tres dias de tatuajes, charlas, conciertos, cabaret y freakshow. Calle de la Coruna 5, Madrid.">
|
|
<!-- 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="Tattoo Circus · La Enredadera">
|
|
<meta property="og:description" content="Tattoo Circus en el CSO La Enredadera de Tetuan: tres dias de tatuajes, charlas, conciertos, cabaret y freakshow. Calle de la Coruna 5, Madrid.">
|
|
<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">
|
|
<meta name="referrer" content="no-referrer-when-downgrade">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'; object-src 'none'">
|
|
<title>Tattoo Circus · La Enredadera</title>
|
|
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<link rel="icon" href="/favicon.ico" sizes="any">
|
|
<style>
|
|
/* Este micrositio es oscuro por diseño. */
|
|
:root{ color-scheme: dark; }
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
|
|
|
|
@font-face {
|
|
font-family: 'Code462WPink';
|
|
src: url('/Code462WPink-Regular.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root{
|
|
--neon: #E84A1F;
|
|
--neon-soft: #F26B33;
|
|
--bg: #0a0a0a;
|
|
--cream: #f4ecd8;
|
|
}
|
|
|
|
*{ box-sizing: border-box; }
|
|
|
|
html, body{
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
color: var(--neon);
|
|
font-family: 'Special Elite', 'Courier New', monospace;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
body{
|
|
background:
|
|
radial-gradient(ellipse at top, rgba(232,74,31,.12), transparent 60%),
|
|
radial-gradient(ellipse at bottom, rgba(232,74,31,.08), transparent 60%),
|
|
var(--bg);
|
|
}
|
|
|
|
.topbar{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 22px;
|
|
border-bottom: 2px solid var(--neon);
|
|
box-shadow: 0 0 18px rgba(232,74,31,.4);
|
|
}
|
|
|
|
.topbar a.back{
|
|
font-family: 'Anton', Impact, sans-serif;
|
|
letter-spacing: 1.5px;
|
|
font-size: 1rem;
|
|
color: #000;
|
|
background: var(--neon);
|
|
padding: 8px 14px;
|
|
border-radius: 18px;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
border: 2px solid #000;
|
|
box-shadow: 0 0 10px var(--neon);
|
|
transition: .2s;
|
|
}
|
|
/* :active también: en un móvil no hay :hover y el toque no respondía. */
|
|
.topbar a.back:hover,
|
|
.topbar a.back:active{
|
|
background: #000;
|
|
color: var(--neon);
|
|
border-color: var(--neon);
|
|
}
|
|
|
|
.topbar .actions{
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.topbar .brand{
|
|
font-family: 'Anton', Impact, sans-serif;
|
|
color: var(--neon);
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
font-size: .95rem;
|
|
text-shadow: 0 0 8px var(--neon);
|
|
}
|
|
|
|
header.hero{
|
|
background: var(--cream);
|
|
color: #000;
|
|
text-align: center;
|
|
padding: 40px 20px 28px;
|
|
border-bottom: 4px solid #000;
|
|
}
|
|
|
|
header.hero h1{
|
|
font-family: 'Code462WPink', 'Rock Salt', cursive;
|
|
color: #000;
|
|
font-size: clamp(2.6rem, 9vw, 6rem);
|
|
margin: 0;
|
|
letter-spacing: 10px;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
}
|
|
|
|
header.hero .sub{
|
|
margin-top: 14px;
|
|
font-family: 'Anton', Impact, sans-serif;
|
|
letter-spacing: 6px;
|
|
text-transform: uppercase;
|
|
color: #000;
|
|
opacity: .7;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.intro{
|
|
max-width: 820px;
|
|
margin: 10px auto 30px;
|
|
padding: 0 22px;
|
|
text-align: center;
|
|
color: var(--neon-soft);
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
text-shadow: 0 0 4px rgba(232,74,31,.3);
|
|
}
|
|
|
|
.panel{
|
|
max-width: 880px;
|
|
margin: 20px auto 50px;
|
|
padding: 0;
|
|
background: #000;
|
|
border: 2px solid var(--neon);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 0 18px rgba(232,74,31,.5),
|
|
inset 0 0 30px rgba(232,74,31,.08);
|
|
}
|
|
|
|
.panel h2{
|
|
font-family: 'Anton', Impact, sans-serif;
|
|
color: #000;
|
|
background: var(--neon);
|
|
display: block;
|
|
text-align: center;
|
|
padding: 14px 18px;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
letter-spacing: 8px;
|
|
text-transform: uppercase;
|
|
font-size: 1.9rem;
|
|
box-shadow: 0 0 14px var(--neon);
|
|
border-top: 3px solid #000;
|
|
border-bottom: 3px solid #000;
|
|
}
|
|
.panel h2:first-of-type{ border-top: none; }
|
|
|
|
.panel .day{
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.panel .slot{
|
|
display: grid;
|
|
grid-template-columns: 110px 1fr;
|
|
gap: 18px;
|
|
padding: 14px 24px;
|
|
margin: 0;
|
|
align-items: baseline;
|
|
border-bottom: 1px solid rgba(232,74,31,.35);
|
|
}
|
|
.panel .day .slot:last-child{ border-bottom: none; }
|
|
|
|
/* === FILAS ALTERNADAS CREMA / NEGRO === */
|
|
.panel .day .slot:nth-child(odd){
|
|
background: var(--cream);
|
|
color: #000;
|
|
}
|
|
.panel .day .slot:nth-child(even){
|
|
background: #000;
|
|
color: var(--neon-soft);
|
|
}
|
|
|
|
.panel .time{
|
|
font-family: 'Anton', Impact, sans-serif;
|
|
font-size: 1.2rem;
|
|
letter-spacing: 1px;
|
|
white-space: nowrap;
|
|
}
|
|
.panel .day .slot:nth-child(odd) .time{
|
|
color: #000;
|
|
text-shadow: none;
|
|
}
|
|
.panel .day .slot:nth-child(even) .time{
|
|
color: var(--neon);
|
|
text-shadow: 0 0 6px rgba(232,74,31,.5);
|
|
}
|
|
|
|
.panel .act{
|
|
font-size: 1.02rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.panel .act strong{
|
|
display: block;
|
|
font-family: 'Anton', Impact, sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1.15em;
|
|
letter-spacing: 1.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
.panel .day .slot:nth-child(odd) .act strong{
|
|
color: #000;
|
|
text-shadow: none;
|
|
}
|
|
.panel .day .slot:nth-child(even) .act strong{
|
|
color: var(--neon);
|
|
text-shadow: 0 0 4px rgba(232,74,31,.4);
|
|
}
|
|
|
|
.panel .act .detail{
|
|
display: block;
|
|
font-size: .92rem;
|
|
margin-top: 4px;
|
|
font-style: italic;
|
|
}
|
|
.panel .day .slot:nth-child(odd) .act .detail{ color: #3a3a3a; }
|
|
.panel .day .slot:nth-child(even) .act .detail{ color: #d4a070; }
|
|
|
|
.panel .act .crew{
|
|
display: block;
|
|
font-size: .85rem;
|
|
margin-top: 5px;
|
|
}
|
|
.panel .day .slot:nth-child(odd) .act .crew{ color: #555; }
|
|
/* Sin opacidad: el naranja sobre negro está a 5.1:1 y atenuarlo al 85%
|
|
lo bajaba a 4.1:1, por debajo del mínimo. La jerarquía ya la marcan el
|
|
tamaño y el color, que alterna gris en las filas impares. */
|
|
.panel .day .slot:nth-child(even) .act .crew{ color: var(--neon); }
|
|
|
|
.panel .highlight{
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
}
|
|
.panel .day .slot:nth-child(odd) .highlight{
|
|
background: #000;
|
|
color: var(--cream);
|
|
}
|
|
.panel .day .slot:nth-child(even) .highlight{
|
|
background: var(--neon);
|
|
color: #000;
|
|
box-shadow: 0 0 8px var(--neon);
|
|
}
|
|
|
|
footer{
|
|
text-align: center;
|
|
padding: 24px 16px 36px;
|
|
color: var(--neon);
|
|
font-family: 'Anton', Impact, sans-serif;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
font-size: .9rem;
|
|
text-shadow: 0 0 6px var(--neon);
|
|
}
|
|
|
|
footer a{
|
|
color: var(--neon);
|
|
text-decoration: none;
|
|
border-bottom: 1px dashed var(--neon);
|
|
}
|
|
|
|
@media (max-width: 560px){
|
|
.topbar{ padding: 10px 14px; }
|
|
.topbar .brand{ font-size: .75rem; letter-spacing: 1px; }
|
|
.topbar a.back{ font-size: .82rem; padding: 6px 10px; }
|
|
header.hero{ padding: 30px 12px 18px; }
|
|
header.hero h1{ letter-spacing: 4px; }
|
|
header.hero .sub{ font-size: .8rem; letter-spacing: 3px; }
|
|
.panel{ margin: 14px 10px 30px; padding: 0; }
|
|
.panel h2{ font-size: 1.4rem; letter-spacing: 4px; padding: 10px 12px; }
|
|
.panel .slot{ grid-template-columns: 70px 1fr; gap: 10px; padding: 12px 14px; }
|
|
.panel .time{ font-size: 1rem; }
|
|
.panel .act{ font-size: .95rem; }
|
|
.intro{ font-size: 1rem; }
|
|
}
|
|
|
|
/* === ESCRITORIO: panel centrado, fuentes equilibradas === */
|
|
@media (min-width: 1024px){
|
|
header.hero{ padding: 50px 30px 30px; }
|
|
header.hero h1{
|
|
font-size: clamp(3.5rem, 6.5vw, 5.5rem);
|
|
letter-spacing: 10px;
|
|
}
|
|
header.hero .sub{
|
|
font-size: 1.1rem;
|
|
letter-spacing: 7px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.panel{
|
|
max-width: 1100px;
|
|
margin: 30px auto 60px;
|
|
padding: 0;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.panel h2{
|
|
font-size: 2.2rem;
|
|
letter-spacing: 9px;
|
|
padding: 16px 22px;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.panel .day{
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.panel .slot{
|
|
grid-template-columns: 150px 1fr;
|
|
gap: 28px;
|
|
padding: 18px 36px;
|
|
margin: 0;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.panel .time{
|
|
font-size: 1.6rem;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.panel .act{
|
|
font-size: 1.2rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.panel .act strong{
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.panel .act .detail{
|
|
font-size: 1rem;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.panel .act .crew{
|
|
font-size: .92rem;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.panel .highlight{
|
|
padding: 3px 12px;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
footer{
|
|
font-size: 1rem;
|
|
letter-spacing: 5px;
|
|
padding: 32px 16px 44px;
|
|
}
|
|
|
|
.topbar{ padding: 16px 28px; }
|
|
.topbar .brand{ font-size: 1rem; letter-spacing: 2px; }
|
|
.topbar a.back{ font-size: .95rem; padding: 9px 16px; }
|
|
}
|
|
|
|
/* === PANTALLAS XL: un punto más, sin pasarse === */
|
|
@media (min-width: 1600px){
|
|
.panel{ max-width: 1280px; }
|
|
.panel .slot{ grid-template-columns: 170px 1fr; padding: 20px 44px; }
|
|
.panel .time{ font-size: 1.85rem; }
|
|
.panel .act{ font-size: 1.35rem; }
|
|
.panel .act strong{ font-size: 1.45rem; }
|
|
.panel h2{ font-size: 2.5rem; letter-spacing: 11px; }
|
|
header.hero h1{ font-size: clamp(4rem, 6vw, 6.5rem); letter-spacing: 12px; }
|
|
header.hero .sub{ font-size: 1.25rem; letter-spacing: 9px; }
|
|
}
|
|
/* Texto solo para lectores de pantalla. Esta página tiene su propio
|
|
CSS, así que la clase no se hereda de index.css. */
|
|
.sr-only{
|
|
position: absolute !important; width: 1px; height: 1px;
|
|
padding: 0; margin: -1px; overflow: hidden;
|
|
clip-path: inset(50%); white-space: nowrap; border: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="topbar">
|
|
<span class="brand">★ La Enredadera de Tetuán ★</span>
|
|
<div class="actions">
|
|
<a class="back" href="/panel.html" target="_blank" rel="noopener">📺 Panel<span class="sr-only"> (abre en otra pestaña)</span></a>
|
|
<a class="back" href="/">← volver</a>
|
|
</div>
|
|
</div>
|
|
|
|
<header class="hero">
|
|
<h1>TATTOO CIRCUS</h1>
|
|
<div class="sub">Madrid · Fin de semana de jornadas</div>
|
|
</header>
|
|
|
|
<section class="panel" aria-label="Cartel del fin de semana">
|
|
|
|
<h2>Viernes</h2>
|
|
<div class="day">
|
|
<div class="slot">
|
|
<div class="time">16:00</div>
|
|
<div class="act"><strong>Apertura</strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">16:30</div>
|
|
<div class="act">
|
|
<strong>Taller de carteo a presxs</strong>
|
|
<span class="detail">Agrietando los muros de prisión</span>
|
|
</div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">18:00</div>
|
|
<div class="act">
|
|
<strong>¿Se puede regularizar la vida en un sistema colonial?</strong>
|
|
<span class="detail">Dinámicas para entender el proceso de documentación desde una perspectiva decolonial y antifascista.</span>
|
|
<span class="crew">A cargo de Articulación Antirracista de Madrid y Sindicato de Manteros</span>
|
|
</div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">20:00</div>
|
|
<div class="act"><strong>Cena</strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">20:30</div>
|
|
<div class="act"><strong><span class="highlight">CABARET DE CIRCO</span></strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">23:00</div>
|
|
<div class="act"><strong>Cierre</strong></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Sábado</h2>
|
|
<div class="day">
|
|
<div class="slot">
|
|
<div class="time">11:30</div>
|
|
<div class="act"><strong>Apertura</strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">12:00</div>
|
|
<div class="act">
|
|
<strong>Manifestación Orgullo Loco</strong>
|
|
<span class="detail">Centro de salud mental de Tetuán · Ni terapia ni castigos ni explotación: lokes-delinkuentes-animales por la abolición</span>
|
|
</div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">14:00</div>
|
|
<div class="act"><strong>Comida</strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">16:00</div>
|
|
<div class="act">
|
|
<strong>Contra el psistema productivo</strong>
|
|
<span class="detail">Manicomios, orfanatos, asilos y otras instituciones de control, vigilancia y castigo</span>
|
|
<span class="crew">A cargo de INSANIA</span>
|
|
</div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">18:00</div>
|
|
<div class="act">
|
|
<strong>Salir con vida</strong>
|
|
<span class="detail">Autobiografía de un preso en lucha</span>
|
|
<span class="crew">A cargo de Toni Chavero</span>
|
|
</div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">20:00</div>
|
|
<div class="act"><strong>Cena</strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">20:30</div>
|
|
<div class="act"><strong><span class="highlight">CONCIERTOS</span></strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">23:00</div>
|
|
<div class="act"><strong>Cierre</strong></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Domingo</h2>
|
|
<div class="day">
|
|
<div class="slot">
|
|
<div class="time">11:30</div>
|
|
<div class="act"><strong>Apertura</strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">12:00</div>
|
|
<div class="act">
|
|
<strong>Las familias y la cárcel</strong>
|
|
<span class="crew">A cargo de la Coordinadora de Familias y Presxs y de Famílies de Presos de Catalunya</span>
|
|
</div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">14:00</div>
|
|
<div class="act"><strong>Comida</strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">16:00</div>
|
|
<div class="act">
|
|
<strong>Más fuertes que la muerte, más fuertes que la prisión</strong>
|
|
<span class="detail">Actualización de las últimas oleadas de represión anti-anarquista a nivel internacional</span>
|
|
</div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">18:00</div>
|
|
<div class="act">
|
|
<strong>Taller de identificación policial</strong>
|
|
<span class="detail">Herramientas para identificar a agentes policiales y proteger derechos en contextos de protesta</span>
|
|
<span class="crew">A cargo de LEGAL SOL</span>
|
|
</div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">19:30</div>
|
|
<div class="act">
|
|
<strong>Flamenco</strong>
|
|
<span class="detail">Un quejío contra los muros</span>
|
|
</div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">20:00</div>
|
|
<div class="act"><strong>Cena</strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">20:30</div>
|
|
<div class="act"><strong><span class="highlight">FREAKSHOW</span></strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">22:00</div>
|
|
<div class="act"><strong>Rifa</strong></div>
|
|
</div>
|
|
<div class="slot">
|
|
<div class="time">23:00</div>
|
|
<div class="act"><strong>Cierre</strong></div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<footer>
|
|
★ Tattoo Circus · <a href="/">laenre.net</a> ★
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|