less

/* VARIABLES
--------------------------------------------*/@header-top-height: 40px;      /* height of the top section of the header */@header-main-height: 100px;    /* default height of the main section of the header */@header-sticky-height: 60px;   /* height of the header when it's sticky */
/* GLOBAL DEFAULTS
--------------------------------------------*/body {
    padding: 0;
    margin: 0;
    font-family: Arial;
}

a {
    transition: color 0.3s;
}

/* GENERAL CLASSES
------------------------------------------*/ul.reset {
    margin: 0;
    padding: 0;

    > li {
        list-style: none;
    }
}

/* HEADER SECTION
--------------------------------------------*/#header {
    position:absolute;
    top:0;
    width:100%;

    .header-top {
        height: @header-top-height;
        line-height: @header-top-height;
        background: #1b2327;
        color: #b0bec5;

        .social-icons {
            float: right;

            ul {
                li {
                    float: left;
                    margin-left: 5px;
                    font-size: 20px;

                    a {
                        color: inherit;
                        text-decoration: none;
                        display: inline-block;
                        width: 40px;
                        text-align: center;
                        line-height: 40px;

                        &:hover {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    .header-main {
        height: @header-main-height;
        line-height: @header-main-height;
        background: #263238;
        padding: 0 20px;
        box-sizing: border-box;
        
        /* animate the transition between normal header and sticky header */        transition: height .3s, line-height .3s;

        .nav {
            float: left;

            ul {
                li {
                    float: left;

                    a {
                        color: #cfd8dc;
                        text-decoration: none;
                        text-transform: uppercase;
                        display: inline-block;
                        padding: 0 10px;

                        &.current {
                            color: #80cbc4;
                        }

                        &:hover {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}

/* BODY SECTION
--------------------------------------------*/#body {
    padding-top: @header-top-height + @header-main-height;
    padding-left: 15px;
    padding-right: 15px;
    background: #eee;
    transition: padding-top .3s;
}

/* FOOTER SECTION
--------------------------------------------*/#footer {
    background: #1b2327;
    padding: 20px;
    text-align: center;
    
    a {
        color: #b0bec5;
        text-decoration: none;

        &:hover {
            color: #fff;
        }
    }
}

/* STICKY HEADER STYLES
--------------------------------------------*/body.sticky-header {
    #header {
        .header-main {
            height: @header-sticky-height;
            line-height: @header-sticky-height;
            position: fixed;
            top:0;
            width: 100%;
        }
    }

    #body {
        padding-top: @header-top-height + @header-sticky-height;
    }
}