soy Kseso y esto EsCSS

EsCss v6 Nuevo tema y cambio de look al blog

Presentación del nuevo tema del Blog. La versión 6 y las principales novedades y cambios que trae. Y sí, sigue siendo un Blogger.

EsCss v6 Nuevo tema y cambio de look al blog

·Por Kseso ✎ 35
EsCss v6 Nuevo tema y cambio de look al blog

Siguiendo con la tradición, como las serpientes y otros animales que de esto saben, ya es obligado en EsCss mudar la piel cada año. Y este no iba a ser menos. Así que déjame presentarte el nuevo look del blog:

— Usuarios del Blog, aquí el nuevo tema.
— Nuevo tema, aquí tus usuarios. Espero que no sufridores.

Hechas las presentaciones oportunas para perder la vergüenza y timidez y que me deis la del pulpo en los comentarios con vuestras opiniones, críticas y avisos varios, voy con algunos aspectos del traje que estrenamos hoy.

En esta ocasión hay diferencias notorias entre las distintas páginas o secciones del blog. Tanto en su apariencia (<style/>'s) como en los códigos de Blogger y HTML usados en cada una:

  1. La página de inicio.
  2. Los posts o artículos
  3. Los resultados de búsquedas, ya sean por etiqueta o término.
  4. Las páginas estáticas.

El índex, home o portada del blog

Para aquellos de vosotros que utilicéis TweetDeck os resultará más que familiar. Sí, es una recreación personal de su interfaz.

Espero que es uso de tanto scroll no asuste a nadie. De todas formas para aquel que entre a ella sólo para ver si hay artículo o comentarios nuevos lo podrá ver sin mayor problema.

Aquí, en el índex, no cargo nada del código propio de Blogger. La monto en base a javascript. El código necesario ya lo he compartido en varias ocasiones, como ésta o esta otra.

Para poder prescindir del código de Blogger en Blogger y que todo funcione está reciente: Blogger extremo: usar Blogspot como hosting gratis de sitio web (no blog).

Si se acede con móvil espero que el data isMobileRequest haga su trabajo (ver artículo) y sólo se carguen las columnas de los post más nuevos y los comentarios y el javasript necesario para ello.

Y sí, todos los iconos que ves en ella, desde la "E" hasta la "K" pasando por los de las cabeceras de las columnas, son SVG´s. En esta ocasión insertados como symbol´s. Si los quieres, el svg que los contiene está tras la apertura del body

Mejor aprovechamiento del viewport en los posts

La mayor novedad en las páginas de los artículos es que hay un mejor uso de todo el viewport. Mientras que los textos están limitados en su anchura máxima, los pens embutidos como ejemplos, demos, y los bloques de código ocupan toda la ventana. También las imágenes que lo necesiten pueden usar el margen que dejan los textos.

Como ejemplo y para que puedas evaluar este aspecto aprovecho para insertar un viejo pen:

See the Pen CSS matrix: writing-mode Reloaded by Kseso (@Kseso) on CodePen.

Ver Demo en Codepen

Otro detalle es que el tamaño de la tipografía es realmente responsive. No sólo su font-size varía con el tamaño del viewport. También lo hace su longitud y altura de línea:

.post-body p { font-size: calc(.20vw + .20vh + 1rem); line-height: calc(.4vw + .4vh + 1.3rem); max-width: 40em; }

Para la tipografía del cuerpo de los post me he decidio por una serif: Scope One * en detrimento de las fuentes del sistema: Modern System Fonts. Lo cierto es que ya hace un tiempo que venía pensando en darle una oportunidad a alguna serif.

* Debido a todos los problemas que habéis ido reportanto sobre la Scope One (iniciados por su "finura" de trazo y mis intentos fallidos para corregirlos) opté por cambiarla. ¿Cuál es la actual? Pues sinceramente que no recuerdo su nombre o familia. He usado una que hace tiempo tenía en base 64. Así que como otro pequeño experimento la incluyo en el head en ese formato:

<style> @font-face{ font-family:mi_serif; font-style:normal; font-weight:400; src:url(data:font/opentype;base64 ...); } </style>

Si crees que la lectura se ve penalizada por esta decisión házmelo saber en un comentario. La legibilidad siempre por encima de gustos personales.

En el header de los artículos me he permitido jugar un poco y poner la frivolidad de ese encabezado con el título y la intro que ocupa toda la pantalla y obliga a hacer un click para que aparezca el contenido y el scroll para desplazarte por él.

El detalle del click en el header después de estos días de pruebas y vuestras opiniones al respecto pasó de "at risk" a "deprecated".

Para los que no llegasteis a verlo o no recordéis como era, está recreado en este pen de Codepen

La sección de los comentarios y footer

En esta sección mantengo la misma estructura de la versión previa. Lo que hago es utilizar en el fondo y otros detalles la misma paleta de negros de la portada.

Si insertas algún pen o código en ellos también ocupara el espacio libre de la izquierda que deja el texto.

Por el footer también ha pasado más que el hombre del hacha el de la motosierra. Vuelve a quedar reducido a su mínima expresión.

Un poco del CSS más "novedoso".

Tras estos años de existencia del blog (ya fuese con el viejo nombre de KsesoCss o el actual EsCss) todos sabemos lo que me gusta experimentar con los límites del CSS. Y también son conocidos algunos batacazos que me he llevado en los temas que he querido usar en el blog por sobrepasar los límites productivistas.

En esta ocasión el peligro viene, además de por el mencionado header por el uso y abuso de las custom properties de CSS. Otros las llaman variables CSS.

Como soy propenso por mi corta memoria a terminar usando cienes y cienes de tonalidades de los múltiples colores que termino desperdigando por el código y otras aberraciones por el estilo, en esta ocasión eso no me pasa (o pasa más desapercibido) gracias ellas.

Eso, un poco de flexbox y el uso de la función CSS calc() como mencioné antes son los pilares de este tema:

:root { --sinSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", /*... varias familias más...*/ "Helvetica Neue", sans-serif; --negroO: #222426; --negroM: #292f33; --negroC: #444448; --gris: #999; --blancoS: #e1e8ed; --link: #0ebeff; --info: #3cb371; --ojoCuidao: #FC5135; --diamantesC: repeating-linear-gradient(120deg, rgba( /*... varias líneas más...*/ transparent 30px); } el { background: var(--negroO) var(--diamantesC) repeat; color: var(--blancoS); border-right: 6px solid var(--negroC); }

También me he permitido un par de frivolidades con clip-path y una sorpresa en las listas (en su list-style-type) usando alguna cosilla de los contadores CSS de tercer nivel que sólo veréis si usáis algún navegador que lo soporten ;-).

Resultados de búsquedas, páginas estáticas y paginación

¿Alguien usa los enlaces de página anterior y siguiente? Yo confieso que nunca. Y creo que no soy el único que los ignora olímpicamente. Así que fuera con ellos.

En su lugar hay un bonito y práctico enlace a la página del sitemap donde están todos los post del blog ordenados por la fecha de publicación.

También he implementado en el índex el buscador de Google. Más exhaustivo que el simple que vengo utilizando y que mantengo en los posts. Pero también devuelve más resultados con escasa relación con lo buscado.

Las páginas que Blogger llama "índex pero no homepageUrl" he sido todo lo sobrio que he podido, tanto en el código generado por el CMS y servido al navegador como en el CSS usado en ellas.

Un ejemplo de este tipo de páginas son las generadas por las búsquedas o al pinchar en las labels o etiquetas. Como ésta. Que por cierto, en ellas sí sale la paginación si es necesaria.

Y de la publicidad y el aviso traga galletas ¿qué?

Tras algo más de un año con el tema previo en el que dejé por ahí tirados un par de anuncios de adsense que me obligaban a cumplir con la ley de las galletas las conclusiones no pueden ser peores:

Así que siendo honesto mejor me ahorro todo ello y de paso vosotros os veis libres del puto aviso y del delay y consumo de datos y ancho de banda que su presencia suponía.

Los raquíticos ingresos generados no compensan el esfuerzo y los recursos necesarios para mostrarla. No merece la pena la molestia del aviso y la carga de los scripts

Tu turno: discrepancias, ruegos, avisos, pareceres y sugerencias varias

No pensaba extenderme tanto ni ser tan cansino y pesado en la presentación de la versión 6 del blog. Mis disulpas.

En venganza haz tú lo mismo ;-) y expláyate en los comentarios. Dame toda la caña que quieras sobre cualquier aspecto que consideres oportuno. En especial te agradeceré los avisos de errores o fallos que encuentres.

Quedan algunos detalles por refinar y complementar. Ya con más calma iré dando cuenta de ellos. Pero recuerda que ni soy ni nunca he pretendido pasar ni por diseñador ni por profesional de nada. Sólo:

Sólo soy un viejo ramajero argonauta. Enredique amanuense de CSS que no tengo nada para callado y que todo lo comparto bajo una licencia beerwre.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso