Chameleon

by AaronLayton

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans"></script>
<div class="span5">
    <div class="panel bar-red">
        <h2 class="netflix">Netflix</h2>
        <p>Coming soon</p>
        <div style="height:200px"></div>
        <h3>Recently viewed</h3>
    </div>
</div>
<div class="span10">
    <div class="panel bar-green">
        <h2 class="music">Music</h2>
        <div class="mPanel">
            <img src="http://www.blogcdn.com/www.aolradioblog.com/media/2009/08/muse-resistance.jpg" alt="Muse" class="album-cover" />
            <h3>MUSE</h3>
            <h4>The Resistance</h4>
            <div class="seeker"> 1:45:00 </div>
        </div>
    </div>
</div>
<div class="span5 pull-right">
    <div class="panel bar-cyan">
        <h2 class="twitter">Twitter</h2>
        <ul id="tweets">
            
        </ul>
    </div>
</div>
<div class="span10">
    <div class="panel bar-blue">
        <h2 class="facebook">Facebook</h2>
        <p>Coming soon</p>
    </div>
</div>

<div class="footer-controls">
    <div class="panel span3">
        <div class="pcontent">
            &nbsp;
        </div>
    </div>
    <div class="panel span15 flinks">
        <div class="pcontent">
            
            <a href="#">
                <img src="https://lh3.googleusercontent.com/AjcCZBRJZTc5nGniZnBrdwxUWmAdS0Vsi_cXF9HybfayggZRS0Uj1pO0axh1P7YwC9kOzEo6=s50-h50-e365" />Github
            </a>
            
            <a href="#">
                <img src="https://lh6.googleusercontent.com/DLaZDFm1ocpFFLiiDMD0uBp1w7vgPRt8xx211wnZXFUOloEBuE-GC9Qw9hVPn5QQtVZjTHv0Vd8=s50-h50-e365" />GMail
            </a>
            
            <a href="#">
                <img src="https://lh4.googleusercontent.com/pjRTq-MfZ3Alj49ZoWTtLWv9CYDHxF85DCrI0ZxRuWByIwSVuZapUYjoXvAcyJ2pzmLPk67PdiM=s50-h50-e3655" />Music
            </a>
            
            <a href="#">
                <img...

SCSS

@mixin columns($n){
    float:left;
    width:(5 * $n)%;
}

.span5 { @include columns(5); height:100%; }
.span2 { @include columns(2); }
.span3 { @include columns(3); }
.span4 { @include columns(4); }
.span10 { @include columns(10); height:50%;}
.span15 { @include columns(15); }
.span8 { @include columns(8); }
.span8 { @include columns(8); }

.pull-right { float:right; }
div[class*='span'] {
background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 1%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(1%,rgba(0,0,0,0.3)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 1%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 1%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 1%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(-45deg,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 1%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

html, body { width:100%;height:100%; }

html { 
    background:url(http://humjournal.com/elephant/wp-content/uploads/woodgrain.jpg) no-repeat top center;
    background-size:cover;
    -webkit-box-shadow: inset 0px 0px 100px 0px rgba(0,0,0,1); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
          box-shadow: inset 0px 0px 100px 0px rgba(0,0,0,1); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
body {
    color:#ddd;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-shadow: 2px 2px 1px #000;
}
.footer-controls {
   ...

JavaScript

String.prototype.parseUsername = function() {
    return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
        var username = u.replace("@","")
        return u.link("http://twitter.com/"+username);
    });
};

$.fn.tweets = function(options) {
    $.ajaxSetup({ cache: true });
    var defaults = {
        tweets: 5,
        before: "<li>",
        after: "</li>"
    };
    var options = $.extend(defaults, options);
    return this.each(function() {
        var obj = $(this);
        $.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?callback=?&count=' + options.tweets + '&screen_name='+options.username,
            function(data) {
                $.each(data, function(i, tweet) {
                    if(tweet.text !== undefined) {
                        
                        var thisTweet = tweet.text;
                        
                        thisTweet  = thisTweet.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function(url) {
            return '<a href="'+url+'">'+url+'</a>';
        }).replace(/B@([_a-z0-9]+)/ig, function(reply) {
            return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
        });
                        
                        thisTweet = thisTweet.parseUsername();
                        
                        $(obj).append(options.before+thisTweet+options.after);
                    }
                });
            }
        );
    });
};

$('#tweets').tweets({
    tweets:15,
    username: "aaronlayton"
});