A modo de recordatorio, tomo nota aquí de los cambios que he introducido en el blog estos días.

He sustituido mi foto anterior por un avatar pixelado que he confeccionado en la web AVATARS IN PIXELS.

He subido esta nueva imagen a mi cuenta de Gravatar. De esta forma, micro.blog se referencia por defecto al avatar de Gravatar y muestra este nuevo monigote. Para asegurarme de que esto sucede así, he borrado la fotografía que anteriormente había subido a la sección de Account de micro.blog.

Hecho eso, me he dado cuenta de que el nuevo avatar aparecía integrado dentro de un marco circular azul. Esto es porque se le aplicaba este CSS que había personalizado para enmarcar las imágenes:

img {
    border: 2px solid #3988a7;
    border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
}

Para excluir el avatar de ese atributo y dejarlo sin ningún marco a su alrededor, he incluido este código en el CSS:

img.profile_photo {
	border: none;
}

El siguiente atributo es para centrar todo el encabezamiento en la página (avatar, título de la web y botones de navegación):

.site-header {
	text-align: center;
}

Finalmente, tenía ganas de volver a utilizar el logo de umerez.eu que diseñó Carola Clavo hace algún tiempo, por lo que he tenido que hacer lo siguiente:

  • Cambiar el título de la web de Esteban Umerez Blog a umerez.eu en la sección de Design de la cuenta de micro.blog.
  • Subir la tipografía utilizada por Carola (Quicsand Light) a la sección de Uploads y guardar su URL.
  • Incluir el siguiente código CSS.
@font-face {
	font-family: 'UmerezQuicksandLight';
	src: url('https://[ruta de la fuente tipográfica]') format('opentype');
}
h1 {
	font-family: 'UmerezQuicksandLight';
	font-weight: 100;
}

El primer atributo @font-face es para incluir la referencia a la tipografía previamente subida a la web, de forma que luego cada elemnto pueda referirse a esa nueva familia de fuentes.

Los atributos format('opentype') y font-weight: 100; han sido fundamentales, porque de otra forma el título no se mostraba correctamente. Sin el formato adecuado, no se mostraba la nueva fuente sino que renderizaba una por defecto del CSS principal (Times New Roman, si no me equivoco). Y sin el peso font-weight adecuado, se mostraba la tipografía Quicksand en negrita.

No he podido cambiarle el color. He usado distintos atributos, tanto en el título h1 como en el site-header pero no ha funcionado. Se muestra en negro y cambiar color azul deseado (#3988a7) cuando se pasa el ratón por encima. Lo volveré a intentar en otra ocasión.