/* PIEZA: el articulo * --------------------------------------------------------------------------- * Dos cosas: la cabecera del articulo y el bloque de relacionados del final. * * OJO CON LA ESPECIFICIDAD. El filete azul bajo el titulo NO esta en ningun * fichero del tema: esta en el CSS adicional del Personalizador * * h1.entry-title { padding-bottom: 20px; border-bottom: 3px solid #195284; } * * y WordPress imprime ese bloque en el `` DESPUES de todas las hojas * encoladas. O sea que con la misma especificidad gana el, aunque esta pieza * se cargue la ultima. Por eso las reglas de aqui llevan `.single` delante: * (0,2,1) contra (0,1,1). Si algun dia alguien quita esa regla del * Personalizador, esto sigue funcionando igual. * --------------------------------------------------------------------------- */ /* --- La cabecera ----------------------------------------------------------- */ /* Fuera el filete azul. Era el mismo gesto que se quito de las secciones: con una ficha de autoria justo debajo, el titulo quedaba encerrado entre dos rayas. */ /* LA CABECERA --------------------------------------------------------------------------- Se probo el panel azul oscuro detras del titulo y no convencio: el usuario prefiere el titular limpio sobre el papel, como estaba. Se vuelve a eso, pero con la correccion que si hacia falta —- que LLENE el ancho. Por que no lo llenaba: llevaba `max-width: 34ch` y, sobre todo, `text-wrap: balance`, que IGUALA el largo de las lineas; por eso partia pronto y dejaba la primera a medias. Con `pretty` la linea se llena hasta el borde y solo se evita que quede una palabra sola al final. A 916px y 32px de cuerpo, un titular normal de este sitio cabe entero en una linea. */ .single .entry-header { margin-bottom: var(--dl-esp-lg); } .single h1.entry-title { margin: 0; padding-bottom: 0; border-bottom: 0; max-width: none; font-size: clamp(1.4rem, 1.05rem + 1.35vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; color: var(--dl-tinta); text-wrap: pretty; overflow-wrap: anywhere; min-width: 0; } /* Las migas, mas calladas: son un sitio donde estas, no algo que leer. */ .single .dl-migas { margin-bottom: var(--dl-esp-sm); font-size: 0.8rem; } /* La ficha pierde el filete de arriba y se queda con el de abajo: asi cierra la cabecera en vez de encajonarla. El de abajo lo pone ahora el envoltorio `.dl-meta-fila` de la pieza `compartir`, que es quien mete la ficha y el boton en la misma linea. */ .single .dl-ficha { margin: 0 0 var(--dl-esp-xl); padding: 0 0 var(--dl-esp-md); border-top: 0; } /* Los puntos de separacion, pegados al dato que va DELANTE. Antes eran elementos sueltos dentro de un flex, asi que al partirse la linea —cosa que en un movil de 320px pasa siempre— el punto se quedaba solo abriendo la linea siguiente: «· Actualizado el 29 de julio». Como `::after` del propio dato, el punto viaja siempre con su texto. */ .single .dl-ficha__datos .dl-ficha__sep { display: none; } .single .dl-ficha__datos .dl-ficha__dato:not(:last-child)::after { content: " ·"; color: var(--dl-tinta-suave); } /* En movil, fuera la seccion de la ficha: esta enlazada dos lineas mas arriba, en las migas, y es justo el dato que empujaba la fila a una cuarta linea. */ @media (max-width: 700px) { .single .dl-ficha__datos a.dl-ficha__dato { display: none; } .single .dl-ficha { font-size: 0.84rem; } } /* En escritorio: fecha(s) en una fila, «materia · minutos de lectura» en la siguiente, SIEMPRE, en vez de dejar que el ancho decida donde se parte — que es lo que dejaba «3 min de lectura» solo, colgando en una tercera linea. El punto de corte es el separador que va justo antes del enlace a la materia: se reactiva SOLO ese (los demas siguen ocultos por la regla de arriba) y se convierte en un elemento de ancho 100% sin contenido visible, que en un flex con `wrap` fuerza el salto de linea el solo. `:has()` para encontrarlo sin importar si hay fecha de actualizacion o no: selecciona «el separador seguido del enlace a la materia», sea el segundo o el cuarto hijo. */ @media (min-width: 701px) { .single .dl-ficha__datos .dl-ficha__sep:has(+ a.dl-ficha__dato) { display: block; flex-basis: 100%; width: 100%; height: 0; font-size: 0; line-height: 0; overflow: hidden; } /* Y el dato justo antes de ese corte no arrastra su punto: sin esto la primera fila terminaba con un «·» colgando de la nada. */ .single .dl-ficha__datos .dl-ficha__dato:has(+ .dl-ficha__sep + a.dl-ficha__dato)::after { content: none; } } /* La imagen destacada, ENTERA. Sin recorte. --------------------------------------------------------------------------- Se probo a recortarla a 16:9 y luego a 21:9 para ganar altura de pantalla, y el usuario lo paro: se notaba el recorte. Tenia razon, y la referencia que puso lo confirma: bonviveur.com sirve sus fotos a 1200x800 con `object-fit: contain` y `height: auto`, o sea sin recortar ni una. Aqui igual. Las fotos del sitio son 1200x701, asi que a 916px de ancho salen a 535px de alto, que es como estaban antes de todo esto. Esta regla no se puede quitar: sin ella manda la del Personalizador (`.featured-image img{width:770px;height:450px;object-fit:cover}`), que SI recorta y ademas deja la foto a 770px en un contenedor de 916. */ .single .featured-image img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: var(--dl-radio); background: var(--dl-azul-100); } .single .featured-image { margin-bottom: var(--dl-esp-lg); } /* --- Relacionados ---------------------------------------------------------- */ /* Sin filete de separacion arriba. Lo que separa este bloque del articulo es el hueco, no una raya: entre la caja del autor y esto ya hay dos filetes (el de la caja y el de la primera fila de la lista) y un tercero solo anadia ruido. */ .dl-relacionados { margin-top: var(--dl-esp-2xl); /* Aire por debajo: sin esto el ultimo relacionado queda pegado al pie, que ahora es una banda oscura a sangre completa y se lee como si el bloque se hubiera cortado. */ padding-bottom: var(--dl-esp-xl); text-align: left; } .dl-relacionados__titulo { margin: 0 0 var(--dl-esp-md); font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: var(--dl-tinta); overflow-wrap: anywhere; min-width: 0; } /* LISTADO, no rejilla de tarjetas: cada articulo es una fila con su miniatura a la izquierda. En dos columnas en escritorio, que a 916px una sola fila por articulo deja media pagina en blanco a la derecha. */ .dl-relacionados__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--dl-esp-xl); margin: 0; padding: 0; list-style: none; } .dl-relacionados__ficha { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: var(--dl-esp-md); align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--dl-linea); } .dl-relacionados__foto { display: block; text-decoration: none; } .dl-relacionados__foto img { display: block; width: 100%; height: auto; aspect-ratio: 320 / 187; object-fit: cover; border-radius: var(--dl-radio); background: var(--dl-azul-100); } .dl-relacionados__texto { min-width: 0; } .dl-relacionados__enlace { display: block; color: var(--dl-tinta); font-size: 0.95rem; font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; } .dl-relacionados__enlace:hover { color: var(--dl-azul-500); } .dl-relacionados__enlace:focus-visible { outline: 2px solid var(--dl-foco); outline-offset: 2px; border-radius: 2px; } .dl-relacionados__firma { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--dl-tinta-suave); font-variant-numeric: tabular-nums; } /* --- Móvil ----------------------------------------------------------------- */ @media (max-width: 760px) { .dl-relacionados__lista { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .dl-relacionados__ficha { grid-template-columns: 84px minmax(0, 1fr); } } /* En Modelos no queda nada por encima del bloque de descarga: sin migas (el entry-header entero, que solo lleva eso), directo al titulo. */ article.category-modelos .entry-header { display: none; }