Plan de mejora visual del blog (06 de marzo 2026)

Objetivo general

Renovar la estética del blog personal mejorando tipograffa, paleta, responsividad y adoptando un tema ms moderno o un fork personalizado del existente. El cambio debe ser gradual, probado en local y desplegado sin interrupciones.

---

✅ Tarea 1: Evaluar temas existentes

1. Listar 3-4 temas populares como Minimal Mistakes, Lanyon, So Simple y Hyde. (completado)
2. Clonar cada tema en carpeta temporal y ejecutar jekyll serve. (completado)
3. Documentar pros/cons en docs/temas-comparativa.md. (documento creado)
4. Commit con la comparacin. (hecho)

✅ Tarea 2: Decidir enfoque de tematizacin

1. Revisar comparativa y escoger:
   • a) adoptar tema externo
   • b) fork de Moon con variables
   • c) tema propio. (elegido)
2. Registrar la decisin en el mismo doc. (actualizado)
3. Crear rama feature/tematizacion. (lista)

✅ Tarea 3: Prototipar wireframes / moodboard

1. Recopilar inspiracin (sitios, colores, tipograffa). (inicio en docs/moodboard.md)
2. Esbozar wireframes simples en docs/moodboard.md. (plantilla creada)
3. Commit. (hecho)

✅ Tarea 4: Ajustar tipograffa y paleta global

1. Elegir fuentes (p.ej. Inter, Roboto) y aadir en variables. (listo)
2. Modificar typography.scss para nuevos tamaños/interlineado. (ajustado)
3. Definir paleta de colores en variables.scss. (actualizada y alias para legacy)
4. Compilar y revisar; commit. (cambios comprometidos)

✅ Tarea 5: Diseo responsive mejorado

1. Revisar y refactorizar breakpoints en Sass. (container fluid y simplificado)
2. Añadir reglas para esconder/mostrar elementos segn ancho. (parcial, en progreso)
3. Probar en devtools y dispositivos. (por hacer)
4. Commit. (cambios aplicados)

✅ Tarea 6: Soporte de modo oscuro

1. Definir variables CSS y query prefers-color-scheme. (añadido en site.scss)
2. Crear interruptor en UI, guardar preferencia en localStorage. (toggle integrado)
3. Probar y escribir test de JS si se decide. (pendiente de pruebas manuales)
4. Commit. (código comprometido)

Tarea 7: Migracin / integracin del tema elegido

1. Copiar/ajustar archivos del tema a la estructura del blog.
2. Modificar _config.yml y layouts.
3. Ejecutar jekyll build y corregir Liquid.
4. Commit.

Tarea 8: Pruebas y validacin

1. Recorrer el sitio localmente en varios dispositivos.
2. Verificar accesibilidad con Lighthouse/axe.
3. Documentar fallos en docs/checklist-pruebas.md.
4. Fixes y commit.

Tarea 9: Despliegue y monitoreo

1. Merge a main/prod.
2. Forzar rebuild en GitHub Pages.
3. Verificar que estilos cargan correctamente.
4. Documentar en docs/deployment-notes.md.

Tarea 2: Decidir enfoque de tematizacin

1. Revisar comparativa y escoger:
   • a) adoptar tema externo
   • b) fork de Moon con variables
   • c) tema propio.
2. Registrar la decisin en el mismo doc.
3. Crear rama feature/tematizacion.

Tarea 3: Prototipar wireframes / moodboard

1. Recopilar inspiracin (sitios, colores, tipograffa).
2. Esbozar wireframes simples en docs/moodboard.md.
3. Commit.

Tarea 4: Ajustar tipograffa y paleta global

1. Elegir fuentes (p.ej. Inter, Roboto) y aadir en variables.
2. Modificar typography.scss para nuevos tamaños/interlineado.
3. Definir paleta de colores en variables.scss.
4. Compilar y revisar; commit.

Tarea 5: Diseo responsive mejorado

1. Revisar y refactorizar breakpoints en Sass.
2. Añadir reglas para esconder/mostrar elementos segn ancho.
3. Probar en devtools y dispositivos.
4. Commit.

Tarea 6: Soporte de modo oscuro

1. Definir variables CSS y query prefers-color-scheme.
2. Crear interruptor en UI, guardar preferencia en localStorage.
3. Probar y escribir test de JS si se decide.
4. Commit.

Tarea 7: Migracin / integracin del tema elegido

1. Copiar/ajustar archivos del tema a la estructura del blog.
2. Modificar _config.yml y layouts.
3. Ejecutar jekyll build y corregir Liquid.
4. Commit.

Tarea 8: Pruebas y validacin

1. Recorrer el sitio localmente en varios dispositivos.
2. Verificar accesibilidad con Lighthouse/axe.
3. Documentar fallos en docs/checklist-pruebas.md.
4. Fixes y commit.

Tarea 9: Despliegue y monitoreo

1. Merge a main/prod.
2. Forzar rebuild en GitHub Pages.
3. Verificar que estilos cargan correctamente.
4. Documentar en docs/deployment-notes.md.