Nuevo look v7: EsCSS theme 2018 ~ layout maCSSonry 13.8.17
Cambio de piel al blog y abro artículo para que os podáis quejar a gusto.
Nuevo look v7: EsCSS theme 2018 ~ layout maCSSonry
Un tanto sin ganas ni ideas pero obligado por la tradición que dicta que hay que mudar la piel al menos una vez al año y que en el blog lo suelo hacer ahora en Agosto, por aquello de que es cuando más despistados estáis los usuarios, vamos con una pequeña presentación de lo que os encontraréis, de momento, solo en el índex o portada los que por ella paséis.
Y si no tenéis por costumbre visitar elhome
del blog es una buena ocasión para que por una vez lo hagáis xD
En esta ocasión ya os resultará familiar para los asiduos. Todo lo que en ella puedes ver es puro CSS:
- El menú superior es un flexbox y el agrupado y espaciado de los ítems lo comentaba allá por el 2015
- El layout
tipo masonrey
en puro CSS Grid Layout para mostrar la relación de los artículos más nuevos está reciente: Julio 2017. - La sección de los últimos comentarios en panal hexagonal también está construida con CSS Grid Layout. Y un poco de
clip-pathpara lograr los hexágonos. - La parte de
rándom post
y su scroll un tanto desconcertante también es del día, como el pan reciente: Scroll half by half pure #CSS Agosto de este año. - Y por último: el blog tiene pie. Sí, en esta ocasión me he decido. Y lo he realizado en base a unos viejos pens inspirados en una realización de Mary Lou en Codrops: [1] - [2].
Background Segment pure CSS
de Septiembre de 2016.
Como ves y te cuento, puro y duro reciclaje xD. Bueno, eso o demostración de que es posible usar lo más nuevo de CSS de forma radical y extrema. Que por algo suelo usar el hashtag
#impoCSSible inside.
Todo ello acompañado de unas cuantas CSS custom properties
para facilitarme la vida, algo de filtros y blend modes
CSS y un par o tres medias queries
.
Por eso y porque confío en que los usuarios del blog estaréis al día en las versiones de los navegadores que utilizáis. Y que conste en acta que he dicho "navegadores".
Regreso a las raíces
En esta versión maCSSonry layout
he vuelto al código original de Blogger para mostrar en la portada la relación de los posts más recientes. Los últimos comentarios y la sección rándom
sigue siendo mediante javascript.
Para solventar la cuestión del tamaño de las imágenes que devuelve data:post.thumbnailUrl, miniaturas de 72px por 72px, recurro a javaascript para cambiar su tamaño a través del atributo src
: .replace('/s72-c/','/s400/');
La cuestión tipográfica
En esta ocasión también recurro a diversas tipografías de Google Fonts. La diferencia es que estoy experimentando con la forma de carga.
En primer lugar hago uso de las custom properties
de Css para su declaración al elemento al que interesa:
:root {
--fontF: 'PT Serif';
--sinSerif: /* Fuentes del Sistema (ver post) */;
}
elemento {
font-family: var(--fontF), var(--sinSerif);
}
Y en vez de incluir el link que facilita el servicio para la generación de la regla @font-face lo que hago es crearlo una vez los contenidos de la página ya han sido cargados.
addEventListener('DOMContentLoaded', function() { if (document.querySelector('.last-posts') != null) { var jsFonts=document.createElement('link'); jsFonts.href='https://fonts.googleapis.com/css?family=El+Messiri:400,600'; jsFonts.rel='stylesheet prefetch'; jsFonts.async='true'; document.head.append(jsFonts); } });
Es mi intención investigar un poco más a fondo esta vía y si tiene impacto en el rendimiento, carga y los efectos asociados a las webfonts (FOUT, FOIT...).
El header en los artículos
Unos días después de estos cambios en la portada acometí los correspondientes a los ítems individuales. La mayoría de cambios han sido menores y dejando la parte de los comentarios sin tocar.
Lo que sí se ha llevado una remodelación total en el header de los artículos que luce ahora el blog. Puedes ver una explicación de cómo está hecho en el post Este título se me atravesó: por levógiro, responsive, single element y pure #CSS
Por primera vez en el blog recurro a canvas para generar los polígonos del header. Una frivolidad. El código base original lo encontré en Codepen, obra del usuario Josh.
Pruebas y soporte
En sobremesa he podido probar este nuevo tema en FF, Chrome y Safari, todos en IOs. No he observado ningún problema preocupante. Sólo FF no juega del todo bien con el pie de página. Espero que en sistemas Windows no haya problemas.
En móviles mi veterano teléfono, un HTC one V, con Android 4.0.3 y FF actualizado para él, sin problemas. Tampoco en los emuladores que cada navegador facilita en su "inspector de código" se rompe nada.
Más allá no he podido ir en este apartado. Así que ya sabes. Si te topas con algún bichito grita fuerte en los comentarios. Gracias.
¡Ah!. Sí. Sigo haciendo uso de data:blog.isMobileRequest para aligerar servir o no contenido (imágenes y su tamaño, número de posts, sección "rándom"...) según el dispositivo y tipo de conexión.
Y por esta vez no hay más explicaciones, porque el cómo ya lo tengo contado en cada uno de los artículos donde publiqué como lograr los distintos efectos.
Mi intención es cambiar también el resto del blog: artículo y demás páginas. Así como el backend: abandonar javascript para obtener los ítems de la portada en favor de código nativo de Blogger. Pero ya con más calma.
Espero que sea de vuestro agrado. Incluida la paleta de colores usada. Y que no os topéis con bichos muy gordos.
Nota del Editor: Por cierto, este el el artículo Nº 600
. ¡Chupito! 🥃
Kseso
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
Mmmm.
ResponderEliminarDemasiada pirotecnia. Pero supongo que me voy a resignar ... digo, "acostumbrar".
Un abrazo, y suerte con la tarea (aunque es seguro que si sale un bug, alguien te lo va a reportar).
Es lo que nos debe quedar, Furoya, a estas alturas: paciencia y sabernos acomodar a lo que venga, 😎
EliminarUn saludo.
No me deja entrar al sitio desde Microsoft Edge, que extraño :( en fin... buenas técnicas me gusta!
ResponderEliminarGracias Alex
EliminarExtraño, pues el js es prácticamente el mismo que en el tema anterior, pero reducido para esnifar solo tres grupos (últimos posts, comentarios y el rándom).
Pero ya decía Y que conste en acta que he dicho "navegadores" ;-)
Un saludo
Bueno, siempre es interesante que nos compartas cambios de este tipo en tu blog, pero... no me gusta. La visualización de los contenidos de tus artículos, han mejorado un montón y por eso mismo aprecio mucho, que te encante hacer cambios en el estilo del blog de vez en vez, pero en la portad siempre he tenido mis críticas.
ResponderEliminarSi bien, no estuve muy convencido de cuando lo cambiaste a listas, más o menos me fui acostumbrado, aunque la verdad no del todo y seguía muy perdido para encontrar artículos anteriores, si no fuera por el link que dejas de recopilación. Igual este diseño me gusta más, en cuanto a la disposición de elementos y artículos, pero en cuanto al diseño, es como dice Furoya, demasiado "confetti" y ya has dejado claro anteriormente tus gustos con respecto al color, pero aquí no los "paso", se siente una estética demasiado retro y las tonalidades escogidas, no me remiten a lo que siempre me has acostumbrado a pensar que son los colores del blog.
Esa es otra, entiendo que como tal, kseso, perdón escss es una marca sin manual, es decir, algo que como tal no definen una identidad, sino que la quieres construir de 0 cada vez que quieras para no limitarte, pero mi opinión personal , es que si deberías enfocarte en crear una identidad cromática que sea uniforme así sea en una medida no tan predominante, es decir, en cuanto a diseño Chris Coyier, siempre cambia todo igual o más abruptamente que tu, pero siempre conserva algo de la identidad anterior o en mínimas cuentas, siempre conserva un color: el naranja, no recuerdo sí así ha sido siempre o al menos en el último año, no tengo forma de acordarme de cómo era su web en 2015, pero siempre me acuerdo que si veo algo naranja, en algún lado es que estoy en su blog. Muy distinto cuando intento acordarme de escss, ha sido violaceo, azul, magenta, verde, naranja, gris con verde y ahora violeta, amarillo palido y verdeazul. Que de por si, esa mezcla, no creo que combine mucho.
En fin que resumiendo, recomiendo puntualmente 3 cosas:
1. Colores, su contraste y uso.
2. Buscar una paleta de color en colourlovers.
3. El diseño de verde con gris me ha molado un montón, me hubiese gustado que lo perpetuaras, así sea un año más.
Ya en cuanto a otras cosas de forma:
1. En portatiles y en mi smartphone se ve genial, pero en pantallas más grandes como de 1600 o como la mía: 1980 de ancho, todo ocupa un tamaño excesivo.
2. La sombra de los textos, no combina pero nada con los colores del sitio y como que no queda bien tampoco, cambiando el color y ampliando un poco más su volumen, sería diferente, pero la verdad, no me convence mucho.
Bueno, hasta aquí mi crítica. Espero no te lo tomes a mal, mira que me tome bastante tiempo escribiendo, porque en serio tu blog es de consulta casi diaria para mi, en serio me gusta que quieras seguir cambiando y mejorando cosas cada cierto tiempo, es precisamente por eso, que sigo muy pendiente de tus publicaciones y quiero ver con que me sorprenderas a la próxima. Un saludo y nos estamos leyendo.
Gracias g3kdigital por tomarte tanto tiempo y molestias.
Eliminar"Espero no te lo tomes a mal"
En estos casos la respuesta no es sólo un no si no todo lo contrario. No sólo no me parecen mal vuestras opiniones (para eso abro el post) si no que agradezco toda la información que me brindáis.
El tema de las resoluciones "grandes" creo que estará ya arreglada con una media a mayores y un pequeño ajuste de las celdas que se expanden algunos ítems:
[code]
@media only screen and (min-width: 1600px) {
.last-posts {
grid-template-columns: repeat(auto-fill,minmax(calc(8rem + 3vw + 3vh),1fr));
grid-gap: calc(1rem + 1.5vmin);
padding: calc(1rem + 1.5vmin);
}
}
[/code]
La sombra es porque noté que los títulos se difuminaban un tanto contra el fondo. Creo que al cambiar el color de la sombra mantengo la función y evitaré desagrados ;-)
Bueno, y sobre los colores ya deberíais tener asumido que soy un caso perdido 😰
Eso sí, me reconocerás que los he tenido peores 😄
Recuerda que ni voy de diseñador ni de nada de profesionalidad en este rublo de hacer webs, "sólo soy un Enredique Amanuense de CSS que busca los límites" y escapo, como de gato escaldado del agua fría, de los caminos trillados, de la uniformidad y modas de cada momento.
Un saludo y gracias de nuevo.
P.D.: Casi mejor que no debería comentaros (en especial a ti y a Furoya) las pruebas de aproximación al "brutalismo" que estuve haciendo 😹
¡Pero si el brutalismo es uno de los estilos que más me gustan! Bueno, en arquitectura; en páginas web ...
EliminarMe quedé pensando en la objeción de los monitores grandes. La forma de "arreglar" eso es reducir el ancho del 'body' (sí, con mediaqueries), aunque hay gente que se queja porque a los lados se ve negro; pero la otra opción es justamente que el contenido de la página se desperdigue a lo ancho, y para leer eso es una tragedia. Que alguien pretenda agrandar la web hasta el tamaño del monitor ultra-wide-screen es tan ridículo como querer agrandar una A4 que estamos leyendo sólo porque está sobre una mesa de 80cm de ancho.
En una pantalla 21:9 no se ve agradable. Sería bueno que revisaras eso ;)
ResponderEliminarGracias Alberto
EliminarPero como no mes des alguna pista más que no se ve agradable no podré intentar arreglar nada.
Un saludo.
Se me ve la barra de scroll horizontal en chrome 1366x768, incluso cambiando el zoom.
ResponderEliminarSaludos,
Gracias Mario
EliminarLocalizado el causante (el header donde muestro el título revirado). Creo que con cambiar su anchura a 100% en vez de 100vw ( y un par de ajustes menores) se debería corregir.
Espero dejarlo solucionado esta tarde.
Un saludo.
Mucho mejor que el anterior: la disponibilidad/disposición de los artículos mejora en sobremanera.
ResponderEliminarEl unico pero que tengo no es con el tema en si sino con la practica, hoy tan habitual, del menu fixed, estorba un montón y tapa una franja considerable, recomendaría que lo escondas por defecto y que lo muestres con el cambio de dirección del scroll (ascendente) pero ignoro si esto se podría hacer solo con css.
Gracias Ecco
EliminarNo había reparado que en pantallas pequeñas el header fijo puede llegar a molestar. Creo que en sobremesas no tanto.
CSS no tiene mecanismo de momento para mostrar ocultar en función de si hay o no desplazamiento. Lo más cercano sería position: sticky pero nada que hacer para esto.
Sin embargo Furoya hace ya un tiempo [05/2015] hizo uso de sus dotes de adivino y previó y proveyó esta situación y nos regaló la solución en el artículo Control del scroll - Eventos y efectos al desplazar la página
Creo que no sería demasiado complicado implementarlo en este tema.
Dame unos días para intentarlo.
Un saludo
Gracias por mencionar ese artículo, y me alegra que haya servido para algo. Me pareció muy original la pestaña arcoiris para bajar el header con el puntero (o el dedo), y veo que lo implementaste en menos de un día 😉 .
EliminarYa que hablamos del header, ¿es muy complicado agregarle un botón para bajar directo a los hexágonos de comentarios? Ya sé que soy molesto con el tema, pero es lo que siempre miro después de confirmar si hay artículo nuevo, y me cuesta arrastrarme hasta ahí.
Gracias, y felicitaciones por el nuevo look.
Vale Furoya, esta vez"me olvidé" de ese detalle hasta ver cuánto tardabas en "recodarmelo" 😂
Eliminar¡Hecho! Ahí está el 🛴 a comentarios.
Un saludo