/* Box sizing */ /*Tamaño de la caja. Restablecí todos los elementos y pseudo-elementos para usar box-sizing: border-box -> encaja completamente dentro del ancho declarado.*/ *, *::before, *::after { box-sizing: border-box; } /* Padding */ /*Selecciono solo listas que tienen un atributo de clase porque si se usa un

simple, quiero que se vea como una lista.*/ ul[class], ol[class] { padding: 0; } /* Margin */ body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } /*Es útil que llene la pantalla, incluso cuando está vacía, así que lo hago configurando la altura mínima en 100vh. También me gusta el desplazamiento suave del scroll, así que configuro el comportamiento de desplazamiento: suave también.*/ /*Solo configuro dos estilos de texto: la altura de la línea en 1.5 porque el 1.2 predeterminado simplemente no es lo suficientemente grande como para tener texto accesible y legible. También configuré la representación de texto para optimizarSpeed. El uso de OptimizeLegibility hace que el texto se vea mejor, pero puede tener serios problemas de rendimiento, como demoras en la carga de 30 segundos, así que trato de evitarlo ahora.*/ body { min-height: 90vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; } /* Al igual que las reglas de margen y relleno, solo restablezco el estilo de lista cuando un elemento de lista tiene un atributo de clase. */ ul[class], ol[class] { list-style: none; } /* Para los enlaces sin un atributo de clase, configuro text-decoration-skip-ink: auto para que el subrayado se muestre de una manera mucho más legible. Esto podría establecerse en enlaces de forma global, pero me ha causado uno o dos conflictos en el pasado, así que lo mantengo así. */ a:not([class]) { text-decoration-skip-ink: auto; } /* Establezco las imágenes como un elemento de bloque para quitar el espacio inferior por defecto y así tienden a comportarse como bloques. */ img { max-width: 100%; display: block; } /* Apunta a los descendientes directos de un artículo y les agrega 1em de margen superior. Esto le da un ritmo sólido al contenido fluido. */ article > * + * { margin-top: 1em; }*/ /* Fuentes heredadas en campos de formulario.¡No más texto diminuto (mono, en algunos casos)! */ input, button, textarea, select { font: inherit; } /* Elimina todas las animaciones y transiciones para los usuarios que prefieren no verlas. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }