Fylo Dark Theme
El reto principal
El diseño llega en dos anchos: móvil y escritorio. Todo lo que hay entre esos dos puntos te lo tienes que inventar tú, y es justo ahí donde se rompen las maquetaciones — en la tablet que nadie diseñó.
Problema concreto
La sección de testimonios se desbordaba entre 700 y 900 px: con flex fijo las tarjetas no cabían y el texto se salía. Cambiarla a grid con repeat(auto-fit, minmax(...)) eliminó el punto de ruptura por completo — la rejilla decide cuántas columnas caben sin que yo tenga que declarar un breakpoint para cada caso.
Qué aprendí
Los breakpoints son un parche cuando el layout no sabe adaptarse solo. Cuanto mejor usas grid y unidades relativas, menos media queries necesitas escribir.
- Un tema oscuro no es invertir colores: hay que recalcular el contraste de cada texto
-
auto-fitconminmaxsustituye varias media queries de golpe - Probar en anchos intermedios encuentra más bugs que probar en móvil y escritorio
Tecnologías
- HTML
- CSS
- JavaScript
- GitHub Pages