type-director 0.8 → 0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,37 +10,37 @@ $text-color-tertiary: rgba(#000000, 0.35);
10
10
  $normal-margin: 12px;
11
11
 
12
12
  body {
13
- @include td-set-responsive-font-size($font-copy, 0);
14
- font-weight: $font-copy-weight;
13
+ @include td-responsive-type-size($typeface-default, 0);
14
+ font-weight: normal;
15
15
  color: $text-color-primary;
16
16
  }
17
17
 
18
18
  .h1, .h2, .h3, .h4, .h5, .h6 {
19
- font-weight: $font-heading-weight;
19
+ font-weight: bold;
20
20
  }
21
21
 
22
22
  .h1 {
23
- @include td-set-responsive-font-size($font-heading, 4);
23
+ @include td-responsive-type-size($typeface-alternate, 4);
24
24
  }
25
-
25
+
26
26
  .h2 {
27
- @include td-set-responsive-font-size($font-heading, 3);
27
+ @include td-responsive-type-size($typeface-alternate, 3);
28
28
  }
29
29
 
30
30
  .h3 {
31
- @include td-set-responsive-font-size($font-heading, 2);
31
+ @include td-responsive-type-size($typeface-alternate, 2);
32
32
  }
33
33
 
34
34
  .h4 {
35
- @include td-set-responsive-font-size($font-heading, 1);
35
+ @include td-responsive-type-size($typeface-alternate, 1);
36
36
  }
37
37
 
38
38
  .h5 {
39
- @include td-set-responsive-font-size($font-heading, 0);
39
+ @include td-responsive-type-size($typeface-alternate, 0);
40
40
  }
41
41
 
42
42
  .h6 {
43
- @include td-set-responsive-font-size($font-heading, -1);
43
+ @include td-responsive-type-size($typeface-alternate, -1);
44
44
  }
45
45
 
46
46
  .h1, .h2, .h3, .h4, .h5, .h6, p, ul, ol, li, small {
@@ -49,7 +49,7 @@ body {
49
49
  }
50
50
 
51
51
  .lead {
52
- @include td-set-responsive-font-size($font-copy, 1);
52
+ @include td-responsive-type-size($typeface-default, 1);
53
53
  }
54
54
 
55
55
  p {
@@ -58,7 +58,7 @@ p {
58
58
  }
59
59
 
60
60
  small, .footnote {
61
- @include td-set-responsive-font-size($font-copy, -1);
61
+ @include td-responsive-type-size($typeface-default, -1);
62
62
  }
63
63
 
64
64
  a {
@@ -75,7 +75,6 @@ a:active {
75
75
  color: red;
76
76
  }
77
77
 
78
-
79
78
  em {
80
79
  font-style: italic;
81
80
  }
@@ -57,7 +57,7 @@ nav {
57
57
  }
58
58
 
59
59
  .font-comparison th {
60
- @include td-set-responsive-font-size($font-heading, 0);
60
+ @include td-responsive-type-size($typeface-alternate, 0);
61
61
  @extend .text-secondary;
62
62
  border-bottom: 1px solid #ededed;
63
63
  }
@@ -117,46 +117,89 @@ nav {
117
117
  }
118
118
 
119
119
  .metrics {
120
- @include td-set-responsive-font-size($font-heading, 0);
120
+ @include td-responsive-type-size($typeface-alternate, 0);
121
121
  }
122
122
 
123
+ // Default font
123
124
 
124
- // Copy
125
+ .typeface-default-larger4 {
126
+ @include td-responsive-type-size($typeface-default, 4);
127
+ }
125
128
 
126
- .copy-larger4 {
127
- @include td-set-responsive-font-size($font-copy, 4);
129
+ .typeface-default-larger3 {
130
+ @include td-responsive-type-size($typeface-default, 3);
128
131
  }
129
-
130
- .copy-larger3 {
131
- @include td-set-responsive-font-size($font-copy, 3);
132
- }
133
132
 
134
- .copy-larger2 {
135
- @include td-set-responsive-font-size($font-copy, 2);
136
- }
133
+ .typeface-default-larger2 {
134
+ @include td-responsive-type-size($typeface-default, 2);
135
+ }
137
136
 
138
- // Icons
137
+ .typeface-default-larger1 {
138
+ @include td-responsive-type-size($typeface-default, 1);
139
+ }
139
140
 
140
- .icon-larger4 {
141
- @include td-set-responsive-font-size($font-icon, 4);
141
+ .typeface-default-base {
142
+ @include td-responsive-type-size($typeface-default, 0);
142
143
  }
143
-
144
- .icon-larger3 {
145
- @include td-set-responsive-font-size($font-icon, 3);
146
- }
147
144
 
148
- .icon-larger2 {
149
- @include td-set-responsive-font-size($font-icon, 2);
150
- }
145
+ .typeface-default-smaller1 {
146
+ @include td-responsive-type-size($typeface-default, -1);
147
+ }
151
148
 
152
- .icon-larger1 {
153
- @include td-set-responsive-font-size($font-icon, 1);
149
+ // Alternate font
150
+
151
+ .typeface-alt-larger4 {
152
+ @include td-responsive-type-size($typeface-alternate, 4);
153
+ font-weight: bold;
154
+ }
155
+
156
+ .typeface-alt-larger3 {
157
+ @include td-responsive-type-size($typeface-alternate, 3);
158
+ font-weight: bold;
159
+ }
160
+
161
+ .typeface-alt-larger2 {
162
+ @include td-responsive-type-size($typeface-alternate, 2);
163
+ font-weight: bold;
164
+ }
165
+
166
+ .typeface-alt-larger1 {
167
+ @include td-responsive-type-size($typeface-alternate, 1);
168
+ font-weight: bold;
169
+ }
170
+
171
+ .typeface-alt-base {
172
+ @include td-responsive-type-size($typeface-alternate, 0);
173
+ font-weight: bold;
174
+ }
175
+
176
+ .typeface-alt-smaller1 {
177
+ @include td-responsive-type-size($typeface-alternate, -1);
178
+ font-weight: bold;
179
+ }
180
+
181
+ // Alternate font
182
+
183
+ .typeface-icon-larger4 {
184
+ @include td-responsive-type-size($typeface-icon, 4);
185
+ }
186
+
187
+ .typeface-icon-larger3 {
188
+ @include td-responsive-type-size($typeface-icon, 3);
189
+ }
190
+
191
+ .typeface-icon-larger2 {
192
+ @include td-responsive-type-size($typeface-icon, 2);
193
+ }
194
+
195
+ .typeface-icon-larger1 {
196
+ @include td-responsive-type-size($typeface-icon, 1);
197
+ }
198
+
199
+ .typeface-icon-base {
200
+ @include td-responsive-type-size($typeface-icon, 0);
154
201
  }
155
-
156
- .icon-base {
157
- @include td-set-responsive-font-size($font-icon, 0);
158
- }
159
202
 
160
- .icon-smaller {
161
- @include td-set-responsive-font-size($font-copy, -1);
162
- }
203
+ .typeface-icon-smaller1 {
204
+ @include td-responsive-type-size($typeface-icon, -1);
205
+ }
@@ -1,4 +1,4 @@
1
- /* line 5, ../../../../../.gem/ruby/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
1
+ /* line 5, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
2
2
  html, body, div, span, applet, object, iframe,
3
3
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4
4
  a, abbr, acronym, address, big, cite, code,
@@ -20,45 +20,45 @@ time, mark, audio, video {
20
20
  vertical-align: baseline;
21
21
  }
22
22
 
23
- /* line 22, ../../../../../.gem/ruby/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
23
+ /* line 22, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
24
24
  html {
25
25
  line-height: 1;
26
26
  }
27
27
 
28
- /* line 24, ../../../../../.gem/ruby/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
28
+ /* line 24, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
29
29
  ol, ul {
30
30
  list-style: none;
31
31
  }
32
32
 
33
- /* line 26, ../../../../../.gem/ruby/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
33
+ /* line 26, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
34
34
  table {
35
35
  border-collapse: collapse;
36
36
  border-spacing: 0;
37
37
  }
38
38
 
39
- /* line 28, ../../../../../.gem/ruby/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
39
+ /* line 28, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
40
40
  caption, th, td {
41
41
  text-align: left;
42
42
  font-weight: normal;
43
43
  vertical-align: middle;
44
44
  }
45
45
 
46
- /* line 30, ../../../../../.gem/ruby/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
46
+ /* line 30, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
47
47
  q, blockquote {
48
48
  quotes: none;
49
49
  }
50
- /* line 103, ../../../../../.gem/ruby/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
50
+ /* line 103, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
51
51
  q:before, q:after, blockquote:before, blockquote:after {
52
52
  content: "";
53
53
  content: none;
54
54
  }
55
55
 
56
- /* line 32, ../../../../../.gem/ruby/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
56
+ /* line 32, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
57
57
  a img {
58
58
  border: none;
59
59
  }
60
60
 
61
- /* line 116, ../../../../../.gem/ruby/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
61
+ /* line 116, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
62
62
  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
63
63
  display: block;
64
64
  }
@@ -67,13 +67,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
67
67
  * MIXINS
68
68
  ******************************************************/
69
69
  /******************************************************
70
- * FONTS
71
- ******************************************************/
72
- /******************************************************
73
- * FONT ROLES
70
+ * TYPOGRAPHY CONFIG
74
71
  ******************************************************/
75
72
  /******************************************************
76
- * TYPOGRAPHY CONFIG
73
+ * TYPEFACE ROLES
77
74
  ******************************************************/
78
75
  /******************************************************
79
76
  * Typography
@@ -240,12 +237,12 @@ a:active {
240
237
  color: red;
241
238
  }
242
239
 
243
- /* line 79, ../sass/_typography.scss */
240
+ /* line 78, ../sass/_typography.scss */
244
241
  em {
245
242
  font-style: italic;
246
243
  }
247
244
 
248
- /* line 83, ../sass/_typography.scss */
245
+ /* line 82, ../sass/_typography.scss */
249
246
  .text-secondary, .font-comparison th {
250
247
  color: rgba(0, 0, 0, 0.5);
251
248
  }
@@ -1113,127 +1110,259 @@ nav a {
1113
1110
  }
1114
1111
  }
1115
1112
 
1116
- /* line 126, ../sass/main.scss */
1117
- .copy-larger4 {
1113
+ /* line 125, ../sass/main.scss */
1114
+ .typeface-default-larger4 {
1118
1115
  font-family: Georgia, serif;
1119
- font-size: 28.0px;
1116
+ font-size: 28px;
1120
1117
  line-height: 1.35;
1121
1118
  }
1122
1119
  @media screen and (min-width: 768px) {
1123
- /* line 126, ../sass/main.scss */
1124
- .copy-larger4 {
1120
+ /* line 125, ../sass/main.scss */
1121
+ .typeface-default-larger4 {
1125
1122
  font-size: 42px;
1126
1123
  line-height: 1.25;
1127
1124
  }
1128
1125
  }
1129
1126
 
1130
- /* line 130, ../sass/main.scss */
1131
- .copy-larger3 {
1127
+ /* line 129, ../sass/main.scss */
1128
+ .typeface-default-larger3 {
1132
1129
  font-family: Georgia, serif;
1133
1130
  font-size: 24.34437px;
1134
1131
  line-height: 1.38603;
1135
1132
  }
1136
1133
  @media screen and (min-width: 768px) {
1137
- /* line 130, ../sass/main.scss */
1138
- .copy-larger3 {
1134
+ /* line 129, ../sass/main.scss */
1135
+ .typeface-default-larger3 {
1139
1136
  font-size: 33.98248px;
1140
1137
  line-height: 1.32957;
1141
1138
  }
1142
1139
  }
1143
1140
 
1144
- /* line 134, ../sass/main.scss */
1145
- .copy-larger2 {
1141
+ /* line 133, ../sass/main.scss */
1142
+ .typeface-default-larger2 {
1146
1143
  font-family: Georgia, serif;
1147
1144
  font-size: 21.16601px;
1148
1145
  line-height: 1.42302;
1149
1146
  }
1150
1147
  @media screen and (min-width: 768px) {
1151
- /* line 134, ../sass/main.scss */
1152
- .copy-larger2 {
1148
+ /* line 133, ../sass/main.scss */
1149
+ .typeface-default-larger2 {
1153
1150
  font-size: 27.49545px;
1154
1151
  line-height: 1.41421;
1155
1152
  }
1156
1153
  }
1157
1154
 
1158
- /* line 140, ../sass/main.scss */
1159
- .icon-larger4 {
1160
- font-family: 'Feather';
1161
- font-size: 26.6px;
1162
- line-height: 1.42105;
1155
+ /* line 137, ../sass/main.scss */
1156
+ .typeface-default-larger1 {
1157
+ font-family: Georgia, serif;
1158
+ font-size: 18.40261px;
1159
+ line-height: 1.46101;
1163
1160
  }
1164
1161
  @media screen and (min-width: 768px) {
1165
- /* line 140, ../sass/main.scss */
1166
- .icon-larger4 {
1167
- font-size: 39.9px;
1168
- line-height: 1.31579;
1162
+ /* line 137, ../sass/main.scss */
1163
+ .typeface-default-larger1 {
1164
+ font-size: 22.24676px;
1165
+ line-height: 1.50424;
1169
1166
  }
1170
1167
  }
1171
1168
 
1172
- /* line 144, ../sass/main.scss */
1173
- .icon-larger3 {
1174
- font-family: 'Feather';
1175
- font-size: 23.12715px;
1176
- line-height: 1.45898;
1169
+ /* line 141, ../sass/main.scss */
1170
+ .typeface-default-base {
1171
+ font-family: Georgia, serif;
1172
+ font-size: 16px;
1173
+ line-height: 1.5;
1177
1174
  }
1178
1175
  @media screen and (min-width: 768px) {
1179
- /* line 144, ../sass/main.scss */
1180
- .icon-larger3 {
1181
- font-size: 32.28336px;
1182
- line-height: 1.39955;
1176
+ /* line 141, ../sass/main.scss */
1177
+ .typeface-default-base {
1178
+ font-size: 18px;
1179
+ line-height: 1.6;
1183
1180
  }
1184
1181
  }
1185
1182
 
1186
- /* line 148, ../sass/main.scss */
1187
- .icon-larger2 {
1188
- font-family: 'Feather';
1189
- font-size: 20.10771px;
1190
- line-height: 1.49792;
1183
+ /* line 145, ../sass/main.scss */
1184
+ .typeface-default-smaller1 {
1185
+ font-family: Georgia, serif;
1186
+ font-size: 13.91107px;
1187
+ line-height: 1.54004;
1191
1188
  }
1192
1189
  @media screen and (min-width: 768px) {
1193
- /* line 148, ../sass/main.scss */
1194
- .icon-larger2 {
1195
- font-size: 26.12068px;
1196
- line-height: 1.48865;
1190
+ /* line 145, ../sass/main.scss */
1191
+ .typeface-default-smaller1 {
1192
+ font-size: 14.56392px;
1193
+ line-height: 1.70185;
1197
1194
  }
1198
1195
  }
1199
1196
 
1200
- /* line 152, ../sass/main.scss */
1201
- .icon-larger1 {
1202
- font-family: 'Feather';
1203
- font-size: 17.48248px;
1204
- line-height: 1.5379;
1197
+ /* line 151, ../sass/main.scss */
1198
+ .typeface-alt-larger4 {
1199
+ font-family: Verdana, sans-serif;
1200
+ font-size: 24.92px;
1201
+ line-height: 1.42584;
1202
+ font-weight: bold;
1205
1203
  }
1206
1204
  @media screen and (min-width: 768px) {
1207
- /* line 152, ../sass/main.scss */
1208
- .icon-larger1 {
1209
- font-size: 21.13442px;
1210
- line-height: 1.58341;
1205
+ /* line 151, ../sass/main.scss */
1206
+ .typeface-alt-larger4 {
1207
+ font-size: 37.38px;
1208
+ line-height: 1.32022;
1211
1209
  }
1212
1210
  }
1213
1211
 
1214
1212
  /* line 156, ../sass/main.scss */
1215
- .icon-base {
1216
- font-family: 'Feather';
1217
- font-size: 15.2px;
1218
- line-height: 1.57895;
1213
+ .typeface-alt-larger3 {
1214
+ font-family: Verdana, sans-serif;
1215
+ font-size: 21.66649px;
1216
+ line-height: 1.4639;
1217
+ font-weight: bold;
1219
1218
  }
1220
1219
  @media screen and (min-width: 768px) {
1221
1220
  /* line 156, ../sass/main.scss */
1222
- .icon-base {
1223
- font-size: 17.1px;
1224
- line-height: 1.68421;
1221
+ .typeface-alt-larger3 {
1222
+ font-size: 30.24441px;
1223
+ line-height: 1.40427;
1225
1224
  }
1226
1225
  }
1227
1226
 
1228
- /* line 160, ../sass/main.scss */
1229
- .icon-smaller {
1230
- font-family: Georgia, serif;
1227
+ /* line 161, ../sass/main.scss */
1228
+ .typeface-alt-larger2 {
1229
+ font-family: Verdana, sans-serif;
1230
+ font-size: 18.83775px;
1231
+ line-height: 1.50297;
1232
+ font-weight: bold;
1233
+ }
1234
+ @media screen and (min-width: 768px) {
1235
+ /* line 161, ../sass/main.scss */
1236
+ .typeface-alt-larger2 {
1237
+ font-size: 24.47095px;
1238
+ line-height: 1.49366;
1239
+ }
1240
+ }
1241
+
1242
+ /* line 166, ../sass/main.scss */
1243
+ .typeface-alt-larger1 {
1244
+ font-family: Verdana, sans-serif;
1245
+ font-size: 16.37833px;
1246
+ line-height: 1.54308;
1247
+ font-weight: bold;
1248
+ }
1249
+ @media screen and (min-width: 768px) {
1250
+ /* line 166, ../sass/main.scss */
1251
+ .typeface-alt-larger1 {
1252
+ font-size: 19.79961px;
1253
+ line-height: 1.58875;
1254
+ }
1255
+ }
1256
+
1257
+ /* line 171, ../sass/main.scss */
1258
+ .typeface-alt-base {
1259
+ font-family: Verdana, sans-serif;
1260
+ font-size: 14.24px;
1261
+ line-height: 1.58427;
1262
+ font-weight: bold;
1263
+ }
1264
+ @media screen and (min-width: 768px) {
1265
+ /* line 171, ../sass/main.scss */
1266
+ .typeface-alt-base {
1267
+ font-size: 16.02px;
1268
+ line-height: 1.68989;
1269
+ }
1270
+ }
1271
+
1272
+ /* line 176, ../sass/main.scss */
1273
+ .typeface-alt-smaller1 {
1274
+ font-family: Verdana, sans-serif;
1275
+ font-size: 12.38085px;
1276
+ line-height: 1.62655;
1277
+ font-weight: bold;
1278
+ }
1279
+ @media screen and (min-width: 768px) {
1280
+ /* line 176, ../sass/main.scss */
1281
+ .typeface-alt-smaller1 {
1282
+ font-size: 12.96189px;
1283
+ line-height: 1.79746;
1284
+ }
1285
+ }
1286
+
1287
+ /* line 183, ../sass/main.scss */
1288
+ .typeface-icon-larger4 {
1289
+ font-family: "Feather";
1290
+ font-size: 28px;
1291
+ line-height: 1.35;
1292
+ }
1293
+ @media screen and (min-width: 768px) {
1294
+ /* line 183, ../sass/main.scss */
1295
+ .typeface-icon-larger4 {
1296
+ font-size: 42px;
1297
+ line-height: 1.25;
1298
+ }
1299
+ }
1300
+
1301
+ /* line 187, ../sass/main.scss */
1302
+ .typeface-icon-larger3 {
1303
+ font-family: "Feather";
1304
+ font-size: 24.34437px;
1305
+ line-height: 1.38603;
1306
+ }
1307
+ @media screen and (min-width: 768px) {
1308
+ /* line 187, ../sass/main.scss */
1309
+ .typeface-icon-larger3 {
1310
+ font-size: 33.98248px;
1311
+ line-height: 1.32957;
1312
+ }
1313
+ }
1314
+
1315
+ /* line 191, ../sass/main.scss */
1316
+ .typeface-icon-larger2 {
1317
+ font-family: "Feather";
1318
+ font-size: 21.16601px;
1319
+ line-height: 1.42302;
1320
+ }
1321
+ @media screen and (min-width: 768px) {
1322
+ /* line 191, ../sass/main.scss */
1323
+ .typeface-icon-larger2 {
1324
+ font-size: 27.49545px;
1325
+ line-height: 1.41421;
1326
+ }
1327
+ }
1328
+
1329
+ /* line 195, ../sass/main.scss */
1330
+ .typeface-icon-larger1 {
1331
+ font-family: "Feather";
1332
+ font-size: 18.40261px;
1333
+ line-height: 1.46101;
1334
+ }
1335
+ @media screen and (min-width: 768px) {
1336
+ /* line 195, ../sass/main.scss */
1337
+ .typeface-icon-larger1 {
1338
+ font-size: 22.24676px;
1339
+ line-height: 1.50424;
1340
+ }
1341
+ }
1342
+
1343
+ /* line 199, ../sass/main.scss */
1344
+ .typeface-icon-base {
1345
+ font-family: "Feather";
1346
+ font-size: 16px;
1347
+ line-height: 1.5;
1348
+ }
1349
+ @media screen and (min-width: 768px) {
1350
+ /* line 199, ../sass/main.scss */
1351
+ .typeface-icon-base {
1352
+ font-size: 18px;
1353
+ line-height: 1.6;
1354
+ }
1355
+ }
1356
+
1357
+ /* line 203, ../sass/main.scss */
1358
+ .typeface-icon-smaller1 {
1359
+ font-family: "Feather";
1231
1360
  font-size: 13.91107px;
1232
1361
  line-height: 1.54004;
1233
1362
  }
1234
1363
  @media screen and (min-width: 768px) {
1235
- /* line 160, ../sass/main.scss */
1236
- .icon-smaller {
1364
+ /* line 203, ../sass/main.scss */
1365
+ .typeface-icon-smaller1 {
1237
1366
  font-size: 14.56392px;
1238
1367
  line-height: 1.70185;
1239
1368
  }