main.less

@import "theme"; // theme.less

@headeraccentwidth: 4px;
@headerpadding: 1em;
@footerheight: 3em;
@headerheight: 6em;
@sidebarwidth: 8em;
@maincontentwidth: 80%;
@headeraccentwidth: 4px;
@headerpadding: 1em;
@buttonfont: "Lato", "Segoe UI Symbol", sans-serif;

* {
    /* Using the the universal selector
    here is okay because it is only slow
    when combined with other selectors */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body {
    margin: 0; /* Remove white margin around body */
    color: white;
    font-family: "Open Sans", Helvetica, Arial,
        sans-serif; /* Regular Sans-serif */
    min-height: 100%;
    height: 100%;
    background-color: @contentbackground;
}

h1, h2, h3 {
    font-family: "Open Sans Condensed", Helvetica,
        Arial, sans-serif; /* Condensed sans-serif */
    font-weight: 300;
}

header {
    margin: 0; /* prevent border collapse */
    border-bottom: @headeraccentwidth solid @headeraccent;
    color: white;
    text-align: left;
    background-color: @headerbackground;
    padding: @headerpadding;
    height: @headerheight;
    transition: height 0.5s;
    transition: padding 0.5s;
}

header h1, header h2 {
    text-align: left;
    margin: 0;
    transition: font-size 0.5s;
}

header h1 { font-size: 1.5em }
header h2 { font-size: 1.0em }

.contentarea {
    margin-left: 0;
    padding: 0 2em 2em 2em;
    color: @contenttext;
    background-color: @contentbackground;
    transition: margin-left 0.5s;
}

.contentarea h1 {
    margin: 0;
    padding: 1em 0 0 0;
    color: @contentheadertext;
}
.contentarea p {
    margin: 0;
    padding: 1em 0 0 0;
}

#footer {
    height: @footerheight;
    padding: 1em;
    background-color: @footerbackground;
    text-align: center;
    color: @footertext;
    border-top: 2px solid @footertopbordercolor;
}

.clear-both { clear: both; }

.theme-btn {
    float: right;
    margin-top: 0;
    background-color: #ffad17;
    border: none;
    color: white;
    padding: 1em 2em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    transition: 0.5s;
    &:hover { background-color: #c68a1e; }
    &:active { background-color: #ffc459; }
}

.openbtn {
    font-family: @buttonfont;
    font-size: 2em;
    cursor: pointer;
    float: left;
    margin-right: 1em;
}

.closebtn {
    font-family: @buttonfont;
    position: absolute;
    top: 0;
    right: 0.5em;
    right: 0.5em;
    font-size: 2.5em !important;
}

/* This container is necessary to avoid odd
behavior caused by floated elements. Boxes
containing floated elements does not wrap
neatly around them, instead it sort of
overlaps them. */
.sidebar-outer {
    background-color: @sidebarbackground;
    width: @sidebarwidth;
    float: left;
    
    //Make a hidden side nav
    float: none;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: -8em;
    overflow-x: hidden;
    padding-top: 4em;
    transition: 0.5s;
}


.sidebar-left {
    margin: 0;
    width: @sidebarwidth;
    padding: 0;
    transition: width 0.5s;
}

.sidebar-left li {
    padding: 1em;
    margin-right: 0;
    list-style-type: none;
    display: block;
    /*border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: @contentbackground;*/
    width: 100%;
    text-align: left;
    transition: width 0.5s;
}

.sidebar-left li:nth-child(1) { background-color: extract(@nav-list-item1, 1);}
.sidebar-left li:nth-child(2) { background-color: extract(@nav-list-item2, 1);}
.sidebar-left li:nth-child(3) { background-color: extract(@nav-list-item3, 1);}
.sidebar-left li:nth-child(4) { background-color: extract(@nav-list-item4, 1);}
.sidebar-left li:nth-child(5) { background-color: extract(@nav-list-item5, 1);}

.sidebar-left li:nth-child(1):hover { background-color: extract(@nav-list-item1, 2);}
.sidebar-left li:nth-child(2):hover { background-color: extract(@nav-list-item2, 2);}
.sidebar-left li:nth-child(3):hover { background-color: extract(@nav-list-item3, 2);}
.sidebar-left li:nth-child(4):hover { background-color: extract(@nav-list-item4, 2);}
.sidebar-left li:nth-child(5):hover { background-color: extract(@nav-list-item5, 2);}

.sidebar-left li:nth-child(1):active { background-color: extract(@nav-list-item1, 3);}
.sidebar-left li:nth-child(2):active { background-color: extract(@nav-list-item2, 3);}
.sidebar-left li:nth-child(3):active { background-color: extract(@nav-list-item3, 3);}
.sidebar-left li:nth-child(4):active { background-color: extract(@nav-list-item4, 3);}
.sidebar-left li:nth-child(5):active { background-color: extract(@nav-list-item5, 3);}
    
/* Mobile first, then this */
@media (min-width: 768px) {
    header {
        padding: @headerpadding * 1;
        height: @headerheight * 2;
    }
    header h1 { font-size: 6em; }
    header h2 { font-size: 1.5em; }
    .sidebar-left { width: 8em; }
    .contentarea {
        margin-left: 8em;
        margin-right: 8em;
    }
    .sidebar-left {
        width: 100%;
        float: none;
    }
    .sidebar-left li {
        float: left;
        width: 8em;
        text-align: center;
        border-bottom-width: 0;
        border-bottom-style: solid;

    }
    
    //Make a hidden side nav
    .sidebar-outer {
        width: 100%;
        float: none;
        height: auto;
        position: static;
        z-index: auto;
        top: auto;
        left: auto;
        overflow-x: auto;
        transition: 0.5s;
        padding-top: 0;
    }
    .openbtn, .closebtn { display: none; }
    .theme-btn {
        margin-top: 2em;
    }
}