Estilos CSS

El siguiente paso para convertir esta maqueta de blog en un Blog como corresponde es darle estilo. Aprovechando el vuelo, le agregaré un modo oscuro para no dejar a la gente encandilada con el fondo blanco cuando entren a mi blog. Escribiendo esto, me di cuenta: ¿Por qué pasar por todo el esfuerzo de diseñar un modo oscuro (con toggle y cookie incluída), si puedo hacer sólo un diseño oscuro? Así que decidí que el estilo será oscuro por defecto y a futuro veré si amerita ponerle un botón que permita alternar estilos. (Muy distinto a lo que me sucedió al crear mi página personal, donde lo primero que quise hacer fue ponerle modo oscuro, y terminé implementando todos los colores de la rueda de colores de Magic The Gathering)

Debo reconocer que mi fuerte no es el front-end, y que si bien entiendo cómo funcionan el HTML y el CSS, no tengo la intuición para saber qué estilos agregar a una página web y hacer que se vea bonita. Por lo tanto, mi primer paso fue buscar en internet cómo darle un estilo básico a mi blog.

El primer concepto que me encontré fue el de CSS reset, esto es, "un grupo de reglas en CSS que remueven o estandarizan el estilo por defecto que añade el navegador". Básicamente, es para darle consistencia a la apariencia de la página para que se vea igual independiente del navegador, y sobre esta base añadir los estilos personales. Decidi tomar el reset compartido en este blog. Entendí que mientras más nuevo mejor, ya que pueden ir quedando obsoletos a medida que se van agregando cambios a los navegadores. A eso le sumé margin: 0 y padding: 0 ya que los vi en todos lados.

¿Dónde agregar este reset? En Rails, las hojas de estilo se guardan en app/assets/stylesheets, y el archivo application.css define estilos para toda la aplicación. Este es el antes y después de agregar el reset.

Nada impresionante la verdad. Pero el punto no es que se vea bien con el reset, así que a echarle para adelante.

El siguiente paso es elegir una fuente/tipografía. Ese es todo un mundo de por sí. Me conformo por ahora con elegir una fuente gratis de Google Fonts. Elegí la fuente Comic SansLibre Caslon Text. Encontré que se veía bien, con algo de personalidad, no tan achatada como otras fuentes que vi, y con serifa para darle un poco —sólo un poco— de seriedad. Al elegir una fuente en Google Fonts, te entregan el código HTML que se debe agregar en el encabezado para que cargue correctamente, y el estilo a configurar en CSS. En mi caso:

  body {
    font-family: 'Libre Caslon Text', serif;
  }

El efecto es inmediato:

Siguiente paso: colores. Quiero una paleta oscura, principalmente con azules y grises. Encontré la paleta Deep Sea en la página Coolors, y luego la modifiqué un poco, agregando un par de colores complementarios e intermedios. Luego definí los colores asignando nombres para facilitar su reutilización. 

  :root {
    --ink-black: #0d1b2a;
    --prussian-blue: #1b263b;
    --dusk-blue: #415a77;
    --dusty-denim: #778da9;
    --steel-blue: #8a9cb3;
    --light-slate: #c4cdd9;
    --alabaster-grey: #e0e1dd;
  
    --accent: #d4a574;
    --accent2: #b8763e;
  
    --bg: var(--ink-black);
    --surface: var(--prussian-blue);
    --fg: var(--light-slate);
    --fg-emphasis: var(--alabaster-grey);
    --muted: var(--steel-blue);
    --border: var(--dusk-blue);
  }

--bg lo uso como background del body, y --fg lo uso como el color, esto es, el color del texto —para los que manejan CSS a diario esto debe ser como decir que el agua moja—. Además le doy colores a los enlaces (visitados o no, o con el mouse encima), encabezados y cajas de código. El resultado es el que ya ven en la página. Cuando tenga caja de comentarios, podrán decirme qué les parece esta paleta. Por ahora me parece razonable así que le echaré para adelante.

Un cambio más que me parece necesario es que el texto no abarque todo el ancho de la pantalla. Hasta este punto, he hecho todos los cambios más obvios para mis ojos, pero lo demás —incluído el ancho del texto— empieza a entrar en el terreno del typesetting, y ahí encuentro que es mejor dejárselo a los expertos, en este caso a Claude. En base al tipo de contenido, le pedí leves ajustes al estilo y me ayudó a definir los siguientes elementos:

Y con eso estaríamos. Se ve bastante mejor que antes. A futuro puede que cambie la paleta de colores. Incluso podría unificar el estilo del blog con el estilo Neobrutalista que usé en mi página personal. Sería entretenido que la elección de tema en una página afectara a la otra, haciéndolas sentir más conectadas. Pero por ahora estoy conforme con los resultados y aprendí en el proceso.

—Claudio Yáñez M.