del menu es el lema de la casa y no lleva href:
se pinta como texto secundario, no como enlace. */
#page nav.gtco-nav .menu-1 a:not([href]){
color:var(--b-faint);
font-weight:500;
font-family:var(--b-mono);
font-size:11.5px;
letter-spacing:.06em;
text-transform:uppercase;
background:none;
cursor:default;
}
/* Submenu desplegable de single.html */
#page nav.gtco-nav ul li.has-dropdown .dropdown{
background:#fff;
border:1px solid var(--b-line);
border-radius:12px;
box-shadow:var(--b-shadow);
padding:6px;
}
#page nav.gtco-nav ul li.has-dropdown .dropdown li a{
color:var(--b-body);
padding:9px 12px;
font-size:13px;
}
#page nav.gtco-nav ul li.has-dropdown .dropdown li a:hover{
color:var(--b-brand-strong);
background:var(--b-brand-tint);
}
/* ============================================================
3 — PORTADA (hero) Y EL SOLAPE DE "IT-BLOG"
Que arregla: EL DEFECTO PRINCIPAL. La barra es position:fixed, o sea que
esta fuera del flujo y nadie le reserva espacio; y style.css le da a la
portada altura FIJA (900px, 600px por debajo de 768px) con una pseudo-tabla
.display-t/.display-tc que centra verticalmente. A 320px el titular ocupa
cuatro lineas de 40px: el contenido no cabe en esa caja, la tabla lo empuja
hacia arriba y la primera linea termina detras del logotipo.
Medido antes del arreglo: a 320px el logotipo llega hasta y=107 y el h1
empieza en y=26 — 81px de solape. A 390px, 67px.
El relleno inferior tiene ademas otra funcion: article lleva .mt-negative
(position:relative; top:-7em), asi que la tarjeta blanca se pinta unos 115px
por encima de donde ocupa sitio. Sin ese aire, la tarjeta tapaba la firma
del autor en single.html y sonoff.html.
Correccion, en cuatro piezas y solo con CSS:
a) la portada deja de tener altura fija y crece con su contenido;
b) se le reserva por arriba la altura REAL de la barra mas un respiro;
c) la pseudo-tabla pasa a bloque y el centrado vertical lo hace un flex
del propio header, que si tolera que el contenido crezca;
d) la barra tiene altura declarada (bloque 2), asi que el calculo (b) es
exacto y no una estimacion.
Ademas: .overlay es position:absolute con z-index:0 y el .container NO esta
posicionado, asi que el velo se pintaba POR ENCIMA del texto. Con el negro
al 70% apenas se notaba; con el degradado navy seria ilegible. Se corrige
posicionando el contenedor, que no altera la maquetacion.
============================================================ */
#page #gtco-header.gtco-cover{
height:auto;
min-height:clamp(320px,50vh,500px);
display:flex;
align-items:center;
padding-top:calc(var(--b-nav-h) + clamp(24px,6vw,52px));
padding-bottom:clamp(74px,9vw,148px);
background-position:center;
}
#page #gtco-header > .container{
position:relative;
z-index:2;
width:100%;
}
#page #gtco-header .display-t,
#page #gtco-header .display-tc{
display:block !important;
height:auto !important;
width:100%;
}
/* Velo: del gris plano de 2017 al degradado navy del sitio nuevo. */
#page #gtco-header .overlay{
background:
linear-gradient(103deg,rgba(7,13,24,.90) 0%,rgba(8,16,30,.80) 38%,rgba(8,16,30,.60) 72%,rgba(8,16,30,.50) 100%),
radial-gradient(900px 460px at 84% -14%,rgba(26,111,224,.22),transparent 62%);
}
#page #gtco-header .date-post{
font-family:var(--b-mono);
font-size:11.5px;
font-weight:500;
letter-spacing:.14em;
color:rgba(255,255,255,.72);
margin-bottom:14px;
}
#page #gtco-header .display-tc h1{
font-family:var(--b-sans);
font-size:clamp(25px,5.6vw,50px);
font-weight:750;
letter-spacing:-.025em;
line-height:1.14;
color:#fff;
max-width:27ch;
}
#page #gtco-header .display-tc h1 a{ color:#fff; }
#page #gtco-header .display-tc h1 a:hover{ color:#a8c9ff; }
#page #gtco-header .author{
font-family:var(--b-mono);
font-size:11.5px;
letter-spacing:.1em;
color:rgba(255,255,255,.66);
}
/* "Leer Aqui": del coral de plantilla a un boton fantasma como los del sitio. */
#page #gtco-header .display-tc .text-link{
display:inline-flex;
align-items:center;
min-height:44px;
padding:11px 18px;
margin-top:4px;
font-family:var(--b-sans);
font-size:13.5px;
font-weight:650;
letter-spacing:.01em;
color:#fff;
background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.36);
border-radius:10px;
transition:.16s;
}
#page #gtco-header .display-tc .text-link:hover{
background:rgba(255,255,255,.17);
border-color:#fff;
color:#fff;
}
#page #gtco-header hr{
border-top-color:rgba(255,255,255,.22);
margin:30px 0 26px;
}
/* ============================================================
4 — LA TARJETA DEL ARTICULO
Que arregla: el articulo era un rectangulo blanco a hueso, sin filete ni
radio, con 3em de aire por dentro. Adopta la superficie del sitio nuevo:
filete --line, radio 14px y la sombra del sistema. El fondo de pagina pasa
del gris #e6e6e6 al --bg-soft azulado, que es el fondo de las bandas suaves
del sitio.
NO se toca el float ni el ancho: eso lo gobiernan style.css y la capa
responsive, y cambiarlo tapa el hero.
============================================================ */
#page article{
background:var(--b-bg);
border:1px solid var(--b-line);
border-radius:var(--b-radius);
box-shadow:var(--b-shadow);
padding:clamp(20px,4vw,44px);
}
#page article .content-article{ padding-top:0; }
#page article h2{
font-family:var(--b-sans);
font-size:clamp(20px,2.7vw,29px);
font-weight:720;
margin:38px 0 14px;
}
#page article h3{
font-family:var(--b-sans);
font-size:clamp(17px,2vw,21px);
font-weight:700;
margin:30px 0 12px;
}
#page article .content-article > *:first-child{ margin-top:0; }
/* ============================================================
5 — MEDIDA DE LECTURA
Que arregla: en las filas de una sola columna, a 1440px los renglones
llegaban a 140 caracteres. Se limita la medida SOLO en los parrafos, no en
sus contenedores: asi las imagenes a sangre, el codigo, el video y el mapa
conservan todo el ancho disponible y no hay riesgo de recortar nada.
============================================================ */
#page article .content-article p{ max-width:72ch; }
/* ============================================================
6 — ENLACES
Que arregla: el coral #F73859 sobre blanco da 3,71:1 y no llega al 4,5:1
que pide WCAG AA para texto normal. Pasa al azul del sitio (#155ec1 =
6,4:1) y el subrayado se separa de la linea base.
============================================================ */
#page article a,
#page article .content-article a{
color:var(--b-brand-strong);
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:.2em;
}
#page article a:hover,
#page article .content-article a:hover{ color:var(--b-brand); }
/* ============================================================
7 — BLOQUES DE CODIGO
Que arregla: el usaba el gris por defecto de Bootstrap y, sobre todo,
los que exporto el IDE al copiar el codigo no tienen
estilo en ninguna hoja: el resaltado de sintaxis estaba en el HTML pero no
se veia. Panel navy — el mismo del pie y de las bandas del sitio — con esas
cinco clases coloreadas. Es lo que mas "blog tecnico" aporta y no cambia ni
un caracter del codigo.
Se respeta white-space:pre y el overflow-x:auto que ya puso la capa
responsive: la indentacion y los saltos siguen intactos y el bloque se
desplaza por dentro.
============================================================ */
#page article pre{
font-family:var(--b-mono);
font-size:12.5px;
line-height:1.55;
color:#dbe6f5;
background:var(--b-navy);
border:1px solid var(--b-navy-2);
border-radius:12px;
padding:16px 18px;
margin:0 0 26px;
-moz-tab-size:4;
tab-size:4;
}
#page article pre .s0{ color:#7db2ff; }
#page article pre .s1{ color:#dbe6f5; }
#page article pre .s2{ color:#8ba3c2; font-style:italic; }
#page article pre .s3{ color:#7fd6c2; }
#page article pre .s4{ color:#f0b57a; }
/* ============================================================
8 — IMAGENES Y PIES DE FOTO
Que arregla: las fotos iban a hueso y los pies en #999 sobre blanco dan
2,85:1, muy lejos de AA. Filete y radio para las fotos del articulo, y el
pie en monoespaciada con --faint (4,84:1) y un filete de separacion.
El sello de Creative Commons de la barra lateral es un img de 88x31 sin
clase: se excluye para no deformarlo ni enmarcarlo.
============================================================ */
#page article figure img,
#page article img.img-responsive{
border:1px solid var(--b-line);
border-radius:12px;
}
#page article figure{ margin-bottom:30px; }
#page article figcaption{
font-family:var(--b-mono);
font-size:12px;
line-height:1.55;
color:var(--b-faint);
border-top:1px solid var(--b-line);
margin-top:10px;
padding-top:9px;
max-width:64ch;
}
#page article .gtco-highlight img{ border:0; border-radius:0; }
/* ============================================================
9 — VIDEO DE YOUTUBE Y MAPA DE GOOGLE
Que arregla: los