webfontspecimen 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/LICENSE.txt +9 -0
- data/lib/webfontspecimen.rb +1 -0
- data/stylesheets/_webfontspecimen.scss +5 -0
- data/stylesheets/wfs/_960.scss +405 -0
- data/stylesheets/wfs/_base.scss +317 -0
- data/templates/project/_specimen.scss +82 -0
- data/templates/project/manifest.rb +14 -0
- data/templates/project/specimen.html +272 -0
- metadata +83 -0
data/LICENSE.txt
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
Created by Tim Brown
|
|
2
|
+
http://webfontspecimen.com
|
|
3
|
+
http://nicewebtype.com
|
|
4
|
+
|
|
5
|
+
Compass Plugin by Eric Meyer
|
|
6
|
+
http://www.oddbird.net
|
|
7
|
+
|
|
8
|
+
Feel free to edit and re-release this plugin, wfs.css and the markup that uses it. They are all licensed under a Creative Commons Attribution 3.0 License:
|
|
9
|
+
http://creativecommons.org/licenses/by/3.0/us/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Compass::Frameworks.register("webfontspecimen", :path => "#{File.dirname(__FILE__)}/..")
|
|
@@ -0,0 +1,405 @@
|
|
|
1
|
+
/*
|
|
2
|
+
960 Grid System ~ Core CSS.
|
|
3
|
+
Learn more ~ http://960.gs/
|
|
4
|
+
|
|
5
|
+
Licensed under GPL and MIT.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* `Containers
|
|
9
|
+
----------------------------------------------------------------------------------------------------*/
|
|
10
|
+
|
|
11
|
+
.container_12,
|
|
12
|
+
.container_16 {
|
|
13
|
+
margin-left: auto;
|
|
14
|
+
margin-right: auto;
|
|
15
|
+
width: 960px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* `Grid >> Global
|
|
19
|
+
----------------------------------------------------------------------------------------------------*/
|
|
20
|
+
|
|
21
|
+
.grid_1,
|
|
22
|
+
.grid_2,
|
|
23
|
+
.grid_3,
|
|
24
|
+
.grid_4,
|
|
25
|
+
.grid_5,
|
|
26
|
+
.grid_6,
|
|
27
|
+
.grid_7,
|
|
28
|
+
.grid_8,
|
|
29
|
+
.grid_9,
|
|
30
|
+
.grid_10,
|
|
31
|
+
.grid_11,
|
|
32
|
+
.grid_12,
|
|
33
|
+
.grid_13,
|
|
34
|
+
.grid_14,
|
|
35
|
+
.grid_15,
|
|
36
|
+
.grid_16 {
|
|
37
|
+
display: inline;
|
|
38
|
+
float: left;
|
|
39
|
+
margin-left: 10px;
|
|
40
|
+
margin-right: 10px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.container_12 .grid_3,
|
|
44
|
+
.container_16 .grid_4 {
|
|
45
|
+
width: 220px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.container_12 .grid_6,
|
|
49
|
+
.container_16 .grid_8 {
|
|
50
|
+
width: 460px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.container_12 .grid_9,
|
|
54
|
+
.container_16 .grid_12 {
|
|
55
|
+
width: 700px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.container_12 .grid_12,
|
|
59
|
+
.container_16 .grid_16 {
|
|
60
|
+
width: 940px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
|
|
64
|
+
----------------------------------------------------------------------------------------------------*/
|
|
65
|
+
|
|
66
|
+
.alpha {
|
|
67
|
+
margin-left: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.omega {
|
|
71
|
+
margin-right: 0;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* `Grid >> 12 Columns
|
|
75
|
+
----------------------------------------------------------------------------------------------------*/
|
|
76
|
+
|
|
77
|
+
.container_12 .grid_1 {
|
|
78
|
+
width: 60px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.container_12 .grid_2 {
|
|
82
|
+
width: 140px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.container_12 .grid_4 {
|
|
86
|
+
width: 300px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.container_12 .grid_5 {
|
|
90
|
+
width: 380px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.container_12 .grid_7 {
|
|
94
|
+
width: 540px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.container_12 .grid_8 {
|
|
98
|
+
width: 620px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.container_12 .grid_10 {
|
|
102
|
+
width: 780px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.container_12 .grid_11 {
|
|
106
|
+
width: 860px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* `Grid >> 16 Columns
|
|
110
|
+
----------------------------------------------------------------------------------------------------*/
|
|
111
|
+
|
|
112
|
+
.container_16 .grid_1 {
|
|
113
|
+
width: 40px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.container_16 .grid_2 {
|
|
117
|
+
width: 100px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.container_16 .grid_3 {
|
|
121
|
+
width: 160px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.container_16 .grid_5 {
|
|
125
|
+
width: 280px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.container_16 .grid_6 {
|
|
129
|
+
width: 340px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.container_16 .grid_7 {
|
|
133
|
+
width: 400px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.container_16 .grid_9 {
|
|
137
|
+
width: 520px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.container_16 .grid_10 {
|
|
141
|
+
width: 580px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.container_16 .grid_11 {
|
|
145
|
+
width: 640px;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.container_16 .grid_13 {
|
|
149
|
+
width: 760px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.container_16 .grid_14 {
|
|
153
|
+
width: 820px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.container_16 .grid_15 {
|
|
157
|
+
width: 880px;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* `Prefix Extra Space >> Global
|
|
161
|
+
----------------------------------------------------------------------------------------------------*/
|
|
162
|
+
|
|
163
|
+
.container_12 .prefix_3,
|
|
164
|
+
.container_16 .prefix_4 {
|
|
165
|
+
padding-left: 240px;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.container_12 .prefix_6,
|
|
169
|
+
.container_16 .prefix_8 {
|
|
170
|
+
padding-left: 480px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.container_12 .prefix_9,
|
|
174
|
+
.container_16 .prefix_12 {
|
|
175
|
+
padding-left: 720px;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* `Prefix Extra Space >> 12 Columns
|
|
179
|
+
----------------------------------------------------------------------------------------------------*/
|
|
180
|
+
|
|
181
|
+
.container_12 .prefix_1 {
|
|
182
|
+
padding-left: 80px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.container_12 .prefix_2 {
|
|
186
|
+
padding-left: 160px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.container_12 .prefix_4 {
|
|
190
|
+
padding-left: 320px;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.container_12 .prefix_5 {
|
|
194
|
+
padding-left: 400px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.container_12 .prefix_7 {
|
|
198
|
+
padding-left: 560px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.container_12 .prefix_8 {
|
|
202
|
+
padding-left: 640px;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.container_12 .prefix_10 {
|
|
206
|
+
padding-left: 800px;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.container_12 .prefix_11 {
|
|
210
|
+
padding-left: 880px;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* `Prefix Extra Space >> 16 Columns
|
|
214
|
+
----------------------------------------------------------------------------------------------------*/
|
|
215
|
+
|
|
216
|
+
.container_16 .prefix_1 {
|
|
217
|
+
padding-left: 60px;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.container_16 .prefix_2 {
|
|
221
|
+
padding-left: 120px;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.container_16 .prefix_3 {
|
|
225
|
+
padding-left: 180px;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.container_16 .prefix_5 {
|
|
229
|
+
padding-left: 300px;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.container_16 .prefix_6 {
|
|
233
|
+
padding-left: 360px;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.container_16 .prefix_7 {
|
|
237
|
+
padding-left: 420px;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.container_16 .prefix_9 {
|
|
241
|
+
padding-left: 540px;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.container_16 .prefix_10 {
|
|
245
|
+
padding-left: 600px;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.container_16 .prefix_11 {
|
|
249
|
+
padding-left: 660px;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.container_16 .prefix_13 {
|
|
253
|
+
padding-left: 780px;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.container_16 .prefix_14 {
|
|
257
|
+
padding-left: 840px;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.container_16 .prefix_15 {
|
|
261
|
+
padding-left: 900px;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/* `Suffix Extra Space >> Global
|
|
265
|
+
----------------------------------------------------------------------------------------------------*/
|
|
266
|
+
|
|
267
|
+
.container_12 .suffix_3,
|
|
268
|
+
.container_16 .suffix_4 {
|
|
269
|
+
padding-right: 240px;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.container_12 .suffix_6,
|
|
273
|
+
.container_16 .suffix_8 {
|
|
274
|
+
padding-right: 480px;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.container_12 .suffix_9,
|
|
278
|
+
.container_16 .suffix_12 {
|
|
279
|
+
padding-right: 720px;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* `Suffix Extra Space >> 12 Columns
|
|
283
|
+
----------------------------------------------------------------------------------------------------*/
|
|
284
|
+
|
|
285
|
+
.container_12 .suffix_1 {
|
|
286
|
+
padding-right: 80px;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.container_12 .suffix_2 {
|
|
290
|
+
padding-right: 160px;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.container_12 .suffix_4 {
|
|
294
|
+
padding-right: 320px;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.container_12 .suffix_5 {
|
|
298
|
+
padding-right: 400px;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.container_12 .suffix_7 {
|
|
302
|
+
padding-right: 560px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.container_12 .suffix_8 {
|
|
306
|
+
padding-right: 640px;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.container_12 .suffix_10 {
|
|
310
|
+
padding-right: 800px;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.container_12 .suffix_11 {
|
|
314
|
+
padding-right: 880px;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* `Suffix Extra Space >> 16 Columns
|
|
318
|
+
----------------------------------------------------------------------------------------------------*/
|
|
319
|
+
|
|
320
|
+
.container_16 .suffix_1 {
|
|
321
|
+
padding-right: 60px;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.container_16 .suffix_2 {
|
|
325
|
+
padding-right: 120px;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.container_16 .suffix_3 {
|
|
329
|
+
padding-right: 180px;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.container_16 .suffix_5 {
|
|
333
|
+
padding-right: 300px;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.container_16 .suffix_6 {
|
|
337
|
+
padding-right: 360px;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.container_16 .suffix_7 {
|
|
341
|
+
padding-right: 420px;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.container_16 .suffix_9 {
|
|
345
|
+
padding-right: 540px;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.container_16 .suffix_10 {
|
|
349
|
+
padding-right: 600px;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.container_16 .suffix_11 {
|
|
353
|
+
padding-right: 660px;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.container_16 .suffix_13 {
|
|
357
|
+
padding-right: 780px;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.container_16 .suffix_14 {
|
|
361
|
+
padding-right: 840px;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.container_16 .suffix_15 {
|
|
365
|
+
padding-right: 900px;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/* `Clear Floated Elements
|
|
369
|
+
----------------------------------------------------------------------------------------------------*/
|
|
370
|
+
|
|
371
|
+
/* http://sonspring.com/journal/clearing-floats */
|
|
372
|
+
|
|
373
|
+
.clear {
|
|
374
|
+
clear: both;
|
|
375
|
+
display: block;
|
|
376
|
+
overflow: hidden;
|
|
377
|
+
visibility: hidden;
|
|
378
|
+
width: 0;
|
|
379
|
+
height: 0;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
|
|
383
|
+
|
|
384
|
+
.clearfix:after {
|
|
385
|
+
clear: both;
|
|
386
|
+
content: ' ';
|
|
387
|
+
display: block;
|
|
388
|
+
font-size: 0;
|
|
389
|
+
line-height: 0;
|
|
390
|
+
visibility: hidden;
|
|
391
|
+
width: 0;
|
|
392
|
+
height: 0;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.clearfix {
|
|
396
|
+
display: inline-block;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
* html .clearfix {
|
|
400
|
+
height: 1%;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.clearfix {
|
|
404
|
+
display: block;
|
|
405
|
+
}
|
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
/* Fonts ----------------------------------------------- */
|
|
2
|
+
$font-type: serif !default;
|
|
3
|
+
|
|
4
|
+
$normal-font-face: Georgia !default;
|
|
5
|
+
$italic-font-face: $normal-font-face !default;
|
|
6
|
+
$bold-font-face: $normal-font-face !default;
|
|
7
|
+
|
|
8
|
+
$normal-font-stack: $normal-font-face, $font-type !default;
|
|
9
|
+
$italic-font-stack: $italic-font-face, $font-type !default;
|
|
10
|
+
$bold-font-stack: $bold-font-face, $font-type !default;
|
|
11
|
+
|
|
12
|
+
@mixin normal {
|
|
13
|
+
font-family: $normal-font-stack;
|
|
14
|
+
font-style: normal;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@mixin italic {
|
|
18
|
+
@if $italic-font-face != $normal-font-face {
|
|
19
|
+
font-family: $italic-font-stack;
|
|
20
|
+
} @else {
|
|
21
|
+
font-style: italic;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@mixin bold {
|
|
26
|
+
@if $bold-font-face != $normal-font-face {
|
|
27
|
+
font-family: $bold-font-stack;
|
|
28
|
+
} @else {
|
|
29
|
+
font-weight: bold;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Font Specimen ----------------------------------------------- */
|
|
34
|
+
body, .typeface1 {
|
|
35
|
+
@include normal; }
|
|
36
|
+
|
|
37
|
+
.typeface2 {
|
|
38
|
+
font-family: Verdana; }
|
|
39
|
+
|
|
40
|
+
em {
|
|
41
|
+
@include italic; }
|
|
42
|
+
|
|
43
|
+
strong {
|
|
44
|
+
@include bold; }
|
|
45
|
+
|
|
46
|
+
/* General
|
|
47
|
+
----------------------------------------------- */
|
|
48
|
+
body {
|
|
49
|
+
margin: 0 0 72px;
|
|
50
|
+
font-size: 13px;
|
|
51
|
+
line-height: 18px;
|
|
52
|
+
background-color: #eeeee2;
|
|
53
|
+
color: #333;
|
|
54
|
+
}
|
|
55
|
+
.container_16 {
|
|
56
|
+
background-color: #fff;
|
|
57
|
+
padding-bottom: 36px;
|
|
58
|
+
}
|
|
59
|
+
#header {
|
|
60
|
+
padding-top: 24px;
|
|
61
|
+
border-top: 16px #ddddd2 solid;
|
|
62
|
+
}
|
|
63
|
+
.dim {
|
|
64
|
+
background-color: #ddddd2;
|
|
65
|
+
color: #333;
|
|
66
|
+
}
|
|
67
|
+
.dim .container_16 { background-color: #fcfcf3; }
|
|
68
|
+
.dim, .dim .upp { text-align: center; }
|
|
69
|
+
|
|
70
|
+
.dark {
|
|
71
|
+
background-color: #111112;
|
|
72
|
+
color: #fff;
|
|
73
|
+
}
|
|
74
|
+
.dark .container_16 { background-color: #000; }
|
|
75
|
+
|
|
76
|
+
#footer {
|
|
77
|
+
padding-bottom: 36px;
|
|
78
|
+
border-top: 24px #ddddd2 solid;
|
|
79
|
+
font: 13px/21px Verdana;
|
|
80
|
+
color: #888882;
|
|
81
|
+
}
|
|
82
|
+
#footer span { margin: 0; }
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
/* Type
|
|
86
|
+
----------------------------------------------- */
|
|
87
|
+
h1 {
|
|
88
|
+
font-size: 96px;
|
|
89
|
+
line-height: 96px;
|
|
90
|
+
font-weight: normal;
|
|
91
|
+
border-bottom: 2px #eeeee2 solid;
|
|
92
|
+
}
|
|
93
|
+
h2 {
|
|
94
|
+
font: normal 13px/18px Verdana, sans-serif;
|
|
95
|
+
color: #c00;
|
|
96
|
+
}
|
|
97
|
+
h3 {
|
|
98
|
+
font-size: 24px;
|
|
99
|
+
line-height: 24px;
|
|
100
|
+
font-weight: normal;
|
|
101
|
+
}
|
|
102
|
+
h4 {
|
|
103
|
+
font-weight: normal;
|
|
104
|
+
text-transform: uppercase;
|
|
105
|
+
letter-spacing: 1px;
|
|
106
|
+
}
|
|
107
|
+
h5 + p { margin-top: 0; }
|
|
108
|
+
h2, p, ul, ol { margin: 18px 0; }
|
|
109
|
+
ul {
|
|
110
|
+
list-style-type: square;
|
|
111
|
+
margin-left: 28px;
|
|
112
|
+
}
|
|
113
|
+
ol {
|
|
114
|
+
list-style-type: decimal;
|
|
115
|
+
margin-left: 28px;
|
|
116
|
+
}
|
|
117
|
+
.dropcap:first-letter {
|
|
118
|
+
float: left;
|
|
119
|
+
margin: 0 10px 4px 0;
|
|
120
|
+
font-size: 48px;
|
|
121
|
+
line-height: 48px;
|
|
122
|
+
font-variant: normal;
|
|
123
|
+
}
|
|
124
|
+
.dropcap:first-line {
|
|
125
|
+
font-variant: small-caps;
|
|
126
|
+
letter-spacing: 1px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
/* Links
|
|
131
|
+
-----------------------------------------*/
|
|
132
|
+
a {
|
|
133
|
+
text-decoration: none;
|
|
134
|
+
padding: 3px 0;
|
|
135
|
+
}
|
|
136
|
+
a:link,
|
|
137
|
+
a:visited {
|
|
138
|
+
color: #888882;
|
|
139
|
+
background-color: #eeeee2;
|
|
140
|
+
}
|
|
141
|
+
a:hover {
|
|
142
|
+
background-color: #fffff2;
|
|
143
|
+
}
|
|
144
|
+
a:active {
|
|
145
|
+
color: #fff;
|
|
146
|
+
background-color: #000;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
/* Body size comparison
|
|
151
|
+
-----------------------------------------*/
|
|
152
|
+
p.char-compare {
|
|
153
|
+
font-size: 72px;
|
|
154
|
+
line-height: 96px;
|
|
155
|
+
color: #ddd;
|
|
156
|
+
text-decoration: underline;
|
|
157
|
+
}
|
|
158
|
+
.char-compare .typeface1 {
|
|
159
|
+
margin-right: 0;
|
|
160
|
+
color: #333;
|
|
161
|
+
border-bottom: 1px #999 solid;
|
|
162
|
+
border-top: 1px #999 solid;
|
|
163
|
+
}
|
|
164
|
+
.char-compare .typeface2 {
|
|
165
|
+
color: #333;
|
|
166
|
+
background-color: #eeeee2;
|
|
167
|
+
border-bottom: 1px #999 solid;
|
|
168
|
+
border-top: 1px #999 solid;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
/* Leading
|
|
173
|
+
-----------------------------------------*/
|
|
174
|
+
.l-less { line-height: 16px; }
|
|
175
|
+
.l-mid { line-height: 18px; }
|
|
176
|
+
.l-more { line-height: 21px; }
|
|
177
|
+
.l-most { line-height: 24px; }
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
/* Measure
|
|
181
|
+
-----------------------------------------*/
|
|
182
|
+
.m-widest { width: 900px; }
|
|
183
|
+
.m-wide { width: 700px; }
|
|
184
|
+
.m-mid { width: 450px; }
|
|
185
|
+
.m-narrow { width: 300px; }
|
|
186
|
+
|
|
187
|
+
.small {
|
|
188
|
+
font-size: 11px;
|
|
189
|
+
line-height: 14px;
|
|
190
|
+
}
|
|
191
|
+
.small .m-mid { width: 350px; }
|
|
192
|
+
.small .m-narrow { width: 250px; }
|
|
193
|
+
.small .m-mini {
|
|
194
|
+
font-size: 9px;
|
|
195
|
+
line-height: 13px;
|
|
196
|
+
width: 200px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
/* Size
|
|
201
|
+
-----------------------------------------*/
|
|
202
|
+
.s { line-height: 1.5em; }
|
|
203
|
+
.s9 { font-size: 9px; }
|
|
204
|
+
.s10 { font-size: 10px; }
|
|
205
|
+
.s11 { font-size: 11px; }
|
|
206
|
+
.s12 { font-size: 12px; }
|
|
207
|
+
.s13 { font-size: 13px; }
|
|
208
|
+
.s14 { font-size: 14px; }
|
|
209
|
+
.s16 { font-size: 16px; }
|
|
210
|
+
.s18 { font-size: 18px; }
|
|
211
|
+
.s21 { font-size: 21px; }
|
|
212
|
+
.s24 { font-size: 24px; }
|
|
213
|
+
.s30 { font-size: 30px; }
|
|
214
|
+
.s36 { font-size: 36px; }
|
|
215
|
+
.s42 { font-size: 42px; line-height: 60px; }
|
|
216
|
+
.s96 { font-size: 96px; line-height: 96px; }
|
|
217
|
+
.s300 { font-size: 300px; line-height: 300px;}
|
|
218
|
+
|
|
219
|
+
.container_16 span {
|
|
220
|
+
margin-right: 6px;
|
|
221
|
+
color: #999;
|
|
222
|
+
}
|
|
223
|
+
.s span {
|
|
224
|
+
display: block;
|
|
225
|
+
float: left;
|
|
226
|
+
width: 80px;
|
|
227
|
+
margin-left: -96px;
|
|
228
|
+
margin-right: 0;
|
|
229
|
+
text-align: right;
|
|
230
|
+
color: #999;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
/* Uppercase
|
|
235
|
+
-----------------------------------------*/
|
|
236
|
+
.upp {
|
|
237
|
+
text-align: right;
|
|
238
|
+
text-transform: uppercase;
|
|
239
|
+
letter-spacing: 1px;
|
|
240
|
+
}
|
|
241
|
+
.upp span {
|
|
242
|
+
display: block;
|
|
243
|
+
float: right;
|
|
244
|
+
width: 80px;
|
|
245
|
+
margin-right: -96px;
|
|
246
|
+
text-align: left;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
/* Grayscale
|
|
251
|
+
-----------------------------------------*/
|
|
252
|
+
.c000 { color: #000; }
|
|
253
|
+
.c333 { color: #333; }
|
|
254
|
+
.c666 { color: #666; }
|
|
255
|
+
.c999 { color: #999; }
|
|
256
|
+
.cCCC { color: #ccc; }
|
|
257
|
+
.cFFF { color: #fff; }
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
/* Color
|
|
261
|
+
-----------------------------------------*/
|
|
262
|
+
.c {
|
|
263
|
+
padding: 0 12px;
|
|
264
|
+
border: 1px #eee solid;
|
|
265
|
+
color: #000;
|
|
266
|
+
}
|
|
267
|
+
.c h2 { color: #000; }
|
|
268
|
+
.c000-fff {
|
|
269
|
+
color: #000;
|
|
270
|
+
background-color: #fff;
|
|
271
|
+
}
|
|
272
|
+
.cfff-000 {
|
|
273
|
+
color: #fff;
|
|
274
|
+
background-color: #000;
|
|
275
|
+
border-color: #000;
|
|
276
|
+
}
|
|
277
|
+
.cfff-000 h2 { color: #c00; }
|
|
278
|
+
.cf00-fff {
|
|
279
|
+
color: #f00;
|
|
280
|
+
background-color: #fff;
|
|
281
|
+
}
|
|
282
|
+
.cf00-000 {
|
|
283
|
+
color: #f00;
|
|
284
|
+
background-color: #000;
|
|
285
|
+
border-color: #000;
|
|
286
|
+
}
|
|
287
|
+
.cf00-000 h2 { color: #eee; }
|
|
288
|
+
.c0ff-fff {
|
|
289
|
+
color: #0ff;
|
|
290
|
+
background-color: #fff;
|
|
291
|
+
}
|
|
292
|
+
.c0ff-000 {
|
|
293
|
+
color: #0ff;
|
|
294
|
+
background-color: #000;
|
|
295
|
+
border-color: #000;
|
|
296
|
+
}
|
|
297
|
+
.c0ff-000 h2 { color: #eee; }
|
|
298
|
+
.cfff-f00 {
|
|
299
|
+
color: #fff;
|
|
300
|
+
background-color: #f00;
|
|
301
|
+
border-color: #f00;
|
|
302
|
+
}
|
|
303
|
+
.c000-f00 {
|
|
304
|
+
color: #000;
|
|
305
|
+
background-color: #f00;
|
|
306
|
+
border-color: #f00;
|
|
307
|
+
}
|
|
308
|
+
.cfff-0ff {
|
|
309
|
+
color: #fff;
|
|
310
|
+
background-color: #0ff;
|
|
311
|
+
border-color: #0ff;
|
|
312
|
+
}
|
|
313
|
+
.c000-0ff {
|
|
314
|
+
color: #000;
|
|
315
|
+
background-color: #0ff;
|
|
316
|
+
border-color: #0ff;
|
|
317
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/* Welcome to WebFontSpecimen
|
|
2
|
+
* Based on Nice Web Type's tool by the same name
|
|
3
|
+
* http://webfontspecimen.com/ */
|
|
4
|
+
|
|
5
|
+
// Imports -----------------------------------*/
|
|
6
|
+
@import "compass/css3/font-face";
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
//
|
|
10
|
+
// Web Font Specimen Usage:
|
|
11
|
+
// ========================
|
|
12
|
+
//
|
|
13
|
+
// 1. Add your typeface(s) to your specified "fonts" folder.
|
|
14
|
+
// - This is specified as "fonts_dir" in your "config.rb" file.
|
|
15
|
+
//
|
|
16
|
+
// 2. Rename this file:
|
|
17
|
+
// - For single specimens simply remove the "_" prefix
|
|
18
|
+
// - For multiple specimens duplicate and rename for each font
|
|
19
|
+
//
|
|
20
|
+
// 3. Include each face of your font below
|
|
21
|
+
// Or comment out any faces that you aren't using.
|
|
22
|
+
//
|
|
23
|
+
// 4. Make adjustments to "specimen.html"
|
|
24
|
+
// - For multiple specimens duplicate and rename for each font
|
|
25
|
+
// being sure to change the stylesheet link as needed.
|
|
26
|
+
// - Search for and replace "{FONT NAME}" with your font name
|
|
27
|
+
//
|
|
28
|
+
// 5. Enjoy!
|
|
29
|
+
//
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
// Font Type ---------------------------------*/
|
|
33
|
+
$font-type: serif;
|
|
34
|
+
|
|
35
|
+
/* Standard ----------------------------------*/
|
|
36
|
+
$normal-font-face: "Name Your Font";
|
|
37
|
+
@include font-face(
|
|
38
|
+
$normal-font-face,
|
|
39
|
+
font-files(
|
|
40
|
+
"type_file.woff", woff,
|
|
41
|
+
"type_file.ttf", truetype,
|
|
42
|
+
"type_file.svg#Type-Name", svg
|
|
43
|
+
),
|
|
44
|
+
"type_file.eot",
|
|
45
|
+
postscriptname
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
$normal-font-stack: $normal-font-face, $font-type;
|
|
49
|
+
|
|
50
|
+
/* Italic ----------------------------------*/
|
|
51
|
+
$italic-font-face: "Name Your Italic Font";
|
|
52
|
+
@include font-face(
|
|
53
|
+
$italic-font-face,
|
|
54
|
+
font-files(
|
|
55
|
+
"type_file.woff", woff,
|
|
56
|
+
"type_file.ttf", truetype,
|
|
57
|
+
"type_file.svg#Type-Name", svg
|
|
58
|
+
),
|
|
59
|
+
"type_file.eot",
|
|
60
|
+
postscriptname
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
$italic-font-stack: $italic-font-face, $font-type;
|
|
64
|
+
|
|
65
|
+
/* Bold ----------------------------------*/
|
|
66
|
+
$bold-font-face: "Name Your Bold Font";
|
|
67
|
+
@include font-face(
|
|
68
|
+
"Your bold typeface",
|
|
69
|
+
font-files(
|
|
70
|
+
"type_file.woff", woff,
|
|
71
|
+
"type_file.ttf", truetype,
|
|
72
|
+
"type_file.svg#Type-Name", svg
|
|
73
|
+
),
|
|
74
|
+
"type_file.eot",
|
|
75
|
+
postscriptname
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
$bold-font-stack: $bold-font-face, $font-type;
|
|
79
|
+
|
|
80
|
+
// Import WebFontSpecimen -------------------------------------------*/
|
|
81
|
+
// Leave this below your font settings
|
|
82
|
+
@import "webfontspecimen";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
stylesheet '_specimen.scss', :media => "screen, projection"
|
|
2
|
+
html 'specimen.html'
|
|
3
|
+
|
|
4
|
+
description "A Compass port of Nice Web Type's Web Font Specimen tool - http://webfontspecimen.com/"
|
|
5
|
+
|
|
6
|
+
help %Q{
|
|
7
|
+
Installs an html file and stylesheet that you can use directly
|
|
8
|
+
or duplicate for multiple specimens.
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
welcome_message %Q{
|
|
12
|
+
Please refer to the README or 'specimen.html' files for instructions.
|
|
13
|
+
}
|
|
14
|
+
|
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<!--
|
|
6
|
+
|
|
7
|
+
Using Web Font Specimen =======================================================
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
1. Add your typeface(s) to your specified "fonts" folder.
|
|
11
|
+
- This is specified as "fonts_dir" in your "config.rb" file.
|
|
12
|
+
|
|
13
|
+
2. Rename the "_specimen" sass file:
|
|
14
|
+
- For single specimens simply remove the "_" prefix
|
|
15
|
+
- For multiple specimens duplicate and rename for each font
|
|
16
|
+
|
|
17
|
+
3. Include each face of your font in the proided "font-face" mixins
|
|
18
|
+
Or comment out any faces that you aren't using.
|
|
19
|
+
|
|
20
|
+
4. Make adjustments to this file
|
|
21
|
+
- For multiple specimens duplicate and rename for each font
|
|
22
|
+
being sure to change the stylesheet link as needed.
|
|
23
|
+
- Search for and replace "{FONT NAME}" with your font name
|
|
24
|
+
|
|
25
|
+
5. Enjoy!
|
|
26
|
+
|
|
27
|
+
==============================================================================
|
|
28
|
+
|
|
29
|
+
-->
|
|
30
|
+
|
|
31
|
+
<meta charset="utf-8" />
|
|
32
|
+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
33
|
+
|
|
34
|
+
<title>{FONT NAME} - Web Font Specimen</title>
|
|
35
|
+
<link rel="stylesheet" href="css/specimen.css" type="text/css" media="screen" charset="utf-8">
|
|
36
|
+
|
|
37
|
+
</head>
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
<body>
|
|
41
|
+
<div id="header" class="container_16 clearfix">
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
<!-- NAME OF TYPEFACE -->
|
|
45
|
+
<div class="grid_16">
|
|
46
|
+
<h1>{FONT NAME}</h1>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
<!-- HEADINGS, LISTS, EMPHASIS -->
|
|
51
|
+
<div class="grid_8">
|
|
52
|
+
<h2>Headings, lists, and emphasis</h2>
|
|
53
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
54
|
+
<h3>Lorem ipsum <em>dolor</em> sit <strong>amet</strong></h3>
|
|
55
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
56
|
+
<ul>
|
|
57
|
+
<li>Duis aute irure dolor in reprehenderit</li>
|
|
58
|
+
<li>in <em>voluptate velit esse cillum</em> dolore eu fugiat nulla pariatur</li>
|
|
59
|
+
<li>Excepteur sint occaecat cupidatat non proident</li>
|
|
60
|
+
<li>sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
|
|
61
|
+
</ul>
|
|
62
|
+
<ol>
|
|
63
|
+
<li>Duis aute irure dolor in reprehenderit</li>
|
|
64
|
+
<li>in <em>voluptate velit esse cillum</em> dolore eu fugiat nulla pariatur</li>
|
|
65
|
+
<li>Excepteur sint occaecat cupidatat non proident</li>
|
|
66
|
+
<li>sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
|
|
67
|
+
</ol>
|
|
68
|
+
<h4>Consectetur <em>adipisicing</em> elit <strong>voluptate</strong></h4>
|
|
69
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
70
|
+
<p class="dropcap">The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to discard knowledge of what has gone before or what is now going on in his own trade and profession. If the printers of today do not wish to be esteemed arrogant when they term this calling of theirs an art, they must be willing, and show that they are willing, to subject it to such laws as have made its</p>
|
|
71
|
+
<p><em>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</em></p>
|
|
72
|
+
<h5>Sed do <em>eiusmod</em> tempor <strong>incididunt</strong></h5>
|
|
73
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
<!-- BODY SIZE COMPARISON -->
|
|
78
|
+
<div class="grid_8">
|
|
79
|
+
<h2>Body size comparison <span>· {FONT NAME} and Verdana</span></h2>
|
|
80
|
+
<p class="char-compare">
|
|
81
|
+
<span class="typeface1">a</span><span class="typeface2">a</span>
|
|
82
|
+
<span class="typeface1">b</span><span class="typeface2">b</span>
|
|
83
|
+
<span class="typeface1">c</span><span class="typeface2">c</span><br />
|
|
84
|
+
<span class="typeface1">e</span><span class="typeface2">e</span>
|
|
85
|
+
<span class="typeface1">f</span><span class="typeface2">f</span>
|
|
86
|
+
<span class="typeface1">g</span><span class="typeface2">g</span><br />
|
|
87
|
+
<span class="typeface1">n</span><span class="typeface2">n</span>
|
|
88
|
+
<span class="typeface1">o</span><span class="typeface2">o</span>
|
|
89
|
+
<span class="typeface1">t</span><span class="typeface2">t</span><br />
|
|
90
|
+
<span class="typeface1">A</span><span class="typeface2">A</span>
|
|
91
|
+
<span class="typeface1">O</span><span class="typeface2">O</span>
|
|
92
|
+
<span class="typeface1">R</span><span class="typeface2">R</span>
|
|
93
|
+
</p>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
<!-- LEADING -->
|
|
98
|
+
<div class="grid_8">
|
|
99
|
+
<h2>Leading <span>– CSS font-size/line-height (px)</span></h2>
|
|
100
|
+
<p class="l-less"><span>13/16</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
101
|
+
<p class="l-mid"><span>13/18</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
102
|
+
<p class="l-more"><span>13/21</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
103
|
+
<p class="l-most"><span>13/24</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
104
|
+
</div><div class="clearfix"></div>
|
|
105
|
+
</div><!-- end .container-16 -->
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
<!-- ALPHABET -->
|
|
109
|
+
<div class="dim">
|
|
110
|
+
<div class="container_16 clearfix">
|
|
111
|
+
<div class="grid_16 center">
|
|
112
|
+
<h2>· 42px ·</h2>
|
|
113
|
+
<p class="s42">The best kind of originality is that which comes after a sound apprenticeship, that which shall</p>
|
|
114
|
+
<p class="s42"><em>The best kind of originality is that which comes after a sound apprenticeship, that which shall</em></p>
|
|
115
|
+
<p class="s42 upp ls">abcdefghijklmnopqrstuvwxyz</p>
|
|
116
|
+
<p class="s42">abcdefghijklmnopqrstuvwxyz</p>
|
|
117
|
+
<p class="s42 ls">$ & § 1234567890-.,:;—“”?!</p>
|
|
118
|
+
</div>
|
|
119
|
+
</div><!-- end .container_16 -->
|
|
120
|
+
</div><!-- end .dim -->
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
<!-- MEASURE -->
|
|
124
|
+
<div class="container_16 clearfix">
|
|
125
|
+
<div class="grid_16">
|
|
126
|
+
<h2>Measure <span>– CSS font-size/line-height × width (px)</span></h2>
|
|
127
|
+
<p class="m-widest"><span>13/18 × 900</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to discard knowledge of what has gone before or what is now going on in his own trade and profession. If the printers of today do not wish to be esteemed arrogant when they term this calling of theirs an art, they must be willing, and show that they are willing, to subject it to such laws as have made its</p>
|
|
128
|
+
<p class="m-wide"><span>13/18 × 700</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to discard knowledge of what has gone before or what is now going on in his own trade and profession. If the printers of today do not wish to be esteemed arrogant when they term this calling of theirs an art, they must be willing, and show that they are willing, to subject it to such laws as have made its</p>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="grid_9">
|
|
131
|
+
<p class="m-mid"><span>13/18 × 450</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
132
|
+
<p class="m-narrow"><span>13/18 × 300</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="grid_7 small">
|
|
135
|
+
<p class="m-mid"><span>11/14 × 350</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
136
|
+
<p class="m-narrow"><span>11/14 × 250</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
137
|
+
<p class="m-mini"><span>9/13 × 200</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
<!-- SIZE -->
|
|
142
|
+
<div class="grid_16">
|
|
143
|
+
<h2>Size <span>– CSS font-size (px)</span></h2>
|
|
144
|
+
<p class="s s36"><span>36</span> Pack my box with five dozen liquor jugs.</p>
|
|
145
|
+
<p class="s s30"><span>30</span> Pack my box with five dozen liquor jugs.</p>
|
|
146
|
+
<p class="s s24"><span>24</span> Pack my box with five dozen liquor jugs.</p>
|
|
147
|
+
</div><div class="clearfix"></div>
|
|
148
|
+
<div class="grid_10">
|
|
149
|
+
<p class="s s21"><span>21</span> Pack my box with five dozen liquor jugs.</p>
|
|
150
|
+
<p class="s s18"><span>18</span> Pack my box with five dozen liquor jugs.</p>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="grid_6 upp">
|
|
153
|
+
<p class="s s9"><span>9</span> Pack my box with five dozen liquor jugs.</p>
|
|
154
|
+
<p class="s s10"><span>10</span> Pack my box with five dozen liquor jugs.</p>
|
|
155
|
+
</div><div class="clearfix"></div>
|
|
156
|
+
<div class="grid_8">
|
|
157
|
+
<p class="s s16"><span>16</span> Pack my box with five dozen liquor jugs.</p>
|
|
158
|
+
<p class="s s14"><span>14</span> Pack my box with five dozen liquor jugs.</p>
|
|
159
|
+
<p class="s s13"><span>13</span> Pack my box with five dozen liquor jugs.</p>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="grid_8 upp">
|
|
162
|
+
<p class="s s11"><span>11</span> Pack my box with five dozen liquor jugs.</p>
|
|
163
|
+
<p class="s s12"><span>12</span> Pack my box with five dozen liquor jugs.</p>
|
|
164
|
+
<p class="s s13"><span>13</span> Pack my box with five dozen liquor jugs.</p>
|
|
165
|
+
</div><div class="clearfix"></div>
|
|
166
|
+
<div class="grid_6">
|
|
167
|
+
<p class="s s12"><span>12</span> Pack my box with five dozen liquor jugs.</p>
|
|
168
|
+
<p class="s s11"><span>11</span> Pack my box with five dozen liquor jugs.</p>
|
|
169
|
+
<p class="s s10"><span>10</span> Pack my box with five dozen liquor jugs.</p>
|
|
170
|
+
<p class="s s9"><span>9</span> Pack my box with five dozen liquor jugs.</p>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="grid_10 upp">
|
|
173
|
+
<p class="s s14"><span>14</span> Pack my box with five dozen liquor jugs.</p>
|
|
174
|
+
<p class="s s16"><span>16</span> Pack my box with five dozen liquor jugs.</p>
|
|
175
|
+
<p class="s s18"><span>18</span> Pack my box with five dozen liquor jugs.</p>
|
|
176
|
+
</div><div class="clearfix"></div>
|
|
177
|
+
<div class="grid_16 upp">
|
|
178
|
+
<p class="s s21"><span>21</span> Pack my box with five dozen liquor jugs.</p>
|
|
179
|
+
<p class="s s24"><span>24</span> Pack my box with five dozen liquor jugs.</p>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
<!-- GRAYSCALE AND COLOR ON WHITE -->
|
|
184
|
+
<div class="grid_8">
|
|
185
|
+
<h2>Grayscale <span>– CSS color (shorthand hexadecimal)</span></h2>
|
|
186
|
+
<p class="c000"><span>#000</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
187
|
+
<p class="c333"><span>#333</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
188
|
+
<p class="c666"><span>#666</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
189
|
+
<p class="c999"><span>#999</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
190
|
+
<p class="cCCC"><span>#CCC</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="grid_8">
|
|
193
|
+
<div class="c000-fff">
|
|
194
|
+
<h2>Color <span>– CSS color (shorthand hexadecimal)</span></h2>
|
|
195
|
+
<p><span>#000</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="cf00-fff">
|
|
198
|
+
<p><span>#F00</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="c0ff-fff">
|
|
201
|
+
<p><span>#0FF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div><!-- end .container_16 -->
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
<!-- GRAYSCALE AND COLOR ON BLACK -->
|
|
208
|
+
<div class="dark">
|
|
209
|
+
<div class="container_16 clearfix">
|
|
210
|
+
<div class="grid_8">
|
|
211
|
+
<h2>Grayscale <span>– CSS color (shorthand hexadecimal)</span></h2>
|
|
212
|
+
<p class="cfff"><span>#FFF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
213
|
+
<p class="cCCC"><span>#CCC</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
214
|
+
<p class="c999"><span>#999</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
215
|
+
<p class="c666"><span>#666</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
216
|
+
<p class="c333"><span>#333</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
217
|
+
</div>
|
|
218
|
+
<div class="grid_8">
|
|
219
|
+
<div class="cfff-000">
|
|
220
|
+
<h2>Color <span>– CSS color (shorthand hexadecimal)</span></h2>
|
|
221
|
+
<p><span>#FFF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
222
|
+
</div>
|
|
223
|
+
<div class="c0ff-000">
|
|
224
|
+
<p><span>#0FF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
225
|
+
</div>
|
|
226
|
+
<div class="cf00-000">
|
|
227
|
+
<p><span>#F00</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
</div><!-- end .container_16 -->
|
|
231
|
+
</div><!-- end .dark -->
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
<!-- BLACK AND WHITE ON COLOR -->
|
|
235
|
+
<div class="container_16 clearfix">
|
|
236
|
+
<div class="grid_8">
|
|
237
|
+
<div class="c cfff-f00">
|
|
238
|
+
<h2>#FFF on #F00</h2>
|
|
239
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="grid_8">
|
|
243
|
+
<div class="c c000-f00">
|
|
244
|
+
<h2>#000 on #0FF</h2>
|
|
245
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="grid_8">
|
|
249
|
+
<div class="c cfff-0ff">
|
|
250
|
+
<h2>#FFF on #0FF</h2>
|
|
251
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="grid_8">
|
|
255
|
+
<div class="c c000-0ff">
|
|
256
|
+
<h2>#000 on #0FF</h2>
|
|
257
|
+
<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</div><!-- end .container_16 -->
|
|
261
|
+
|
|
262
|
+
|
|
263
|
+
<!-- ABOUT -->
|
|
264
|
+
<div id="footer" class="container_12">
|
|
265
|
+
<div class="grid_6 suffix_6">
|
|
266
|
+
<p>This web font specimen is brought to you by <a href="http://nicewebtype.com/">Nice Web Type</a>.<br />
|
|
267
|
+
<a href="http://webfontspecimen.com/">Grab a copy and test your type</a>. Licensed via <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons</a>.</p>
|
|
268
|
+
</div>
|
|
269
|
+
</div><!-- end #footer -->
|
|
270
|
+
|
|
271
|
+
</body>
|
|
272
|
+
</html>
|
metadata
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: webfontspecimen
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
prerelease: false
|
|
5
|
+
segments:
|
|
6
|
+
- 0
|
|
7
|
+
- 2
|
|
8
|
+
- 0
|
|
9
|
+
version: 0.2.0
|
|
10
|
+
platform: ruby
|
|
11
|
+
authors:
|
|
12
|
+
- Eric Meyer
|
|
13
|
+
autorequire:
|
|
14
|
+
bindir: bin
|
|
15
|
+
cert_chain: []
|
|
16
|
+
|
|
17
|
+
date: 2010-05-18 00:00:00 -06:00
|
|
18
|
+
default_executable:
|
|
19
|
+
dependencies:
|
|
20
|
+
- !ruby/object:Gem::Dependency
|
|
21
|
+
name: compass
|
|
22
|
+
prerelease: false
|
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
|
24
|
+
requirements:
|
|
25
|
+
- - ">="
|
|
26
|
+
- !ruby/object:Gem::Version
|
|
27
|
+
segments:
|
|
28
|
+
- 0
|
|
29
|
+
- 10
|
|
30
|
+
- 0
|
|
31
|
+
- rc3
|
|
32
|
+
version: 0.10.0.rc3
|
|
33
|
+
type: :runtime
|
|
34
|
+
version_requirements: *id001
|
|
35
|
+
description: A Compass port of Nice Web Type's Web Font Specimen tool
|
|
36
|
+
email: eric@oddbird.net
|
|
37
|
+
executables: []
|
|
38
|
+
|
|
39
|
+
extensions: []
|
|
40
|
+
|
|
41
|
+
extra_rdoc_files: []
|
|
42
|
+
|
|
43
|
+
files:
|
|
44
|
+
- LICENSE.txt
|
|
45
|
+
- lib/webfontspecimen.rb
|
|
46
|
+
- stylesheets/_webfontspecimen.scss
|
|
47
|
+
- stylesheets/wfs/_960.scss
|
|
48
|
+
- stylesheets/wfs/_base.scss
|
|
49
|
+
- templates/project/_specimen.scss
|
|
50
|
+
- templates/project/manifest.rb
|
|
51
|
+
- templates/project/specimen.html
|
|
52
|
+
has_rdoc: true
|
|
53
|
+
homepage: http://www.oddbird.net/
|
|
54
|
+
licenses: []
|
|
55
|
+
|
|
56
|
+
post_install_message:
|
|
57
|
+
rdoc_options: []
|
|
58
|
+
|
|
59
|
+
require_paths:
|
|
60
|
+
- lib
|
|
61
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
62
|
+
requirements:
|
|
63
|
+
- - ">="
|
|
64
|
+
- !ruby/object:Gem::Version
|
|
65
|
+
segments:
|
|
66
|
+
- 0
|
|
67
|
+
version: "0"
|
|
68
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
69
|
+
requirements:
|
|
70
|
+
- - ">="
|
|
71
|
+
- !ruby/object:Gem::Version
|
|
72
|
+
segments:
|
|
73
|
+
- 0
|
|
74
|
+
version: "0"
|
|
75
|
+
requirements: []
|
|
76
|
+
|
|
77
|
+
rubyforge_project:
|
|
78
|
+
rubygems_version: 1.3.6
|
|
79
|
+
signing_key:
|
|
80
|
+
specification_version: 3
|
|
81
|
+
summary: A Compass port of Nice Web Type's Web Font Specimen tool
|
|
82
|
+
test_files: []
|
|
83
|
+
|