jrnl/_static/less/jrnl.less

@import "retina";
@import "3L";

@white: #f7f8f9;
@blue: #5e7dc5;
@blue-light: #7c95ca;
@terminal: #2f1e34;
@purple: #47375d;
@purple-shade: #413155;
@purple-light: #725794;
@purple-light-shade: #564371;
@orange: #deaa09;

.normalize();
@import "docs.less";

.icon,
    {
    .sprite("../img/icons.png", 32px, 5, 3, 8px);
    &.secure {.sprite(0, 0)};
    &.future {.sprite(1, 0)};
    &.search {.sprite(2, 0)};
    &.nli    {.sprite(3, 0)};
    &.share  {.sprite(0, 1)};
    &.sync   {.sprite(0, 1)};
    &.dayone {.sprite(1, 1)};
    &.github {.sprite(2, 1)};
    &.folders{.sprite(3, 1)};
    &.cal    {.sprite(4, 1)};
    &.left   {.sprite(0, 2)};
    &.right  {.sprite(1, 2)};
    &.info   {.sprite(2, 2)};
    }

.pre-block
    {
    background: @terminal;
    .border-radius(6px);
    padding: 1px 20px;
    margin: 40px auto;
    width: 500px;
    .box-shadow(0px 1px 8px darken(@white, 30));
    position: relative;
    color: @white;
    font-family: "Monaco", "Courier New";
    font-size: 12pt;
    #args {color: #f6f7b9}
    #output {color: #9278b5}
    }

.terminal
    {
    .pre-block;
    @p: 20px;
    padding: @p + 30px @p (@p - 10px) @p;
    &:before
        {
        content: "Terminal";
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        .box-shadow(inset 0px 1px 0px #f4f4f4, inset 0px -1px 0px #888);
        margin-top: -50px;
        // margin: -@p -@p 0px -@p;
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #777;
        text-shadow: 0px 1px 0px #ddd;
        .border-radius(5px 5px 0px 0px);
        .gradient(#eaeaea, #bababa);
        }
    &:after
        {
        content: "";
        width: 48px;
        height: 30px;
        position: absolute;
        top: 0px;
        left: 10px;
        background: url(../img/terminal.png) no-repeat center center;
        }
    }

body#landing
    {
    background-color: @purple;
    font-family: "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: 300;
    #twitter
        {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        border: 1px solid @purple;
        padding: 5px 10px 5px 30px;
        color: @purple;
        .border-radius(3px);
        .opacity(.7);
        background: url(../img/twitter.png) 8px center no-repeat transparent;
        &:hover, &:active
            {
            .opacity(1);
            text-decoration: none;
            }
        }
    #title, .row3, .row4, #prompt
        {
        width: 900px;
        margin: 0px auto;
        }
    #upper
        {
        .clearfix;
        background: @white;
        .box-shadow(inset 0px -6px 6px -3px darken(@white, 10));
        #title
            {
            width: 650px;
            margin: 150px auto 75px auto;
            }
        img
            {
            float: left;
            margin-right: 30px;
            }
        h1
            {
            color: @purple-light-shade;
            font-weight: 300;
            }
        #prompt
            {
            width: 640px;
            margin: 0 auto;
            .clearfix;
            }
        .terminal
            {
            .border-radius(6px 6px 0px 0px);
            float: left;
            margin: 0px;
            width: 500px;
            min-height: 134px;
            .border-box-sizing;
            }
        .pleft, .pright
            {
            text-align: center;
            .border-box-sizing;
            float: left;
            padding-top: 50px;
            width: 70px;
            i {.opacity(60);}
            i:hover {.opacity(1000); cursor: pointer;}
            }
        }
    #nav
        {
        .gradient(@blue-light, @blue);
        height: 60px;
        .box-shadow(0px 6px 6px -3px @purple-shade);
        text-align: center;
        a#twitter-nav {display: none;}
        a
            {
            color: @white;
            text-shadow: 0px -1px 0px darken(@blue, 30);
            text-decoration: none;
            font-size: 14pt;
            line-height: 60px;
             margin: 0 40px;
             &:hover
                {
                color: lighten(@orange, 20);
                text-shadow: 0px -1px 0px darken(@orange, 15);
                }
            }
        a.cta
            {
            .gradient(@purple-light, @purple-light-shade);
            .box-shadow(0px 1px 0px @purple-shade);
            .border-radius(5px);
            padding: 6px 10px 5px 10px;
            white-space: nowrap;
            &:hover
                {
                .gradient(lighten(@orange, 10), darken(@orange, 5));
                .box-shadow(0px 1px 0px darken(@orange, 15));
                text-shadow: 0px -1px 0px darken(@orange, 15);
                color: @white;

                }
            }
        }
    #lower
        {
        color: @white;
        padding-top: 40px;
        a
            {
            color: @orange;
            text-decoration: none;
            &:hover
                {
                color: lighten(@orange, 20);
                text-decoration: underline;
                }
            }
        .row3, .row4 {
            .clearfix;
            margin-bottom: 20px;
            .col
                {
                position: relative;
                padding-left: 40px;
                i
                    {
                    position: absolute;
                    left: 0;
                    top: 16px;
                    }
                h3 {font-size: 12pt; margin-bottom: .5em;}
                p {font-size: 10pt; margin: 0;}
                float: left;
                width: 25%;
                padding-right: 2%;
                .border-box-sizing;
                &:last-child {padding-right: 0;}
                }
        }
        .row3 .col { width: 33.3333%; }
        .row4 .col { color: mix(@white, @purple, 80); i {.opacity(80);}}
        }
    }

@media screen and (max-width: 680px)
    {
    body#landing
        {
        #nav
            {
            height: auto;
            padding-bottom: 10px;
            a, a#twitter-nav
                {
                display: block;
                }
            a.cta
                {
                margin: 10px;
                padding: 1px;
                }
            }
        #upper
            {
            #twitter { display: none;}
            #title
                {
                    margin: 30px 0 10px 0;
                }
            #logo
                {
                backgound: red;
                display: block;
                float: none;
                margin: 0px auto;
                }
            #title br {display: none;}
            .pleft, .pright {display: none;}
            #prompt, #title
                {
                width: 100%;
                .border-box-sizing;
                padding: 0px 20px;
                }
            .terminal
                {
                width: 100%;
                }
            }
        }
    }

@media screen and (max-width: 900px)
    {
    body#landing
        {
        #lower
            {
            padding: 40px 20px;
            .row3, .row4
                {
                margin: 0px;
                width: auto;
                }
            .row3 .col, .row4 .col
                {
                float: none;
                width: 100%;
                text-align: center;
                padding: 0px;
                margin: 0 0 40px 0;
                h3 {font-size: 1.5em;}
                p {font-size: 1em;}

                i
                    {
                    position: static;
                    margin-bottom: -20px;
                    }
                }
            }
        }
    }