New Tweet

by lovromar

HTML

<div class="profile-pane">
    
    <div class="profile-pane__shortcuts">
        <ul>
            <li class="connect">
                <a href="https://twitter.com/_joshnh">@</a>
            </li>
            <li class="messages  notification">
                <a href="https://twitter.com/_joshnh">&#xf0e0;</a>
            </li>
            <li class="stars">
                <a href="https://twitter.com/_joshnh/favorites">&#xf005;</a>
            </li>
            <li class="lists">
                <a href="https://twitter.com/_joshnh/lists">&#xf0ca;</a>
            </li>
            <li class="lists">
                <a href="https://twitter.com/_joshnh">&#xf013;</a>
            </li>
        </ul>
    </div>
    
    <div class="profile-pane__header">
        <a href="https://twitter.com/_joshnh">
            <div class="profile-pane__header__avatar"></div>
            <p class="profile-pane__header__name">Joshua Hibbert</p>
            <p class="profile-pane__header__username">@_joshnh</p>
        </a>
    </div>
    
    <div class="profile-pane__summary">
        <ul>
            <li>
                <a href="https://twitter.com/_joshnh">
                    <dl>
                        <dd>7,802</dd>
                        <dt>Tweets</dt>
                    </dl>
                </a>
            </li>
            <li>
                <a href="https://twitter.com/_joshnh/following">
                    <dl>
                        <dd>35</dd>
                        <dt>Following</dt>
                    </dl>
                </a>
            </li>
            <li>
                <a href="https://twitter.com/_joshnh/followers">
                    <dl>
                        <dd>922</dd>
                        <dt>Followers</dt>
                    </dl>
                </a>
            </li>
        </ul>
    </div>
    
    <form class="profile-pane__new-tweet">
        <textarea id="newTweet"  class="profile-pane__new-tweet__input"...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@font-face {
    font-family: 'awesome';
    src: url('https://raw.github.com/FortAwesome/Font-Awesome/master/font/fontawesome-webfont.eot');
    src: url('https://raw.github.com/FortAwesome/Font-Awesome/master/font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://raw.github.com/FortAwesome/Font-Awesome/master/font/fontawesome-webfont.woff') format('woff'),
        url('https://raw.github.com/FortAwesome/Font-Awesome/master/font/fontawesome-webfont.ttf') format('truetype'),
        url('https://raw.github.com/FortAwesome/Font-Awesome/master/font/fontawesome-webfont.svg#AwesomeRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #e8e0c6;
    color: #444;
    font: 100%/1.5 'Open Sans', sans-serif;
    overflow-y: scroll;
    padding: 6em;
}
.profile-pane {
    background-color: #fff;
    box-shadow: 0 .1em .25em hsla(0,0%,0%,.1);
    margin: 0 auto;
    width: 22.5em;
}
.profile-pane a {
    color: #444;
    text-decoration: none;
    -webkit-transition: .25s;
       -moz-transition: .25s;
        -ms-transition: .25s;
         -o-transition: .25s;
            transition: .25s;
}
.profile-pane a:hover,
.profile-pane a:focus {
    color: #39c;
}
.profile-pane__shortcuts li {
    display: inline-block;
    margin-right: -.25em;
    width: 20%;
    vertical-align: top;
}
.profile-pane__shortcuts a {
    border-left: 1px solid #ddd;
    box-sizing: border-box;
    color: #888;
    display: block;
    font-family: awesome;
    height: 3em;
    line-height: 3.2;
    text-align: center;
}
.profile-pane__shortcuts li:first-child a {
    border: 0;
}
.profile-pane__shortcuts .connect a {
    font-family: sans-serif;
    font-weight: bold;
    line-height: 3.1;
}
.profile-pane__shortcuts .notification {
    position: relative;
}
.profile-pane__shortcuts .notification:after {
    background-color: #39c;
    bottom:...

JavaScript

(function($) {

// Autosize 1.15.2 - jQuery plugin for textareas
// (c) 2012 Jack Moore - jacklmoore.com
// license: www.opensource.org/licenses/mit-license.php

    var
    defaults = {
        className: 'autosizejs',
        append: "",
        callback: false
    },
    hidden = 'hidden',
    borderBox = 'border-box',
    lineHeight = 'lineHeight',

    // border:0 is unnecessary, but avoids a bug in FireFox on OSX (http://www.jacklmoore.com/autosize#comment-851)
    copy = '<textarea tabindex="-1" style="position:absolute; top:-9999px; left:-9999px; right:auto; bottom:auto; border:0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden;"/>',

    // line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
    copyStyle = [
        'fontFamily',
        'fontSize',
        'fontWeight',
        'fontStyle',
        'letterSpacing',
        'textTransform',
        'wordSpacing',
        'textIndent'
    ],
    oninput = 'oninput',
    onpropertychange = 'onpropertychange',

    // to keep track which textarea is being mirrored when adjust() is called.
    mirrored,

    // the mirror element, which is used to calculate what size the mirrored element should be.
    mirror = $(copy).data('autosize', true)[0];

    // test that line-height can be accurately copied.
    mirror.style.lineHeight = '99px';
    if ($(mirror).css(lineHeight) === '99px') {
        copyStyle.push(lineHeight);
    }
    mirror.style.lineHeight = '';

    $.fn.autosize = function (options) {
        options = $.extend({}, defaults, options || {});

        if (mirror.parentNode !== document.body) {
            $(document.body).append(mirror);
        }

        return this.each(function () {
            var
            ta = this,
            $ta = $(ta),
            minHeight = $ta.height(),
            maxHeight =...