spf13.com/assets/css/media/_desktop.scss

/* min-width: 1024px (xga), 1200px (wxga), 1600px (uxga) */

@media screen and (min-width: #{1024/$em}em) {
    #tags {
        line-height: 1.6;
    }

    #main > div, footer > div, #meta > div, #meta > section, #content, #comments > div {
        max-width:38em;
    }

    h1 {
        margin-top: emStep(4);
    }

    body > section, body > aside, body > footer, body > .content {
        @include fontsize(3);
    }

    #logo {
        font-size: 12em;
        line-height: .5em;
        text-align:center;
        margin: .2em;
    }

    #header {
        figure > img {
                width: 10em;
            }
    }

    #nav {
        padding-top: 2.5em;
        font-size: 130%;
    }

    #mainnav {
        span.icon {
            margin-bottom: emStep(1);
        }
    }

}

@media screen and (min-width: #{1200/$em}em) {

    #tags {
        line-height: 1.7;
        margin-left: -5px;
    }

    h1 {
        margin: emStep(4) 0 emStep(4);
    }

    #social, .dropdown {
        @include visible;
        line-height: 1.3em;
    }

    #social {
        position: absolute;
        bottom: 2em;
        width:90%;
        left: 5%;
    }

    #header:hover {
        opacity: 1;
    }

    #mainnav {
        span.icon {
            font-size: 1.8em;
        }

        li {
            font-size: 100%;
        }
    }

    #logo {
        font-size: 8em;
        line-height: .7em;
        text-align:center;
        margin: .2em;
    }


    #header {
        position: fixed;
        left:0;
        margin: 0;
        @include colwidth(2.5);
//        background: $silver;
        color: $wet-asphalt;
        height: 100%;
        opacity: .5;
        @include easeout(.7);


        & > figure {
            // display: inline-block;
            @include colwidth(12);
            @include colmargin(0);
            //float: left;
            //margin-left: 4%;
            //margin-right: 1.2em;

            & > img {
                width: 8em;
            }
        }

        nav {
            @include colwidth(12);
            @include colmargin(0);
            font-size: 110%;
            padding-top: emStep(8);

            &> ul {
                display: block;
            }

            li {
                width: 30%;
            }

            .social li {
                    /*display:block;*/
                    margin:0 -2px 0 -2px;
                    width: 49% !important;
                }
        }

    }

    body > section, body > aside, body > .content, body > footer, #comments {
        margin: 1em ($column * ($margin_cols/2)) 0 ($column * 4);
        @include fontsize(3);
        @include clearfix;
    }

    #byline {
        @include visible;
        @include colwidth(7);
        text-align: center;
        @include fontsize(3);
        padding-top: .95em;
    }

    #nav {
        padding-top: 0em;
        @include colmargin(1);
        @include colwidth(6);
    }

}

@media screen and (min-width: #{1440/$em}em) {
    #logo {
        font-size: 10em;
        line-height: .4em;
    }

    #mainnav li {
        font-size: 115%;
    }

}

@media screen and (min-width: #{1600/$em}em) {

    #mainnav li {
        font-size: 130%;
    }

    #byline {
        @include fontsize(6);
        padding-top: .7em;
    }

    #meta {
        right:0;
        /*top: 7.1em;*/
        top: 0;
        margin-right:1em;
        position: fixed;
        height: 100%;
        text-align: left;
        @include colwidth(2.5);
        @include colmargin(0);
        padding: 1em;
        /*opacity: .5;*/
        @include fontsize(1);
        // background: $midnight-blue;
        @include easeout(.7);
        // color: $clouds;
    }

    #logo {
        font-size: 12em;
        line-height: .4em;
        margin-right: .2em;
    }

    #meta > div {
        width:100%;
    }

    #meta > div > section, #meta > div > ul {
        @include colwidth(12);
        line-height: 1.9;
    }

    #date {
        margin-top: 1em;
    }

    #meta:hover {
        opacity: 1;
    }

    body > section, body > aside, body > .content, body > footer, #comments {
        margin: 1em ($column * 3) 0 ($column *  3);
        @include fontsize(4);
        @include clearfix;
    }

    #nav {
        padding-top: 2.3em;
        @include colmargin(1);
        @include colwidth(5);
    }

    #header {
        @include colwidth(2.5);
    }


}