el aspecto antiguo tenía que irse
Llevo meses mirando este blog y algo nunca terminaba de cuadrar. Se veía como cualquier otra plantilla de blog de markdown a html. Tipografía correcta, espaciado correcto, completamente olvidable. Podría haber sido la página de cualquiera.
Quería que se viera como la mía.
por qué verde
Sinceramente aquí no hubo mucho debate. Simplemente me gusta el verde. Musgo, abeto, ese verde apagado que se ve en las rocas cerca del agua. Se sintió como el color base correcto incluso antes de tener un plan para el resto.
hacer que se sienta como aquí
La idea que se quedó fue: y si el sitio se pareciera a Lovund en lugar de parecerse a un sistema de diseño. No literalmente, no voy a poner fotos de fiordos de fondo, pero sí la sensación. Colores apagados, algo un poco curtido por el tiempo, menos "página de aterrizaje SaaS" y más un sitio donde de verdad te gustaría sentarte a leer.
primera pasada, papel y serif
Empecé por la tipografía. Cambié la fuente del cuerpo a Literata, una serif hecha para leer texto largo, e hizo más trabajo del que esperaba. Un párrafo sencillo de repente parecía pertenecer a un libro en lugar de a una maqueta de interfaz.
Luego el fondo. Opté por un blanco roto cálido y ligeramente musgoso en lugar de blanco puro, algo así como papel que ha estado guardado en una cabaña durante unos años. Combinado con un verde más oscuro para los encabezados y enlaces y ya parecía un sitio distinto.
Todo el asunto se redujo a cambiar cuatro variables CSS, lo cual se sintió casi anticlimático dado lo distinto que se ve el sitio ahora. Partí de lo que fuera que trajera el kit inicial, un azul por defecto que no te decía nada sobre quién había escrito la cosa:
/* what was already there */
@theme {
--font-body: ui-sans-serif, system-ui, sans-serif;
--color-bg: #ffffff;
--color-fg: #1a1a1a;
--color-accent-500: #3b82f6;
}@theme {
--font-body: 'Literata', ui-serif, Georgia, serif;
--color-bg: #ecf3ee;
--color-fg: #141c18;
--color-accent-500: #2f6b45;
}Todavía no cambió nada más. Ningún diseño nuevo, ningún pixel art, nada de eso. Solo fuentes y color. Pero fue la primera vez en un tiempo que abrí este sitio y pensé, vale, esto ya es mío de verdad.
Viene más esta semana. Tengo ideas para la cabecera que van a tardar mucho más de lo que deberían, y ya estoy esbozando cosas en papel en lugar de simplemente hacerlas directamente en el navegador como de costumbre.