UNPKG

2.16 kBCSSView Raw
1/*
2
3 TYPOGRAPHY
4 http://tachyons.io/docs/typography/measure/
5
6 Media Query Extensions:
7 -ns = not-small
8 -m = medium
9 -l = large
10
11*/
12
13
14
15/* Measure is limited to ~66 characters */
16.measure {
17 max-width: var(--measure);
18}
19
20/* Measure is limited to ~80 characters */
21.measure-wide {
22 max-width: var(--measure-wide);
23}
24
25/* Measure is limited to ~45 characters */
26.measure-narrow {
27 max-width: var(--measure-narrow);
28}
29
30/* Book paragraph style - paragraphs are indented with no vertical spacing. */
31.indent {
32 text-indent: 1em;
33 margin-top: 0;
34 margin-bottom: 0;
35}
36
37.small-caps {
38 font-variant: small-caps;
39}
40
41/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
42
43.truncate {
44 white-space: nowrap;
45 overflow: hidden;
46 text-overflow: ellipsis;
47}
48
49@media (--breakpoint-not-small) {
50 .measure-ns {
51 max-width: var(--measure);
52 }
53 .measure-wide-ns {
54 max-width: var(--measure-wide);
55 }
56 .measure-narrow-ns {
57 max-width: var(--measure-narrow);
58 }
59 .indent-ns {
60 text-indent: 1em;
61 margin-top: 0;
62 margin-bottom: 0;
63 }
64 .small-caps-ns {
65 font-variant: small-caps;
66 }
67 .truncate-ns {
68 white-space: nowrap;
69 overflow: hidden;
70 text-overflow: ellipsis;
71 }
72}
73
74@media (--breakpoint-medium) {
75 .measure-m {
76 max-width: var(--measure);
77 }
78 .measure-wide-m {
79 max-width: var(--measure-wide);
80 }
81 .measure-narrow-m {
82 max-width: var(--measure-narrow);
83 }
84 .indent-m {
85 text-indent: 1em;
86 margin-top: 0;
87 margin-bottom: 0;
88 }
89 .small-caps-m {
90 font-variant: small-caps;
91 }
92 .truncate-m {
93 white-space: nowrap;
94 overflow: hidden;
95 text-overflow: ellipsis;
96 }
97}
98
99@media (--breakpoint-large) {
100 .measure-l {
101 max-width: var(--measure);
102 }
103 .measure-wide-l {
104 max-width: var(--measure-wide);
105 }
106 .measure-narrow-l {
107 max-width: var(--measure-narrow);
108 }
109 .indent-l {
110 text-indent: 1em;
111 margin-top: 0;
112 margin-bottom: 0;
113 }
114 .small-caps-l {
115 font-variant: small-caps;
116 }
117 .truncate-l {
118 white-space: nowrap;
119 overflow: hidden;
120 text-overflow: ellipsis;
121 }
122}