%flex-layout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.navbar {
    @extend %flex-layout;
    padding: $base-padding $base-padding * 2;
    box-shadow: $base-box-shadow;
   
    .container {
        @extend %flex-layout;
    }
    
    .site-title {
        font-size: 2rem;
    }  

};


@each $key, $val in $colors {
    .navbar-#{$key}{
        @extend .navbar;
        background-color: $val;
    }
}