Skip to content

Commit 168bda2

Browse files
author
Nathan Ford
committed
Changed to type.js, fixed run order, improved widow-adjust.
1 parent 6049138 commit 168bda2

File tree

72 files changed

+127177
-190
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+127177
-190
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
Typo.js
1+
Type.js
22
=======
33

4-
Typo.js adds new type properties to your CSS, giving you the control you need for type on the web. You can write these properties in your CSS and they will work like any other property.
4+
Type.js adds new type properties to your CSS, giving you the control you need for type on the web. You can write these properties in your CSS and they will work like any other property.
55

66
View `demo.html` to see these new properties in action.
77

@@ -98,7 +98,7 @@ h1 {
9898

9999
## Issues
100100

101-
Typo.js only works within `style` tags on a page. For now. You can try using your external stylesheets by changing an option in the `typo.js` file. Change:
101+
Type.js only works within `style` tags on a page. For now. You can try using your external stylesheets by changing an option in the `type.js` file. Change:
102102

103103
```JS
104104
stylefill.options({
@@ -117,4 +117,4 @@ stylefill.options({
117117
});
118118
```
119119

120-
_Note:_ This will cause the browser to download your external CSS files twice. Once, as per usual, and again to read the `typo.js` property values.
120+
_Note:_ This will cause the browser to download your external CSS files twice. Once, as per usual, and again to read the `type.js` property values.

‎css/styles.css

Lines changed: 357 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,357 @@
1+
/*
2+
3+
Type.js CSS
4+
5+
Developed by Nathan Ford
6+
7+
INDEX
8+
1. Reset
9+
2. Clearfix
10+
3. General styles
11+
12+
/* 1. Reset ---------------------------------------- */
13+
14+
html, body, div, span, object, iframe,
15+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
16+
abbr, address, cite, code,
17+
del, dfn, em, img, ins, kbd, q, samp,
18+
small, strong, sub, sup, var,
19+
b, i,
20+
dl, dt, dd, ol, ul, li,
21+
fieldset, form, label, legend,
22+
table, caption, tbody, tfoot, thead, tr, th, td,
23+
article, aside, canvas, details, figcaption, figure,
24+
footer, header, hgroup, menu, nav, section, summary,
25+
time, mark, audio, video {
26+
margin: 0;
27+
padding: 0;
28+
border: 0;
29+
outline: 0;
30+
font-size: 100%;
31+
vertical-align: baseline;
32+
background: transparent;
33+
}
34+
35+
h1 {
36+
font-size: 3em;
37+
font-size: 4vw;
38+
max-font-size: 50px;
39+
min-font-size: 30px;
40+
}
41+
42+
html {
43+
font-size: 62.5%;
44+
}
45+
46+
body {
47+
line-height: 1;
48+
}
49+
50+
article,aside,details,figcaption,figure,
51+
footer,header,hgroup,menu,nav,section {
52+
display: block;
53+
}
54+
55+
nav ul {
56+
list-style: none;
57+
}
58+
59+
blockquote, q {
60+
quotes: none;
61+
}
62+
63+
blockquote:before, blockquote:after,
64+
q:before, q:after {
65+
content: '';
66+
content: none;
67+
}
68+
69+
a {
70+
margin: 0;
71+
padding: 0;
72+
font-size: 100%;
73+
vertical-align: baseline;
74+
background: transparent;
75+
}
76+
77+
ins {
78+
background-color: #ff9;
79+
color: #000;
80+
text-decoration: none;
81+
}
82+
83+
mark {
84+
background-color: #ff9;
85+
color: #000;
86+
font-style: italic;
87+
font-weight: bold;
88+
}
89+
90+
del {
91+
text-decoration: line-through;
92+
}
93+
94+
abbr[title], dfn[title] {
95+
border-bottom: 1px dotted;
96+
cursor: help;
97+
}
98+
99+
table {
100+
border-collapse: collapse;
101+
border-spacing: 0;
102+
}
103+
104+
/* change border colour to suit your needs */
105+
hr {
106+
display: block;
107+
height: 1px;
108+
border: 0;
109+
border-top: 1px solid #cccccc;
110+
margin: 1em 0;
111+
padding: 0;
112+
}
113+
114+
input, select {
115+
vertical-align:middle;
116+
}
117+
118+
/* 2. Clearfix -------------------------------- */
119+
/* More info: http://nicolasgallagher.com/micro-clearfix-hack/
120+
121+
For modern browsers */
122+
.clearfix:before,
123+
.clearfix:after {
124+
content: "";
125+
display: table;
126+
}
127+
128+
.clearfix:after {
129+
clear: both;
130+
}
131+
132+
/* For IE 6/7 (trigger hasLayout) */
133+
.clearfix {
134+
zoom:1;
135+
}
136+
137+
/* 3. General styles -------------------------------- */
138+
139+
@font-face {
140+
font-family: 'ClearSans';
141+
src: url('../fonts/clearsans-new/WOFF2/clear-sub.woff2') format('woff2'),
142+
url('../fonts/clearsans-new/WOFF/clear-sub.woff') format('woff'),
143+
url('../fonts/clearsans-new/TTF/clear-sub.ttf') format('truetype');
144+
font-weight: normal;
145+
font-style: normal;
146+
}
147+
148+
@font-face {
149+
font-family: 'ClearSans';
150+
src: url('../fonts/clearsans-new/WOFF2/clear-bold-sub.woff2') format('woff2'),
151+
url('../fonts/clearsans-new/WOFF/clear-bold-sub.woff') format('woff'),
152+
url('../fonts/clearsans-new/TTF/clear-bold-sub.ttf') format('truetype');
153+
font-weight: 700;
154+
font-style: normal;
155+
}
156+
157+
@font-face {
158+
font-family: 'ClearSans';
159+
src: url('../fonts/clearsans-new/WOFF2/clear-italic-sub.woff2') format('woff2'),
160+
url('../fonts/clearsans-new/WOFF/clear-italic-sub.woff') format('woff'),
161+
url('../fonts/clearsans-new/TTF/clear-italic-sub.ttf') format('truetype');
162+
font-weight: normal;
163+
font-style: italic;
164+
}
165+
166+
@font-face {
167+
font-family: 'ClearSans';
168+
src: url('../fonts/clearsans-new/WOFF2/clear-bolditalic-sub.woff2') format('woff2'),
169+
url('../fonts/clearsans-new/WOFF/clear-bolditalic-sub.woff') format('woff'),
170+
url('../fonts/clearsans-new/TTF/clear-bolditalic-sub.ttf') format('truetype');
171+
font-weight: 700;
172+
font-style: italic;
173+
}
174+
175+
body {
176+
padding: 10% 40% 10% 20%;
177+
font-size: 1.2vw;
178+
line-height: 1.65;
179+
font-family: "ClearSans", "Hevetica Neue", Arial, sans-serif;
180+
letter-spacing: 0.005em;
181+
color: #333;
182+
}
183+
184+
@media only screen and (max-width: 820px) {
185+
186+
body {
187+
padding: 10% 20% 10% 10%;
188+
}
189+
190+
}
191+
192+
@media only screen and (max-width: 520px) {
193+
194+
body {
195+
padding: 5%;
196+
}
197+
198+
}
199+
200+
h1 {
201+
font-size: 3.5em;
202+
margin-bottom: 0;
203+
}
204+
205+
#site-header h1 {
206+
color: #A95472;
207+
font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
208+
font-weight: normal;
209+
}
210+
211+
h2 {
212+
font-size: 1.5em;
213+
font-weight: normal;
214+
margin: 0.25em 0 1em;
215+
}
216+
217+
section h2 {
218+
padding-top: 1em;
219+
padding-bottom: 0.25em;
220+
border-bottom: 1px dotted #C1C6C9;
221+
margin-top: 1em;
222+
}
223+
224+
h3, h4 {
225+
font-size: 1.2em;
226+
margin-top: 1.5em;
227+
}
228+
229+
h4 {
230+
font-size: 1em;
231+
letter-spacing: 0.02em;
232+
text-transform: uppercase;
233+
font-weight: normal;
234+
font-size: 0.9em;
235+
}
236+
237+
p {
238+
max-width: 33em;
239+
}
240+
241+
p + p {
242+
margin-top: 0.5em;
243+
}
244+
245+
p code {
246+
line-height: 1;
247+
color: #7D8184;
248+
}
249+
250+
a {
251+
text-decoration: none;
252+
color: #952A50;
253+
}
254+
255+
a:hover {
256+
color: #000;
257+
text-decoration: underline;
258+
}
259+
260+
a:active {
261+
color: #222;
262+
}
263+
264+
p a {
265+
text-decoration: underline;
266+
}
267+
268+
li {
269+
display: block;
270+
margin-bottom: 0.5em;
271+
color: #999;
272+
}
273+
274+
li p {
275+
color: #333;
276+
}
277+
278+
code, pre {
279+
font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
280+
}
281+
282+
figure {
283+
margin: 1em 0 1.5em;
284+
}
285+
286+
h4 + * {
287+
margin-top: 0.3em;
288+
}
289+
290+
pre, .box {
291+
padding: 1em;
292+
background-color: #ecf1f4;
293+
border-radius: 3px;
294+
border: 1px solid #e2e7ea;
295+
}
296+
297+
pre {
298+
overflow: auto;
299+
font-size: 0.9em;
300+
}
301+
302+
figcaption {
303+
font-size: 0.8em;
304+
color: #999;
305+
}
306+
307+
pre + figcaption {
308+
background-color: #4A4D51;
309+
color: #fff;
310+
border-radius: 3px;
311+
margin-top: 0.25em;
312+
padding: 0.5em 1.3em;
313+
}
314+
315+
.button {
316+
font-size: 1em;
317+
color: #fff;
318+
border: 1px solid #4A4D51;
319+
background-color: #A95472;
320+
padding: 0.5em 0.8em;
321+
border-radius: 3px;
322+
display: inline-block;
323+
vertical-align: middle;
324+
}
325+
326+
.button:hover {
327+
background-color: #4A4D51;
328+
color: #fff;
329+
text-decoration: none;
330+
}
331+
332+
.detail {
333+
display: inline-block;
334+
vertical-align: middle;
335+
font-size: 0.8em;
336+
color: #7D8184;
337+
line-height: 1;
338+
margin-left: 1em;
339+
}
340+
341+
#site-header {
342+
padding-bottom: 2em;
343+
}
344+
345+
#download {
346+
margin-bottom: 2em;
347+
}
348+
349+
#site-footer {
350+
margin-top: 3em;
351+
padding-top: 1em;
352+
border-top: 1px dotted #d8dde0;
353+
}
354+
355+
#site-footer p {
356+
font-size: 0.8em;
357+
}

0 commit comments

Comments
 (0)