Some Really Totally Awesome Text

by JamesKyle

HTML

<a href="https://twitter.com/#!/thejameskyle" target="_blank"><div><span class="awesome">Here is some <br/> really totally awesome <br/> text. Hooray!<br/></br>Follow @thejameskyle</span></div></a>

<!--
 © James Kyle (@thejameskyle)
 Free to use and share  under 
 the  condition that  at very 
 least my  twitter handle  is 
 mentioned.  Seriously  guys,
 for whatever reason my stuff
 gets stolen  all the friggin
 time and  I am sooooooo sick
 of it.  So if you could just
 do me this one solid,  and I
 promise  I will  present you
 with more  solids.  Like so:
 https://youtu.be/cZO9tMetxno
 
 Love you all!!! Follow me :)
-->

CSS

html {
    font-size: 205%;
    background: #252525;
    min-width: 28.8em;
}

span.awesome {           
    display: block;
    padding: 1em;
    background-color: #252525; color: #FFF; text-shadow: rgba(0,0,0,0.1) 0 -2px 0;
    font: 1em/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 900; text-transform: uppercase;
}

span.awesome > span {
    display: inline-block;
    width: 100%; height: 1.63em;
}

span.awesome > span > span {
    margin-right: 0.85em;
    
}

span.awesome > span > span > span {
    display: inline-block;
    width: 1.1em; padding: 0; margin: 0 0 0 0.05em;
    text-align: center;
    color: rgba(255,255,255,0.85); text-shadow: rgba(0,0,0,0.9) 0 1px 3px;
    background: rgba(0,0,0,0.4);
    border-radius: 0.1em;
    box-shadow: rgba(255,255,255,0.1) 0 1px 1px, rgba(0,0,0,0.4) 0 -1px 1px;
    border-bottom: rgba(0,0,0,0.3) 0.05em solid;
    border-top: rgba(255,255,255,0.2) 0.08em solid;
}

span.awesome > span:nth-child(n+2) > span.word1 {
    width: 0; margin-right: 0;
}

JavaScript

// LETTERING.JS

(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ...