separated background from filter

assets/scss/components/_aside.scss

@@ -4,7 +4,6 @@
   display: block;
   width: $aside-width-collapsed;
   height: 100%;
-  @include background-filter;
 
   &.animated {
     transition: width $aside-animation-time $aside-animation;
@@ -16,6 +15,7 @@
     font-weight: $font-weight-thin;
     color: $gray-lightest;
     text-align: center;
+    @include background-filter;
     @include center-absolute;
     @include font-shadow;
   }

assets/scss/components/_media-queries.scss

@@ -51,7 +51,6 @@
   }
   .cover {
     width: 16rem;
-    background: $mobile-primary;
     transition: all $aside-animation-time;
     transform: translate3d(-16rem, 0, 0);
 
@@ -97,7 +96,7 @@
     padding: .625rem 1.25rem;
 
     &:hover {
-      background-color: darken($mobile-primary, 5%);
+      background-color: rgba($black, 0.1);
     }
   }
   #avatar-link {

assets/scss/modules/_mixins.scss

@@ -9,17 +9,19 @@
 }
 
 @mixin background-filter {
-  background: linear-gradient(150deg, $cover-secondary 30%, $cover-primary 70%)
-  0 0/cover fixed,url(/assets/img/cover.jpg) center/cover no-repeat fixed;
+  background: linear-gradient(150deg, $cover-secondary 30%, $cover-primary 70%) 0 0/cover fixed;
 }
+
 @mixin center-absolute {
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
 @mixin font-shadow {
   text-shadow: 0 1px 1px rgba(000, 000, 000, .4);
 }
+
 @mixin btn-cover {
   position: relative;
   display: block;

assets/scss/modules/_variables.scss

@@ -21,8 +21,6 @@ $secondary-color       : $gray-dark;
 $cover-secondary       : rgba(#5f2c82, .1);
 $cover-primary         : rgba(#49a09d, .2);
 
-$mobile-primary        : $gray-darkest;
-
 $link-color            : $gray-darkest;
 $hover-color           : $primary-color;
 

partials/aside.hbs

@@ -1,5 +1,4 @@
-<aside class="cover">
-
+<aside class="cover" style="background: url({{@blog.cover}}) center/cover no-repeat fixed">
   <div class="cover container">
     <div class="profile">
       {{#if @blog.logo}}