Tema, css y extras

22 de Agosto del 2016

Bueno, una vez tenemos instalado Jekyll en el ordenador llega la ardua faena de elegir tema navegando entre miles de opciones y colores para todos los gustos.

No sé si a vosotros os pasará esto, pero yo me pase días probando y adecuando temas hasta que encontré uno que se acomodaba a lo que quería, probé temas ostentosos con muchas opciones, colorines, menús y submenús pero al final me decidí por uno muy sencillo.

El tema base que elegí fue Basic hecho por Micah Cowell, como podéis ver es extremadamente simple por lo que fue sencillo amoldarlo a lo que buscaba.

Si os preguntáis como se ajustan estos temas o su grado de dificultad, como ya dije en el post anterior, os diré que con unos conocimientos básicos de HTML, CSS y un par de búsquedas en Google no tendréis problemas.

La única pega que encontré al tema es que no funcionaban los blockquotes como éste, pero añadiendo al CSS el código de más abajo solucionamos este problema

blockquote {
	border-left: 5px solid $color-grey;
	margin: 1.5em 20px;
	padding: 0.5em 10px;
}

Obviamente podemos configurarlo al gusto, no es necesario dejarlo igual que el de arriba. También me pasó lo mismo con las tablas, pero una vez más añadiendo el código de más abajo solucionábamos este problema (para ver cómo crear una tabla y mucho más puedes mirar mi chuleta del primer post).

table {
	border-collapse: collapse;
  	border: 2px solid $color-white;  
}

th {
	background-color: $color-grey;
	vertical-align: middle;
	font-weight: bold;
	border: 1px solid $color-white;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
}

tr:nth-child(even) {
	background-color: $color-black;
}

td {
	vertical-align: middle;
	border: 1px solid $color-white;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
}

Y ya que he estado utilizando esta codebox (por llamarla de alguna forma) comentaros que por defecto venia en este tema un solo color para el texto (aunque con otro tono) como pondré en el ejemplo de aquí abajo.

table {
	border-collapse: collapse;
  		border: 2px solid $color-white;  
}

Decidí añadir los colores del conocido tema Monokai, hay diferentes formas unas más liosas que otras, pondré como ejemplo la que he utilizado yo, para mi de las más fáciles. Añadimos esta línea al head del HTML <link rel="stylesheet" type="text/css" href="/nuestra-ruta/syntax.css"> y luego tan solo tenemos que copiar nuestro css con el tema que elijamos, el que yo utilicé fue éste pero en este repositorio teneis más para elegir.

Una vez todo ya configurado quería poner botones al final de mi página de about y una buena solución fue añadir la fuente de la conocida Font Awesome con la que seremos capaces de utilizar los muchísimos botones disponibles ya sea para texto normal, como enlaces o ¡incluso podemos hacerlos rotar! . Tan solo tenemos que añadir esta linea al head <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">, tenemos más opciones incluyendo el bajarse la fuente y no acceder a su servidor. En esta página de w3schools nos enseñan cómo utilizarlos, pero es tan sencillo como poner esta linea <i class="fa fa-folder-open-o" aria-hidden="true"></i> y aparecerá una bonita carpeta , para los demás tan sólo necesitaremos cambiar el nombre del icono. =)

Por último añadir que por mero capricho añadí un sistema de spoiler hecho por un amigo en JavaScript, lo tiene disponible para todo el mundo en un repositorio de su perfil de GitHub.

[spoiler]No olvidéis que para cualquier duda podéis escribir a mi correo electrónico iam@jmoral.es o a mi Twitter @owniz. ツ[/spoiler]