Actualiza web: secciones, estilos e imágenes
This commit is contained in:
root
parent
124512a4dd
commit
d0e746c079
11 changed files with 435 additions and 217 deletions
197
index.css
197
index.css
|
|
@ -1,4 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
|
||||
|
||||
/* Fuente local Code462W Pink */
|
||||
@font-face {
|
||||
|
|
@ -10,8 +11,11 @@
|
|||
}
|
||||
|
||||
:root{
|
||||
--sidebar-w: 250px; /* ancho completo */
|
||||
--sidebar-rail: 56px; /* “raíl” visible en modo plegado */
|
||||
--sidebar-w: 250px;
|
||||
--sidebar-rail: 56px;
|
||||
|
||||
/* “Impact” consistente: Anton (Google) + fallback a Impact */
|
||||
--impact: 'Anton', Impact, Haettenschweiler, 'Arial Black', sans-serif;
|
||||
}
|
||||
|
||||
/* Ocultar visualmente el checkbox */
|
||||
|
|
@ -41,7 +45,7 @@ body {
|
|||
background: url('/img/fondo.jpg') no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
color: #000;
|
||||
font-family: 'Rock Salt', cursive;
|
||||
font-family: 'Rock Salt';
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
|
@ -68,7 +72,7 @@ body {
|
|||
|
||||
.sidebar{
|
||||
width: var(--sidebar-w);
|
||||
background: #222;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
|
|
@ -79,35 +83,66 @@ body {
|
|||
transition: transform .25s ease, width .25s ease;
|
||||
}
|
||||
|
||||
.sidebar h3 {
|
||||
font-family: 'Rock Salt', cursive;
|
||||
font-size: 1.8em;
|
||||
margin-top: 10px;
|
||||
.sidebar h2,
|
||||
.sidebar h3{
|
||||
font-family: Impact, 'Anton', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
font-weight: 1000;
|
||||
font-size: 2em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sidebar p {
|
||||
font-size: 0.9em;
|
||||
color: #ccc;
|
||||
color: #ff00aa;
|
||||
}
|
||||
/* Título sidebar (en tu HTML es h2, no h3) */
|
||||
.sidebar h2{
|
||||
font-family: Impact, 'Anton', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* NAV sidebar: los puntos están en el UL, no en el NAV */
|
||||
.sidebar .sidebar-nav ul{
|
||||
list-style: none; /* QUITA LOS PUNTOS */
|
||||
padding: 0;
|
||||
margin: 50px 0 0;
|
||||
|
||||
display: flex; /* columna real */
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sidebar-nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: background 0.1s;
|
||||
.sidebar .sidebar-nav li{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-nav a:hover {
|
||||
background: #ff00aa;
|
||||
/* Links tipo “caja” */
|
||||
.sidebar .sidebar-nav a{
|
||||
display: block;
|
||||
|
||||
font-family: Impact, 'Anton', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
font-weight: 1200;
|
||||
letter-spacing: .6px;
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
|
||||
padding: 12px 12px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid rgba(255,0,170,.95);
|
||||
background: rgba(255,255,255,.04);
|
||||
|
||||
transition: background .15s ease, transform .12s ease, color .15s ease;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-nav a:hover{
|
||||
background: #ff00aa;
|
||||
color: #000;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
margin-left: var(--sidebar-w);
|
||||
transition: margin-left .25s ease;
|
||||
|
|
@ -125,13 +160,13 @@ header {
|
|||
}
|
||||
|
||||
header h1 {
|
||||
font-family: 'Code462WPink', 'Rock Salt', cursive;
|
||||
font-family: 'Code462WPink', 'Rock Salt';
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.top-nav a,
|
||||
.top-nav.second a {
|
||||
font-family: 'Rock Salt', cursive;
|
||||
font-family: 'Rock Salt';
|
||||
letter-spacing: 3px;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
|
@ -209,12 +244,19 @@ 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 */
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,.08);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
section#feminismos{
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Título de cada sección: rosa con fondo negro */
|
||||
|
|
@ -239,6 +281,7 @@ section h2:hover{
|
|||
section p{
|
||||
color: #222;
|
||||
margin: .6rem 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -258,6 +301,42 @@ button:hover {
|
|||
}
|
||||
|
||||
|
||||
/* Imagen de colectivo centrada y responsive */
|
||||
.colectivo-img-link{
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.colectivo-img{
|
||||
display: inline-block;
|
||||
max-width: min(520px, 92%);
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #ff00aa;
|
||||
box-shadow: 0 8px 18px rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
/* Botón como link */
|
||||
.colectivo-btn{
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #ff00aa;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.colectivo-btn:hover{
|
||||
background: #ff00aa;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Contenedor centrado y con buen ritmo de lectura */
|
||||
.content-page.readable{
|
||||
background:#fff;
|
||||
|
|
@ -330,7 +409,7 @@ button:hover {
|
|||
margin: 6px 0 12px;
|
||||
}
|
||||
.cal-title{
|
||||
min-width: 220px;
|
||||
min-width: 300px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: pink;
|
||||
|
|
@ -365,7 +444,7 @@ button:hover {
|
|||
.cal-daynum{
|
||||
position: absolute;
|
||||
top: 6px; left: 20px;
|
||||
font-size: 0.95rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--muted);
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -449,7 +528,7 @@ button:hover {
|
|||
z-index: 3; /* por encima de ::before/::after */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 7px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -461,7 +540,7 @@ button:hover {
|
|||
border-radius: 6px;
|
||||
padding: 3px 6px;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
box-shadow: 0 0 6px rgba(0,0,0,.06);
|
||||
white-space: nowrap;
|
||||
|
|
@ -474,22 +553,22 @@ button:hover {
|
|||
box-shadow: 0 0 10px rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
|
||||
/* ========== TELÉFONOS PEQUEÑOS (<= 480px) ========== */
|
||||
@media (max-width: 480px){
|
||||
html{ font-size: 9px; } /* baja toda la escala */
|
||||
body{ overflow-x: hidden; }
|
||||
.vertical-marquee{ display:none !important; }
|
||||
.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; font-size: 1.05em; }
|
||||
header{ padding: 16px 12px; padding-left:20px; font-size: 1.05em; }
|
||||
|
||||
/* Hamburguesa + sidebar superpuesta */
|
||||
.sb-toggle{ display:flex; }
|
||||
.sidebar{
|
||||
position: fixed; left: 0; top: 0; bottom: 0;
|
||||
width: min(82vw, 300px);
|
||||
background: #222; color:#fff;
|
||||
transform: translateX(-100%);
|
||||
z-index: 1000; overflow-y:auto; padding:20px;
|
||||
}
|
||||
|
|
@ -498,16 +577,32 @@ button:hover {
|
|||
content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;
|
||||
}
|
||||
|
||||
/* Nav superior como chips */
|
||||
/* 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;
|
||||
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;
|
||||
}
|
||||
.top-nav li, .top-nav.second li{ list-style:none; }
|
||||
.top-nav a, .top-nav.second a, .top-nav2 a{
|
||||
display:block; padding:6px 10px; font-size:.9em;
|
||||
border:1px solid #ff00aa; border-radius:18px;
|
||||
background:#fff; color:#000; text-decoration:none;
|
||||
display:inline-block;
|
||||
padding:5px 9px; /* más pequeño */
|
||||
font-size:.8em; /* más pequeño */
|
||||
line-height:1.1;
|
||||
border:1px solid #ff00aa;
|
||||
border-radius:16px; /* un poco más compacto */
|
||||
background:#fff;
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
white-space:nowrap; /* evita que se partan dentro del botón */
|
||||
}
|
||||
|
||||
/* Secciones y contenido */
|
||||
|
|
@ -521,12 +616,24 @@ button:hover {
|
|||
.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:.15rem; top:6px; left:6px; z-index:2; }
|
||||
.cal-daynum{ font-size:1rem; top:6px; left:6px; z-index:2; }
|
||||
.cal-pills{ gap:7px; margin-top:6px; }
|
||||
.cal-pill{ font-size:.4rem; padding:2px 4px; }
|
||||
.cal-head .cal-head-cell{ padding:6px 0; font-size:.9rem; }
|
||||
.cal-pill{ font-size:.72rem; padding:2px 4px; line-height:1.3; }
|
||||
.cal-head .cal-head-cell{ padding:6px 0; font-size:1.1rem; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ====== FUENTE “IMPACT” SOLO PARA EL CALENDARIO ====== */
|
||||
.cal,
|
||||
.cal *{
|
||||
font-family: var(--impact) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ========== MÓVILES / TABLETS VERTICALES (481px–768px) ========== */
|
||||
@media (min-width: 481px) and (max-width: 768px){
|
||||
|
||||
|
|
@ -539,7 +646,7 @@ button:hover {
|
|||
.sidebar{
|
||||
position: fixed; left:0; top:0; bottom:0;
|
||||
width: min(78vw, 320px);
|
||||
background:#222; color:#fff;
|
||||
background:#000; color:#fff;
|
||||
transform: translateX(-100%);
|
||||
z-index:1000; overflow-y:auto; padding:20px;
|
||||
}
|
||||
|
|
@ -572,7 +679,7 @@ button:hover {
|
|||
.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:11px; padding:3px 5px; }
|
||||
.cal-pill{ font-size:4px; padding:3px 5px; }
|
||||
.cal-head .cal-head-cell{ padding:8px 0; font-size:1rem; }
|
||||
}
|
||||
|
||||
|
|
@ -586,7 +693,7 @@ button:hover {
|
|||
.sidebar{
|
||||
position: fixed; left:0; top:0; bottom:0;
|
||||
width: var(--sidebar-w);
|
||||
background:#222; color:#fff;
|
||||
background:#000; color:#fff;
|
||||
transform: translateX(calc(-100% + var(--sidebar-rail)));
|
||||
z-index:1000; overflow-y:auto; padding:20px;
|
||||
}
|
||||
|
|
@ -610,9 +717,9 @@ button:hover {
|
|||
.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:1rem; }
|
||||
.cal-daynum{ font-size:2rem; }
|
||||
.cal-pills{ margin-top:8px; gap:6px; }
|
||||
.cal-pill{ font-size:12px; }
|
||||
.cal-pill{ font-size:4px; }
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue