JSFiddle - React, Tailwind, and code Playground

by davidpett

HTML

<link rel="stylesheet" href="https://dl.dropbox.com/u/1640776/ostrich-sans-fontfacekit/stylesheet.css">
<header class="site">
    <div class="title">david pett</div>
    <img class="avatar" src="http://a0.twimg.com/profile_images/1666407315/cropped_square_bigger.jpg"></div>
</header>

CSS

header.site {
    height: 100px;
    position: relative;
    text-align: center;
    width: 100%;
}
header.site .title {
    color: #dedede;
    font-family: 'OstrichSansBold';
    font-weight: normal;
    font-style: normal;
}
header.site .avatar {
    border-radius: 100px;
    height: 100px;
    left: 50%;
    margin-left: -50px;
    position: absolute;
    top: 0;
    width: 100px;
}

JavaScript

var oneliner = (function ($) {
    function px2num(value) {
        return Number(value.split('px')[0]);
    }
    function num2px(value) {
        return String(value + 'px');
    }
    function getHeight() {
        return el.height();
    }
    function getSize() {
        return px2num(el.css('font-size'));
    }
    function setSize(value) {
        size = value;
        el.css('font-size', num2px(size));
        el.css('line-height', num2px(size));
    }
    function checkSize() {
        if (getHeight() < getSize() * 2) {
            setSize(size + 1);
            checkSize();
        } else {
            setSize(size - 2);
        }
    }
    return {
        el: null,
        height: null,
        size: null,
        init: function (value) {
            el = $(value);
            if (el.length === 0) { return; }

            height = getHeight();
            size = getSize();
            checkSize();
        }
    };
})(jQuery);

oneliner.init('.title');