site.scss

$bg-color:              #526BA5;
$text-color-default:    #333;

$screen-xs-min: 480px;
$screen-sm-min: 768px;
$screen-md-min: 992px;

$screen-xs-max: $screen-sm-min -1;
$screen-sm-max: $screen-md-min -1;


%font-logo{font-family: 'Bree Serif', serif;}
%base-header-footer{
    background-color: $bg-color;
    &, a{color: lighten($bg-color, 60%);}
    width: 100%;
    overflow: hidden;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
html, body{
    color: $text-color-default;
    font: {
        size: 18px;
        font-family: sans-serif;
    }
    padding: 0;
    margin: 0
}
a{
    color: $bg-color;
    font-weight: normal;
    text-decoration: none;
    &:hover{
        color: darken($bg-color, 20%);
    }
}
.container{
    width: 90%;
    margin: 0 auto;
    @media (max-width: $screen-sm-min){
        width: 100%;
    }
}

.header-banner{
    @extend %base-header-footer;

    padding: 3%;
    @media (max-width: $screen-xs-min){
        padding: 15% 3%;
        text-align: center;
    }

    .header-logo h1{
        letter-spacing: 4px;
        color: lighten($bg-color, 65%);
        @extend %font-logo;
        font-size: 4em;
        margin: 0;
        text-shadow: 8px 8px 0 darken($bg-color, 10%);

        @media (max-width: $screen-sm-min){
            font-size: 3em;
        }
        @media (max-width: $screen-xs-min){
            font-size: 2em;
            display: block;
        }
    }

    .download-latest{
        margin-top: 2%;
        @media (max-width: $screen-sm-min){
            margin-top: 5%;
        }
        @media (max-width: $screen-xs-min){
            margin-top: 10%;
        }
    }
}
.content{
    width: 70%;
    float: left;
    margin: 2% 0;
    @media (max-width: $screen-md-min){
        width: 100%;
        float: none;
    }
}
aside{

    @media (max-width: $screen-md-min){
        display: none;
        .menu{
            display: none;
        }
    }

    width: 30%;
    float: right;
    margin: 2% 0;

    .menu{
        
        border: 1px solid lighten($bg-color, 55%);
        ul{
            list-style: none;
            li{
                margin: 5% 0;
                a { padding: 3%;}
            }
        }
    }
}

@each $name, $content in 
                (getstarted, "\f024"),
                (examples, "\f004"),
                (variants, "\f1de"),
                (outlines, "\f096"),
                (sizes, "\f047"),
                (blocks, "\f1b2"),
                (disableds, "\f011"),
                (groups, "\f00a"),
                (icons, "\f02e"){

    .#{$name}:before{
        font-family: FontAwesome;
        content: $content;
        padding-right: 1.5%;
        font-size: .8em;
        color: lighten($bg-color, 30%);
    }

}

.section{
	background-color: #f7f7f7;
    border: 1px solid darken(#f7f7f7, 5%);
	padding: 2% 3%;
    margin: 1% 0;
    .header{
        &,span:first-child{padding-left: 1.5%;}
        margin-bottom: 3%;
    }

    code{
        $bg-code: #C1289E;
        padding: .3% .5%;
        font-size: 1em;
        background-color: lighten($bg-code, 50%);
        border: 1px solid lighten($bg-code, 47%);;
        color: $bg-code;
        -webkit-border-radius: 7px 7px 7px 7px;
        border-radius: 7px 7px 7px 7px;

        word-wrap: break-word;
        
        &.html{
            background-color: #333;
            display: inline-block;
            padding: 2%;
            width: 100%;
            color: #eee;
            border: none;
            
        }
    }

    h3{color: #444}
    table{width: 100%;}
    table td{padding: 0.5%}
}
.exemple{
	background-color: #eee;
	padding: 2% 2%;
	margin-bottom: 1%;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
    border: 1px solid #ddd;

    header{
        h3{
            display: inline-block;
            margin-right: 1%;
        }
        @media (max-width: $screen-md-min){
            span.md-block{display: block; margin-bottom: 5%;}
        }
    }
}
.footer{
    @media (max-width: $screen-xs-min){
        display: none;
    }
    @extend %base-header-footer;
    padding: 2% 3%;
    text-align: center;
}
.inline-block{
    display: inline-block; 
}
.btn-sizes{
    @extend .inline-block;
    margin: 2%;
}
.github{
    margin-top: 2%;
    overflow: hidden;
}