2022-10-23 10:47:50 +07:00
|
|
|
|
@use "sass:map";
|
2022-10-22 13:11:51 +07:00
|
|
|
|
@use "../settings" as *;
|
|
|
|
|
|
2022-10-23 10:47:50 +07:00
|
|
|
|
@if map.get($modules, "layout/document") {
|
|
|
|
|
/**
|
|
|
|
|
* Document
|
|
|
|
|
* Content-box & Responsive typography
|
|
|
|
|
*/
|
2019-11-27 15:31:49 +07:00
|
|
|
|
|
2022-10-23 10:47:50 +07:00
|
|
|
|
// Reboot based on :
|
|
|
|
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
|
|
|
|
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
|
|
|
|
// ––––––––––––––––––––
|
2019-11-27 15:31:49 +07:00
|
|
|
|
|
2022-10-23 10:47:50 +07:00
|
|
|
|
// 1. Add border box sizing in all browsers (opinionated)
|
|
|
|
|
// 2. Backgrounds do not repeat by default (opinionated)
|
|
|
|
|
*,
|
|
|
|
|
*::before,
|
|
|
|
|
*::after {
|
|
|
|
|
box-sizing: border-box; // 1
|
|
|
|
|
background-repeat: no-repeat; // 2
|
|
|
|
|
}
|
2019-11-27 15:31:49 +07:00
|
|
|
|
|
2022-10-23 10:47:50 +07:00
|
|
|
|
// 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
|
|
|
|
|
}
|
2020-09-11 23:22:50 +07:00
|
|
|
|
|
2022-10-23 10:47:50 +07:00
|
|
|
|
// 1. Use the default cursor in all browsers (opinionated)
|
|
|
|
|
// 2. Change the line height in all browsers (opinionated)
|
|
|
|
|
// 3. Breaks words to prevent overflow in all browsers (opinionated)
|
|
|
|
|
// 4. Use a 4-space tab width in all browsers (opinionated)
|
|
|
|
|
// 5. Remove the grey highlight on links in iOS (opinionated)
|
|
|
|
|
// 6. Prevent adjustments of font size after orientation changes in iOS
|
|
|
|
|
:where(:root) {
|
|
|
|
|
-webkit-tap-highlight-color: transparent; // 5
|
|
|
|
|
-webkit-text-size-adjust: 100%; // 6
|
|
|
|
|
text-size-adjust: 100%; // 6
|
2023-12-28 13:21:52 +07:00
|
|
|
|
background-color: var(#{$css-var-prefix}background-color);
|
|
|
|
|
color: var(#{$css-var-prefix}color);
|
|
|
|
|
font-weight: var(#{$css-var-prefix}font-weight);
|
|
|
|
|
font-size: var(#{$css-var-prefix}font-size);
|
|
|
|
|
line-height: var(#{$css-var-prefix}line-height); // 2
|
|
|
|
|
font-family: var(#{$css-var-prefix}font-family);
|
|
|
|
|
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
|
2022-10-23 10:47:50 +07:00
|
|
|
|
text-rendering: optimizeLegibility;
|
|
|
|
|
overflow-wrap: break-word; // 3
|
|
|
|
|
cursor: default; // 1
|
|
|
|
|
tab-size: 4; // 4
|
|
|
|
|
}
|
2022-10-15 23:22:12 +07:00
|
|
|
|
}
|