En las entradas he hecho algunos cambios que voy a explicar en el orden en que los he realizado.
Para empezar he enmarcado la zona del post y para ello he usado una de las variables que han quedado inservibles al haber colocado la imagen en la cabecera; la que definía el color de los rectángulos que había a los lados, headerCornersColor, así que en la zona que empieza por .post { he añadido estas dos líneas
border: 1px solid $headerCornersColor;
background-color: $headerBgColor;
La primera para crear el borde y la segunda para que el fondo no se viera del mismo color que el fondo de la que llamo "zona útil" que está formada por el conjunto de entradas y sidebar, con lo que he aprovechado otra variable más de las que no se van a utilizar al colocar una imagen en la cabecera, la que define su color.
Después he enmarcado el título de las entradas a juego con los títulos de los elementos de la columna lateral y para ello en la zona del .post-title { he añadido esta línea
background-color: $sidebarTitleBgColor;
debajo del padding, al que he cambiado el 0 por un 10px para separar el título del borde del recuadro, pues quedaba muy pegado a la izquierda.
(Puedes variar esta cantidad a tu gusto, haciendo vista previa para ir viendo como te gusta más)
También he separado un poco el texto de las entradas del margen izquierdo, pues quedaba muy pegado a la línea del borde. Para eso en la zona .post div { he modificado la línea del margin dejándola así
Lo siguiente ha sido enmarcar el pie del post a juego con el resto. En .post-footer { he añadido esta línea
background-color: $sidebarTitleBgColor;
debajo de margin y para separar las letras del borde esta otra
Otro cambio que he hecho aquí es añadir una propiedad al título para que, cuando pongas el ratón encima, cambie de color, (en la siguiente entrada está el código de la variable hoverlinkColor) y para ello he creado una nueva zona en el CSS.
Al final de la que empieza así .post-title a, .post-title a:visited, .post-title strong { y antes de .post div { he añadido esta
.post-title a:hover {
color: $hoverlinkColor;
text-decoration: underline;
}
También le he añadido una propiedad al blocquote, el background, pues al publicar la primera de las entradas que estoy haciendo he visto que simplemente separaba el texto del margen, y a mi me gusta que se distinga mejor y creo que la mejor manera es poniendo un color de fondo.
Y como quería que este color fuera totalmente distinto a los que componen el blog, le he creado una variable más y la he llamado blocquoteBgColor / Blocquote Background Color. (Lógico, ¿no?)
y la he añadido así
<Variable name="blocquoteBgColor" description="Blocquote Background Color" type="color" default="#ffffff" value="#ffffcc">
Una vez aceptada la nueva variable he añadido esta línea a .post blocquote {
background-color: $blocquoteBgColor;
para que los textos que desee remarcar, (en mi caso los códigos que has de añadir o modificar) destaquen.
Recuerda que lo que está en rojo es lo que hay en el código original y lo que está en azul lo que le añado.
Y sobre todo no olvides ir haciendo vista previa, e ir haciendo los cambios uno a uno. Cambio que funciona, plantilla guardada. De esta forma te evitas tener que volver a colocarlo todo si has de Borrar cambios.
