Estilo de las listas en Jekyll

Una de las primeras entradas que publiqué en la nueva versión de Infinitos Contrastes (en aquellos tiempos cuando aún utilizaba el tema Hooligan) fue “Los 34 grados de libertad de un estudio que deben evitar los investigadores” (enlace) y al revisarla localmente encontré cierto aspecto, del estilo definido para los posts, que no me resultó en absoluto agradable a la vista. Para generar en los párrafos una especie de sensación de espaciado entre líneas, la altura de la línea está declarada a 25px para un tamaño de letra igual a 14px. Sin embargo, dicha altura únicamente asciende a 18px para los elementos de una lista, lo cual provoca que esta se muestre de una manera ciertamente compacta.

Como bien dicen: “una imagen vale más que mil palabras”, así que en lugar de ir andando con números, directamente os mostraré en la siguiente figura el comentado efecto que presentaba el artículo:

Efecto no deseado

Examinemos, a continuación, una forma sencilla de resolver esta situación de manera favorable. En principio, el plan de actuación que seguiremos es:

  • Incrementar el valor de la altura de la línea para los elementos de una lista a 25px, de forma que así coincida con el establecido para los párrafos.
  • Añadir una separación vertical entre los elementos de una lista igual a la que se emplea entre párrafos (15px).

En un primer instante, podemos estar tentados a acudir directamente a la hoja de estilo que el tema Hooligan pone a nuestra disposición e implementar las anteriores características para los elementos li. No obstante, eso provocaría que se perdiese el aspecto compacto que presentan los listados que aparecen en las páginas de categorías o etiquetas, o incluso en el índice del propio blog, que, personalmente, encuentro bastante atractivo.

Así pues, dado que sólo buscamos modificar el estilo de las listas para los posts, ¿por qué no acudir directamente a la plantilla de estos y codificar las propiedades que nos interesan para el elemento li? Para ello, tenemos que navegar por la ruta \_includes\themes\hooligan y abrir con un editor de texto plano el archivo denominado post.html, que es la plantilla que el tema utiliza para generar los posts de este sitio web.

Ahora, insertamos al comienzo del código las siguientes líneas:

<style type="text/css">
  li {
    line-height: 25px;
  }
  li:not(:last-child) {
    padding-bottom: 15px;    
  }  
</style>

La propiedad line-height es la que nos permite declarar la altura de la línea, mientras que padding-bottom hace lo propio para conseguir un efecto de separación entre los distintos miembros de una lista. A este respecto, para evitar añadir espacio adicional tras el último elemento de una lista, haremos que la propiedad padding-bottom no le afecte, justificando así la aparición de la condición :not(:last-child).

Sin embargo, aunque con el anterior bloque de código alcanzamos con éxito los objetivos que marcamos arriba, existen “daños colaterales”. Por una parte, la separación declarada para los distintos miembros de una lista afecta a cómo se muestran las etiquetas que aparecen en la parte derecha de la página asociada al artículo. Estas dejan de mostrarse de manera compacta, hecho que, personalmente, no termina de convencerme. Por otro lado, aparece un espacio vertical adicional en el menú de navegación, que ahora posee cierto tamaño en las páginas asociadas a posts y otro distinto para el resto del sitio web.

No es mayor problema, ya que utilizando cualquier herramienta de inspección de elementos web, tendremos acceso a las respectivas clases para los dos elementos mencionados y bastará simplemente con declarar las propiedades de manera adecuada. Así pues, en lugar de insertar el anterior bloque de código, utilizaremos el siguiente:

<style type="text/css">
  li {
    line-height: 25px;
  }
  li:not(:last-child) {
    padding-bottom: 15px;    
  }
  .tag_box li {
    line-height: 28px;
  }
  .tag_box li:not(:last-child) {
    padding-bottom: 0px;
  }
  .nav li {
    padding-bottom: 0px;
  }  
</style>

Un par de comentarios al respecto de esta forma de proceder:

  • Soy completamente consciente de que no conviene mezclar en un mismo archivo la estructura de la página con su estilo. En lugar de actuar como está indicado arriba, tendríamos que haber creado un nuevo fichero de estilo con las anteriores declaraciones de atributos y enlazarlo en la plantilla definida para los posts. Si el anterior bloque creciese de manera significativa, adoptaría el enfoque comentado sin dudarlo.
  • Debería existir una versión Liquid que abordase la situación planteada de manera más elegante (si alguien la conoce, que la comparta en los comentarios, por favor). No obstante, como recién llegado a este conjunto de tecnologías, la solución planteada estaba a mi alcance y resolvía de forma rápida el problema.

Finalmente, aunque este artículo está centrado en la configuración del estilo para los elementos de una lista, cabe destacar que el método es extrapolable a cualquier aspecto del estilo de una página del sitio web que busquéis modificar. La idea es bien acudir a la plantilla general (default.html), bien a las de las páginas (page.html o post.html), o bien incluso insertar cierto estilo en un documento escrito en Markdown para que así afecte exclusivamente a una página o artículo en particular.

Nota (I): en la actualidad, el tema de este sitio web no es Hooligan, sino una versión adaptada de Minimal Mistakes. Las modificaciones de estilo en este último se realizan a través de introducir cambios en los archivos adecuados de la carpeta _sass, donde encontramos la nada desdeñable cantidad de dieciocho ficheros. Aunque a primera vista pueda intimidar este sistema, el autor del tema ha escogido de manera muy acertada los nombres de dichos archivos, para que así fácilmente podamos averiguar en cuál reside el código a modificar. Además, se ha tomado la molestia de incluir numerosos comentarios que nos harán la vida más sencilla a la hora de entender los bloques de código.

Nota (II): cualquier comentario relacionado con el texto precedente se puede llevar a cabo a través de su correspondiente entrada en el blog.

Publicado: