/
index.css
170 lines (153 loc) · 6.51 KB
/
index.css
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
:where(html) {
--font-sans: "Helvetica Now", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"SF Pro Icons", "Helvetica Neue", Helvetica, Rubik, Inter, "Open Sans", Roboto, "Segoe UI", Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: Merriweather, ui-serif, Cambria, "Noto Serif", Georgia, "Times New Roman", Times, serif;
--font-display: Inter, "Helvetica Now", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display",
"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Rubik, "Open Sans", Roboto, "Segoe UI", Arial,
sans-serif;
--font-mono: "Dank Mono", "Operator Mono", Inconsolata, "Fira Mono", ui-monospace, "SF Mono", Menlo, Monaco,
"Droid Sans Mono", "Source Code Pro", monospace;
/*
I am using `px` instead of `rem` for any kind of sizes.
When talking about font-size, it is the best practice to use
`rem` so that an end user can change the font-size using the
browser's font-size setting.
However, when talking about spacing, it is the best practice to
use `px` because using `rems` here makes font-size behave like zoom.
Users that prefer larger text, don't necessarily want larger spacing as well.
*/
--radius-default: 2px;
--radius-1: 2px;
--radius-2: 4px;
--radius-3: 8px;
--radius-4: 16px;
--radius-5: 24px;
--border-2: 2px;
--border-4: 4px;
--border-8: 8px;
--shadow-inner-1: inset rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px,
rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
--shadow-none: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px,
rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
--shadow-1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
--shadow-2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
--shadow-3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
--shadow-4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
--shadow-5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px,
rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;
--shadow-default: var(--shadow-1);
--drop-shadow-1: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
--drop-shadow-2: 0 1px 1px rgb(0 0 0 / 0.05);
--drop-shadow-3: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06);
--drop-shadow-4: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1);
--drop-shadow-5: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
--drop-shadow-6: 0 25px 25px rgb(0 0 0 / 0.15);
--drop-shadow-default: var(--drop-shadow-1);
/*
A variety of concepts can serve as the foundation for a type scale.
I like the idea of Major 2nd Music Scale (1.125) as a base for the type scale,
wherein each increment is roughly 12.5% greater than the preceding one.
*/
--font-size-0: 0.6875rem; /* 11px */
--font-size-1: 0.75rem; /* 12px */
--font-size-2: 0.875rem; /* 14px */
--font-size-3: 1rem; /* 16px */
--font-size-4: 1.125rem; /* 18px */
--font-size-5: 1.25rem; /* 20px */
--font-size-6: 1.375rem; /* 22px */
--font-size-7: 1.5rem; /* 24px */
--font-size-8: 1.75rem; /* 28px */
--font-size-9: 2rem; /* 32px */
--font-size-10: 2.25rem; /* 36px */
--font-size-11: 2.5rem; /* 40px */
--font-size-12: 2.875rem; /* 46px */
--font-size-13: 3.125rem; /* 50px */
--font-size-14: 3.5rem; /* 56px */
--font-size-15: 4rem; /* 64px */
--font-size-16: 4.4375rem; /* 71px */
--font-size-17: 5rem; /* 80px */
--font-size-short-0: 0.6875rem; /* 11px */
--font-size-short-1: 0.75rem; /* 12px */
--font-size-short-2: 0.875rem; /* 14px */
--font-size-short-3: 1rem; /* 16px */
--font-size-short-4: 1.125rem; /* 18px */
--font-size-short-5: 1.25rem; /* 20px */
--font-size-short-6: 1.375rem; /* 22px */
--font-size-short-7: 1.5rem; /* 24px */
--font-size-short-8: 1.75rem; /* 28px */
--font-size-short-9: 2rem; /* 32px */
--font-size-short-10: 2.25rem; /* 36px */
--font-size-short-11: 2.5rem; /* 40px */
--font-size-short-12: 2.875rem; /* 46px */
--font-size-short-13: 3.125rem; /* 50px */
--font-size-short-14: 3.5rem; /* 56px */
--font-size-short-15: 4rem; /* 64px */
--font-size-short-16: 4.4375rem; /* 71px */
--font-size-short-17: 5rem; /* 80px */
--font-size-fluid-1: clamp(0.75rem, 1.5vw, 1rem);
--font-size-fluid-2: clamp(1rem, 2vw, 1.5rem);
--font-size-fluid-3: clamp(1.5rem, 3vw, 2.5rem);
--font-size-fluid-4: clamp(2rem, 4vw, 3.5rem);
/*
Short text (typically headings and labels) uses a line height of 1.3 to 1.5 relative to the font size.
While Long text (typically body) use a line height of 1.4 to 1.7 relative to the font size, adjusting so that
the equivalent px value is rounded to the nearest even number.
*/
--line-height-none: 1;
--line-height-inherit: inherit;
--line-height-normal: normal;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
--line-height-1: 1.5;
--line-height-2: 1.571;
--line-height-3: 1.625;
--line-height-4: 1.555;
--line-height-5: 1.6;
--line-height-6: 1.545;
--line-height-7: 1.67;
--line-height-8: 1.57;
--line-height-9: 1.5;
--line-height-10: 1.5;
--line-height-11: 1.5;
--line-height-12: 1.46;
--line-height-13: 1.52;
--line-height-14: 1.5;
--line-height-15: 1.5;
--line-height-16: 1.5;
--line-height-17: 1.5;
--line-height-short-1: 1.5;
--line-height-short-2: 1.571;
--line-height-short-3: 1.5;
--line-height-short-4: 1.444;
--line-height-short-5: 1.4;
--line-height-short-6: 1.364;
--line-height-short-7: 1.45;
--line-height-short-8: 1.357;
--line-height-short-9: 1.375;
--line-height-short-10: 1.333;
--line-height-short-11: 1.3;
--line-height-short-12: 1.3;
--line-height-short-13: 1.32;
--line-height-short-14: 1.357;
--line-height-short-15: 1.3;
--line-height-short-16: 1.28;
--line-height-short-17: 1.1;
/*
Each typeface requires its own letter spacing configuration.
It is hard to predict what values would be the best, so feel free to override them.
*/
--letter-spacing-1: -0.06em;
--letter-spacing-2: -0.03em;
--letter-spacing-3: 0em;
--letter-spacing-4: 0.03em;
--letter-spacing-5: 0.06em;
--letter-spacing-6: 0.1em;
}