var tweeter = Twitcher("where your god now tebow"),
template = '\
<li class="toot"> \
<a class="author" href="http://www.twitter.com/{{from_user}}"> \
<img class="avatar" src="{{profile_image_url}}" /> \
<span class="username">@{{from_user}}</span> \
</a> \
<blockquote class="status"> \
{{text}} \
</blockquote> \
<a class="date" href="http://www.twitter.com/{{from_user}}/status/{{id_str}}">{{created_at}}</a> \
</li> \
',
hogan = Hogan.compile(template);
tweeter.load(function (response) {
var complete = $('.completed'),
status = $('.status'),
tweetHtml = $('.tweets'),
toots = response.results;
complete.html('Completed in: <span class="seconds">' + response.completed_in + '</span> seconds');
if (toots.length) {
$.each(toots, function (i, toot) {
tweetHtml.append(hogan.render(toot));
});
}
});
<h1>Where's your god now Tebow?</h1>
<p class="completed"></p>
<ul class="tweets">
</ul>
<p class="mark">Made by <a href="http://mwunsch.tumblr.com">Mark Wunsch</a></p>
body {
padding: 5px;
color: #404040;
background: #C5C5C5;
font-family: helvetica, arial, sans-serif;
}
h1, .completed, .mark { text-align: center; }
h1 { font-weight: bold; }
.completed, .mark { font-size: 12px; }
.toot {
margin: 5px;
padding: 5px;
border-bottom: 1px solid #adadad;
background: #fff;
}
.author {text-decoration: none;}
.author. avatar, .author .username {display:inline-block; }
.author .username {
line-height: 48px;
height: 48px;
vertical-align: top;
}
.date { font-size: 12px; }
.status {font-family: Georgia, Times, serif; font-size:22px; line-height:28px;}