1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
:root {
// Spacings
--s1: .5rem;
--s2: 1rem;
--rc: .5rem; //radius corners
// Borders
--br: 0.25rem; //border radius
--bw: 0.0625rem; //border width
--ow: 0.1875rem; //outline width
// Responsives spacings
@if $enable-responsive-spacings {
// Sectionning
body > header,
body > main,
body > footer,
section {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--s1: .5rem;
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--s1: .6rem;
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--s1: .7rem;
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--s1: .8rem;
}
}
}
}
}
// Document: Content-box & Responsive typography
// 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. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
// 4. Change the default tap highlight to be completely transparent in iOS
// 5. Use the default cursor in all browsers (opinionated)
// 6. Use a 4-space tab width in all browsers (opinionated)
html {
text-rendering: optimizeLegibility;
background-color: var(--c1);
color: var(--f1);
font-family: var(--ff);
font-weight: var(--fw);
font-size: var(--fs);
line-height: var(--lh); // 1
// -ms-text-size-adjust: 100%; // 2
// -webkit-text-size-adjust: 100%; // 3
// -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
// cursor: default; // 5
// tab-size: 4; // 6
}
|
