intraxia/wp-gistpen

@import "compass/reset";

// variables
$colorGreen: #008000;
$colorGreenDark: darken($colorGreen, 10);

@mixin container {
        max-width: 980px;
}

// mixins with parameters
@mixin button($color:green) {
        @if ($color == green) {
                background-color: #008000;
        }
        @else if ($color == red) {
                background-color: #B22222;
        }
}

button {
        @include button(red);
}

div,
.navbar,
#header,
input[type="input"] {
        font-family: "Helvetica Neue", Arial, sans-serif;
        width: auto;
        margin: 0 auto;
        display: block;
}

.row-12 > [class*="spans"] {
        border-left: 1px solid #B5C583;
}

// nested definitions
ul {
        width: 100%;
        padding: {
                left: 5px; right: 5px;
        }
    li {
            float: left; margin-right: 10px;
            .home {
                    background: url('http://placehold.it/20') scroll no-repeat 0 0;
        }
    }
}

.banner {
        @extend .container;
}

a {
    color: $colorGreen;
    &:hover { color: $colorGreenDark; }
    &:visited { color: #c458cb; }
}

@for $i from 1 through 5 {
        .span#{$i} {
                width: 20px*$i;
        }
}

@mixin mobile {
    @media screen and (max-width : 600px) {
        @content;
    }
}