refactor background filter

Kikobeats · Feb 15, 2015 · fa4ee2d · fa4ee2d
1 parent bb9d8b5
commit fa4ee2d
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 23 deletions.
diff --git a/assets/css/uno.css b/assets/css/uno.css
diff --git a/assets/css/uno.css.map b/assets/css/uno.css.map
diff --git a/assets/scss/components/_page-error.scss b/assets/scss/components/_page-error.scss
@@ -4,8 +4,7 @@ body[data-page='error'] {
   line-height: 25px;
   width: 100%;
   height: 100%;
-  background-image: url(/assets/img/cover.jpg);
-  background-size: cover;
+  @include filter;
 }
 .mayday {
   width: 500px;

diff --git a/assets/scss/components/_panels.scss b/assets/scss/components/_panels.scss
@@ -36,24 +36,12 @@
   width: 100%;
   max-width: none;
   height: 100%;
-  background: url(../images/background-cover.jpg) top left no-repeat $gray-darker;
-  background-position: 0 100%;
-  background-size: cover;
+  @include filter;
 }
 .panel-cover--collapsed {
   width: 28%;
   max-width: 400px;
 }
-.panel-cover--overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-  display: block;
-  background: linear-gradient(150deg, rgba(19, 106, 138, .65) 30%, rgba(38, 120, 113, .44) 70%);
-}
 .panel-cover__logo {
   width: 10rem;
   margin-bottom: 1.2em;

diff --git a/assets/scss/modules/_mixins.scss b/assets/scss/modules/_mixins.scss
@@ -0,0 +1,5 @@
+@mixin filter {
+  background: linear-gradient(150deg, rgba(19, 106, 138, .65) 30%, rgba(38, 120, 113, .44) 70%), url(/assets/img/cover.jpg) no-repeat center;
+  background-attachment: fixed;
+  background-size: cover;
+}
diff --git a/error.hbs b/error.hbs
@@ -51,8 +51,6 @@
 
 </head>
 <body data-page="error" class="text-center no-js">
-  <div class="panel-cover--overlay">
-
     <div class="astro-wrap">
       <a class="astronaut" href="#" title="return to base"></a>
     </div>

diff --git a/partials/side-panel.hbs b/partials/side-panel.hbs
@@ -1,4 +1,4 @@
-<header class="panel-cover" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
+<header class="panel-cover">
   <div class="panel-main">
 
     <div class="panel-main__inner panel-inverted">
@@ -36,7 +36,5 @@
       </div>
 
     </div>
-
-    <div class="panel-cover--overlay"></div>
   </div>
 </header>