En la presente entrada vamos a hablar de cómo personalizar el tamaño de la tipografía en dicho theme para un rango de visualización intermedio (680 a 968px).
NOTA: en este blog han sido tratados, en post escritos en junio de 2016 , cuestiones vinculadas a ajustes de las plantillas oficiales en uso en ese momento, plantillas que no generaban layouts de tipo responsive como las nuevas. En lo que sigue nos concentraremos en los procedimientos a aplicar en un theme del 2017 específico, el theme Notable.
Una breve recapitulación
Estuvimos tratando en el post anterior cuestiones que tienen que ver con el tamaño con que se muestra el texto principal en el theme Notable. Dado que estamos hablando de un layout responsive, analizamos cómo cambian los valores de los caracteres por línea según cambia el ancho del viewport (esto está vinculado directamente al dispositivo con que se visualice nuestro blog).
Definamos el objetivo
La finalidad de la presente entrada será principalmente “pedagógica”... mostrar de qué manera se puede implementar un primer y simple cambio en el theme, que permita compensar en parte la situación descripta.Concretamente: veremos cómo generar un nuevo tamaño de fuente para el texto principal —entre 14px y 20px: yo probé con 17px— para que se utilice en el rango antedicho.
Para los amantes de las gráficas: vamos a pasar de lo que mostramos arriba a ésto...
NOTA: Desde ya que podríamos haber modificado directamente la plantilla .xlm del theme, pero opté por mostrar una manera más directa (o que asuste menos).
¿Cómo se definen los tamaños de fuente principal en el theme?
Ya hablamos que una de las ventajas del empleo de las plantillas oficiales de Blogger era que para su personalización básica no se necesitan conocimientos avanzados de diseño web. Esto gracias a que tenemos el mencionado “Diseñador de Temas de Blogger” a nuestra disposición.Desde el mismo se puede determinar, entre otras cosas, el tamaño de fuente principal, usado en el cuerpo de texto de cada entrada o página estática.
Como vemos en la imagen, yo dejé el tamaño predeterminado de 20px, y cambié la fuente a Montserrat.
Cualquier cambio realizado desde el Diseñador se almacenará en la plantilla .xml… en realidad estamos redefiniendo ciertas variables que se usan en dicha plantilla para generar los estilos CSS: en este caso en particular la variable ($body.text.font).
En la plantilla, el nuevo código quedará:
<Group description="Body">
...
<Variable name="body.text.font" description="Font" type="font"
default="$(loraNormal20)" value="normal normal 20px Montserrat"/>
...
</Group>
body{
background-color:$(body.background.color);
color:$(body.text.color);
font:$(body.text.font);
margin:0 auto
}
body{
background-color:#ffffff;
color:#292929;
font:normal normal 20px Montserrat;
margin:0 auto
}
Para valores menores o iguales a 968px dicho valor es sobreescrito dentro de los corchetes de una media-query, y vale:
@media screen and (max-width:968px){
body{
font-size:$(body.text.font.size * 14 / 20)
}
@media screen and (max-width:968px){
body{
font-size:14px
}
Conclusión:
Vemos que el valor de tamaño de fuente para viewports chicos está determinado por el mismo valor fijado para viewports grandes (hay una sola variable de ajuste). Esto es lo que justifica que al cambiar el tamaño de fuente para una configuración tipo desktop (nuestros 20px), cambie proporcionalmente el valor para configuraciones menores a 968px (en principio, a 14px).Ya estamos ante una pista sobre cómo afectar el rango de visualización entre 600px y 968px… seguramente incluirá algo como ésto:
@media screen and (min-width: 601px) and (max-width: 968px){
body{
font-size:$(body.text.font.size * 17 / 20)
}
…
Dejo un par de link con información sobre media-queries y su uso en los responsive designs.
Lecturas recomendadas:
- Wikipedia > Media query
- rolandocaldas.com > Media queries como base del responsive design
- w3.unpo<code>todo > @media-query
La plantilla del theme Notable, y sus intríngulis
Un análisis detallado del archivo .xml de la plantilla da cuenta de una particularidad de la variable $(body.text.font): además de su uso básico para configurar el tipo de fuente principal del blog, se usa para determinar otras reglas CSS, de elementos tales como la letra capital que encabeza algunos posts, o la altura de los contenedores de resúmenes de posts (reglas .post-snippet.snippet-container, .popular-posts-snippet.snippet-container, y otras).Ejemplo:
.post-snippet.snippet-container{
max-height:$(body.text.font.size * 4 * 2)
}
.post-snippet.snippet-container{
font-size:14px;
max-height:112px /* esto es 14px * 4 * 2 */
}
Puede inferirse entonces que, si queremos mantener implementar nuestros cambios y seguir manteniendo cierta coherencia con la plantilla original, deberemos afectar más que la regla:
font-size:$(body.text.font.size * 17 / 20)(También hay que considerar que los tamaños de letra de otros componentes del texto —títulos y demás— deberían ser afectados más o menos proporcionalmente al nuevo tamaño propuesto de 17px).
Recalculando...
De todo lo antedicho vemos que la modificación propuesta al theme Notable presenta unas cuantas complicaciones…Antes de mostrar los cambios a introducir vía el “Diseñador de Temas de Blogger”, aclaro que para crear los mismos me guié en los criterios que se usaron en la plantilla original para adaptar la visualización del theme de un tamaño de fuente de 20px (usado en desktops) a 14px (usado en smartphones).
Acá están los cambios propuestos...
@media screen and (min-width: 601px) and (max-width: 968px){
body{
font-size:$(body.text.font.size * 17 / 20)
}
.post-header-container .byline,.post-header-container .byline a{
font-size:17px
}
.post-title,.post-title a{
font-size:32px
}
body.item-view blockquote{
font-size:20px
}
body.item-view .Blog .post-body{
font-size:$(body.text.font.size * 17 / 20)
}
body.item-view .Blog .post-body::first-letter{
font-size:$(body.text.font.size * 17 / 20 * 4);
line-height:$(body.text.font.size * 17 / 20 * 4)
}
.popular-posts-snippet.snippet-container,.post-snippet.snippet-container{
font-size:17px;
max-height:calc(17px * 8)
}
.popular-posts-snippet .snippet-fade,.post-snippet .snippet-fade{
height:34px
}
.hero-post-snippet.snippet-container{
font-size:17px;
max-height:calc(17px * 8)
}
.hero-post-snippet .snippet-fade{
height:34px
}
.hero-post-noimage-snippet.snippet-container{
font-size:17px;
line-height:2;
max-height:calc(17px * 16)
}
.hero-post-noimage-snippet .snippet-item{
line-height:2
}
.hero-post-noimage-snippet .snippet-fade{
height:34px
}
.hero-post-noimage-snippet .snippet-item::first-letter{
font-size:68px;
line-height:normal
}
}
Importante para destacar: lo tratado en este post y el anterior tiene una finalidad más que nada "educativa", que quizás sirva de guía para aquellos que intenten sus propios cambios visuales en esta (u otra) plantilla de Blogger.
Aún con los cambios de tamaño de fuente, el theme Notable muestra imágenes de "enorme" tamaño en los resúmenes (snippets) de cada post, dentro del rango de visualización en que estamos realizando los cambios. Mejorar esto quedará (quizás) como tema a tratar en un futuro.
(CONTINUARÁ..?)
Comentarios