-
Notifications
You must be signed in to change notification settings - Fork 677
/
_type-scale.css
95 lines (83 loc) · 1.94 KB
/
_type-scale.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
/*
TYPE SCALE
Docs: http://tachyons.io/docs/typography/scale/
Base:
f = font-size
Modifiers
1 = 1st step in size scale
2 = 2nd step in size scale
3 = 3rd step in size scale
4 = 4th step in size scale
5 = 5th step in size scale
6 = 6th step in size scale
7 = 7th step in size scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
* For Hero/Marketing Titles
*
* These generally are too large for mobile
* so be careful using them on smaller screens.
* */
.f-6,
.f-headline {
font-size: 6rem;
}
.f-5,
.f-subheadline {
font-size: 5rem;
}
/* Type Scale */
.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */
@media (--breakpoint-not-small){
.f-6-ns,
.f-headline-ns { font-size: 6rem; }
.f-5-ns,
.f-subheadline-ns { font-size: 5rem; }
.f1-ns { font-size: 3rem; }
.f2-ns { font-size: 2.25rem; }
.f3-ns { font-size: 1.5rem; }
.f4-ns { font-size: 1.25rem; }
.f5-ns { font-size: 1rem; }
.f6-ns { font-size: .875rem; }
.f7-ns { font-size: .75rem; }
}
@media (--breakpoint-medium) {
.f-6-m,
.f-headline-m { font-size: 6rem; }
.f-5-m,
.f-subheadline-m { font-size: 5rem; }
.f1-m { font-size: 3rem; }
.f2-m { font-size: 2.25rem; }
.f3-m { font-size: 1.5rem; }
.f4-m { font-size: 1.25rem; }
.f5-m { font-size: 1rem; }
.f6-m { font-size: .875rem; }
.f7-m { font-size: .75rem; }
}
@media (--breakpoint-large) {
.f-6-l,
.f-headline-l {
font-size: 6rem;
}
.f-5-l,
.f-subheadline-l {
font-size: 5rem;
}
.f1-l { font-size: 3rem; }
.f2-l { font-size: 2.25rem; }
.f3-l { font-size: 1.5rem; }
.f4-l { font-size: 1.25rem; }
.f5-l { font-size: 1rem; }
.f6-l { font-size: .875rem; }
.f7-l { font-size: .75rem; }
}