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
79
80
81
82
83
84
85
86
87
88
89
90
|
:root {
// Typography
--ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
--fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
--lh: 1.5; //line-height
--lhh: 1.2; //line-height headers
--fs: 1rem; //font-size
--fw: 400; //font-weight
--fh: 700; //font-weight h1-h6
// Colors
--f1: #555; //font color 1 bbb ccc
--f2: #333; //font color 2 fff eee
--c1: #fff; //color 1 111
--c2: #eee; //color 2 222
--c3: #ddd; //color 3 333
--c4: #777; //color 4 888
--a1: #f90; //accent color 1 link
--a2: #fb0; //accent color 2 hover,focus
--a3: #fb0; //accent color 3 h1-h2 hover,focus
--cg: #483; //ins green
--cr: #d33; //del red
// 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
// Responsive typography
@if $enable-responsive-typography {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--fs: 1rem;
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--fs: 1.04rem;
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--fs: 1.08rem;
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--fs: 1.12rem;
}
}
}
}
// 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;
}
}
}
}
|
