/** * Document * Content-box & Responsive typography */ // Reboot based on : // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // –––––––––––––––––––– // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border` *, *::before, *::after { box-sizing: border-box; // 1 } // 1. Add text decoration inheritance in all browsers (opinionated) // 2. Add vertical alignment inheritance in all browsers (opinionated) ::before, ::after { text-decoration: inherit; // 1 vertical-align: inherit; // 2 } // 1. Correct the line height in all browsers // 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS // 3. Change the default tap highlight to be completely transparent in iOS // 4. Use the default cursor in all browsers (opinionated) // 5. Use a 4-space tab width in all browsers (opinionated) // 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS html { -webkit-text-size-adjust: 100%; // 2 -webkit-tap-highlight-color: rgba(0,0,0,0); // 3 -moz-tab-size: 4; // 5 -ms-text-size-adjust: 100%; // 6 -webkit-text-size-adjust: 100%; // 6 background-color: var(--background-color); color: var(--color); font-family: var(--font-family); font-size: var(--font-size); font-weight: var(--font-weight); line-height: var(--line-height); // 1 text-rendering: optimizeLegibility; cursor: default; // 4 }