forked from jxnblk/fitter-happier-text
-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
232 lines (222 loc) · 9.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fitter Happier Text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Avenir Next', 'AvenirNext-SemiBold', 'Futura-Medium', Futura, 'Futura Std', 'Trebuchet MS', Helvetica, Arial, sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .2em;
line-height: 1.5;
padding: 1em 1.5em;
margin: 0 auto;
color: rgba(255,255,255,.8);
background-color: #f40;
background-image: linear-gradient(#f40, #f37);
}
@media (min-width: 40em) {
body {
padding: 1em 3em;
}
}
h1 { font-size: 3rem; font-weight: 600 }
a {
color: rgba(0,0,0,.6);
transition: color .1s ease-out;
text-decoration: none;
background-image: linear-gradient(transparent 50%, rgba(0,0,0,.6) 50%);
background-size: 4px 4px;
background-position: 0 1.125em;
background-repeat: repeat-x;
}
a:hover {
color: white;
background-image: linear-gradient(transparent 50%, white 50%);
}
pre {
font-family: 'Source Code Pro', Consolas, Monaco, monospace;
text-transform: none;
letter-spacing: 0;
padding-top: .25em;
padding-bottom: .25em;
padding: .25em .75em;
overflow-x: scroll;
background-color: rgba(0,0,0,.2);
}
.right-align { text-align: right }
.py2 { padding-top: 2rem; padding-bottom: 2rem; }
.xs-show { display: none }
@media (max-width: 40em) { .xs-show { display: block } }
#carbonads {
display: inline-block;
font-size: 14px;
line-height: 1.25;
text-align: left;
max-width: 320px;
text-transform: none;
}
#carbonads a,
#carbonads a:hover {
text-decoration: none;
color: inherit;
background: none;
}
#carbonads span { display: block }
#carbonads > span::before,
#carbonads > span::after {
content: '';
display: table;
}
#carbonads > span::after {
clear: both;
}
.carbon-img {
float: left;
margin-right: .5em;
}
.carbon-img > img { display: block }
.carbon-text { overflow: hidden }
.carbon-poweredby {
float: left;
margin-top: .25em;
opacity: 0.5;
}
@media (min-width: 32em) {
.table { display: table; table-layout: fixed; width: 100%; }
.table-cell { display: table-cell; vertical-align: middle }
}
</style>
</head>
<body>
<header class="py2">
<div data-fitter-happier-text class="">Fitter Happier Text</div>
<p>
Performant, fully fluid headings
<br class="xs-show">
<a href="http://github.com/jxnblk/fitter-happier-text">View on Github</a>
</p>
</header>
<div class="table">
<div class="table-cell py2">
<iframe src="https://ghbtns.com/github-btn.html?user=jxnblk&repo=fitter-happier-text&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="jxnblk" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="table-cell right-align">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=jxnblkcom" id="_carbonads_js"></script>
</div>
</div>
<section class="py2">
<div data-fitter-happier-text class="">Fitter, happier, more productive</div>
<div data-fitter-happier-text class="">Comfortable</div>
<div data-fitter-happier-text class="">Not drinking too much</div>
<div data-fitter-happier-text class="">Regular exercise at the gym</div>
<div data-fitter-happier-text class="">(Three days a week)</div>
<div data-fitter-happier-text class="">Getting on better with your associate employee contemporaries</div>
<div data-fitter-happier-text class="">At ease</div>
<div data-fitter-happier-text class="">Eating well</div>
<div data-fitter-happier-text class="">(No more microwave dinners and saturated fats)</div>
<div data-fitter-happier-text class="">A patient better driver</div>
<div data-fitter-happier-text class="">A safer car</div>
<div data-fitter-happier-text class="">(Baby smiling in back seat)</div>
<div data-fitter-happier-text class="">Sleeping well</div>
<div data-fitter-happier-text class="">(No bad dreams)</div>
<div data-fitter-happier-text class="">No paranoia</div>
<div data-fitter-happier-text class="">Careful to all animals</div>
<div data-fitter-happier-text class="">(Never washing spiders down the plughole)</div>
<div data-fitter-happier-text class="">Keep in contact with old friends</div>
<div data-fitter-happier-text class="">(Enjoy a drink now and then)</div>
<div data-fitter-happier-text class="">Will frequently check credit at (moral) bank (hole in the wall)</div>
<div data-fitter-happier-text class="">Favors for favors</div>
<div data-fitter-happier-text class="">Fond but not in love</div>
<div data-fitter-happier-text class="">Charity standing orders</div>
<div data-fitter-happier-text class="">On Sundays ring road supermarket</div>
<div data-fitter-happier-text class="">(No killing moths or putting boiling water on the ants)</div>
<div data-fitter-happier-text class="">Car wash</div>
<div data-fitter-happier-text class="">(Also on Sundays)</div>
<div data-fitter-happier-text class="">No longer afraid of the dark or midday shadows</div>
<div data-fitter-happier-text class="">Nothing so ridiculously teenage and desperate</div>
<div data-fitter-happier-text class="">Nothing so childish, at a better pace</div>
<div data-fitter-happier-text class="">Slower and more calculated</div>
<div data-fitter-happier-text class="">No chance of escape</div>
<div data-fitter-happier-text class="">Now self-employed</div>
<div data-fitter-happier-text class="">Concerned (but powerless)</div>
<div data-fitter-happier-text class="">An empowered and informed member of society</div>
<div data-fitter-happier-text class="">(Pragmatism not idealism)</div>
<div data-fitter-happier-text class="">Will not cry in public</div>
<div data-fitter-happier-text class="">Less chance of illness</div>
<div data-fitter-happier-text class="">Tires that grip in the wet</div>
<div data-fitter-happier-text class="">(Shot of baby strapped in back seat)</div>
<div data-fitter-happier-text class="">A good memory</div>
<div data-fitter-happier-text class="">Still cries at a good film</div>
<div data-fitter-happier-text class="">Still kisses with saliva</div>
<div data-fitter-happier-text class="">No longer empty and frantic like a cat tied to a stick</div>
<div data-fitter-happier-text class="">That's driven into frozen winter shit</div>
<div data-fitter-happier-text class="">(The ability to laugh at weakness)</div>
<div data-fitter-happier-text class="">Calm</div>
<div data-fitter-happier-text class="">Fitter</div>
<div data-fitter-happier-text class="">Healthier and more productive</div>
<div data-fitter-happier-text class="">A pig in a cage on antibiotics</div>
</section>
<section class="py2">
<h1>Usage</h1>
<p>
<a href="https://github.com/jxnblk/fitter-happier-text/archive/0.0.1.zip">Download source</a>
or install via NPM:
</p>
<pre>
npm install fitter-happier-text
</pre>
<p>
Link to fitter-happier-text and pass it a nodelist.
</p>
<pre>
var nodes = document.querySelectorAll('[data-fitter-happier-text]');
fitterHappierText(nodes);
</pre>
<p><small>
Since this is based on the SVG text element, no JavaScript resize events are fired –
JavaScript is only used on initial load.
<!--
For a Gulpjs-based preprocessed example, see the README on Github.
-->
</small></p>
<h1><a href="http://github.com/jxnblk/fitter-happier-text">View on Github</a></h1>
</section>
<footer class="py2">
<p>
Inspired by
<a href="http://fittextjs.com/">FitText</a>
<br class="xs-show">
<br class="xs-show">
Lyrics by
<a href="https://www.youtube.com/watch?v=laoq1eeIUxQ">Radiohead</a>
<br class="xs-show">
<br class="xs-show">
<a href="http://jxnblk.com">Made by Jxnblk</a>
</p>
</footer>
<script src="dist/fitter-happier-text.js"></script>
<script>
var nodes = document.querySelectorAll('[data-fitter-happier-text]');
fitterHappierText(nodes, { baseline: 16 });
</script>
<script type="text/javascript">
WebFontConfig = { google: { families: [ 'Source+Code+Pro::latin' ] } };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</body>
</html>