<!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>