UNPKG

2.4 kBCSSView Raw
1/*
2
3 TYPE SCALE
4 Docs: http://tachyons.io/docs/typography/scale/
5
6 Base:
7 f = font-size
8
9 Modifiers
10 1 = 1st step in size scale
11 2 = 2nd step in size scale
12 3 = 3rd step in size scale
13 4 = 4th step in size scale
14 5 = 5th step in size scale
15 6 = 6th step in size scale
16
17 Media Query Extensions:
18 -ns = not-small
19 -m = medium
20 -l = large
21*/
22
23/*
24 * For Hero/Marketing Titles
25 *
26 * These generally are too large for mobile
27 * so be careful using them on smaller screens.
28 * */
29
30.f-6,
31.f-headline {
32 font-size: var(--font-size-headline);
33}
34.f-5,
35.f-subheadline {
36 font-size: var(--font-size-subheadline);
37}
38
39
40/* Type Scale */
41
42
43.f1 { font-size: var(--font-size-1); }
44.f2 { font-size: var(--font-size-2); }
45.f3 { font-size: var(--font-size-3); }
46.f4 { font-size: var(--font-size-4); }
47.f5 { font-size: var(--font-size-5); }
48.f6 { font-size: var(--font-size-6); }
49.f7 { font-size: var(--font-size-7); }
50
51@media (--breakpoint-not-small){
52 .f-6-ns,
53 .f-headline-ns { font-size: var(--font-size-headline); }
54 .f-5-ns,
55 .f-subheadline-ns { font-size: var(--font-size-subheadline); }
56 .f1-ns { font-size: var(--font-size-1); }
57 .f2-ns { font-size: var(--font-size-2); }
58 .f3-ns { font-size: var(--font-size-3); }
59 .f4-ns { font-size: var(--font-size-4); }
60 .f5-ns { font-size: var(--font-size-5); }
61 .f6-ns { font-size: var(--font-size-6); }
62 .f7-ns { font-size: var(--font-size-7); }
63}
64
65@media (--breakpoint-medium) {
66 .f-6-m,
67 .f-headline-m { font-size: var(--font-size-headline); }
68 .f-5-m,
69 .f-subheadline-m { font-size: var(--font-size-subheadline); }
70 .f1-m { font-size: var(--font-size-1); }
71 .f2-m { font-size: var(--font-size-2); }
72 .f3-m { font-size: var(--font-size-3); }
73 .f4-m { font-size: var(--font-size-4); }
74 .f5-m { font-size: var(--font-size-5); }
75 .f6-m { font-size: var(--font-size-6); }
76 .f7-m { font-size: var(--font-size-7); }
77}
78
79@media (--breakpoint-large) {
80 .f-6-l,
81 .f-headline-l {
82 font-size: var(--font-size-headline);
83 }
84 .f-5-l,
85 .f-subheadline-l {
86 font-size: var(--font-size-subheadline);
87 }
88 .f1-l { font-size: var(--font-size-1); }
89 .f2-l { font-size: var(--font-size-2); }
90 .f3-l { font-size: var(--font-size-3); }
91 .f4-l { font-size: var(--font-size-4); }
92 .f5-l { font-size: var(--font-size-5); }
93 .f6-l { font-size: var(--font-size-6); }
94 .f7-l { font-size: var(--font-size-7); }
95}