Dynamically Shrinking Titles

dst.coffee

# insert this somewhere right after document.load
@header = $('.header')
while (@header.height() > @header.parent().height())
    currentFontSize = parseInt(@header.css("font-size"))
    @header.css("font-size", currentFontSize - 1)

dst.haml

.header-wrapper
    %h1.header= @title # dynamic title text

dst.scss

$title-width: 560px;
$title-height: 50px;
$title-font-size: 28px;

.header-wrapper{
    width: $title-width;
    height: $title-height;
    overflow:hidden;

    .header{
        line-height: $title-height;
        font-size: $title-font-size;
        font-weight: bold;
        //..... other stylings
    }
}