Add new container grid size and fix bugs

3 files changed, 18 insertions, 10 deletions

diff --git a/src/empty.less b/src/empty.less
index 297621c..295758c 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -1,5 +1,6 @@
 // Empty states (or Blank slates)
 .empty {
+  background: @bg-color;
   border-radius: @border-radius;
   color: @gray-color-dark;
   text-align: center;
diff --git a/src/layout.less b/src/layout.less
index 2e4426b..1c657df 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -7,6 +7,10 @@
   width: 100%;
   &:extend(.clearfix all);
 
+  &.grid-1280 {
+    max-width: 128rem + 2 * @layout-padding;
+  }
+
   &.grid-960 {
     max-width: 96rem + 2 * @layout-padding;
   }
diff --git a/src/parallax.less b/src/parallax.less
index 6a6f03a..9886206 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -2,6 +2,8 @@
 @parallax-deg: 3deg;
 @parallax-offset: .65rem;
 @parallax-offset-z: 10rem;
+@parallax-perspective: 100rem;
+@parallax-scale: 1 - unit(@parallax-offset-z / @parallax-perspective);
 
 .parallax {
   display: block;
@@ -12,7 +14,7 @@
   .parallax-content {
     height: auto;
     .shadow-variant(2rem);
-    transform: perspective(100rem);
+    transform: perspective(@parallax-perspective);
     transform-style: preserve-3d;
     transition: all .4s ease;
     width: 100%;
@@ -39,7 +41,7 @@
     text-align: center;
     text-shadow: 0 0 3rem fade(@dark-color, 95%);
     top: 0;
-    transform: translateZ(@parallax-offset-z);
+    transform: translateZ(@parallax-offset-z) scale(@parallax-scale);
     transition: all .4s ease;
     width: 100%;
     z-index: @zindex-0;
@@ -51,14 +53,14 @@
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(-@parallax-deg) rotateY(@parallax-deg);
+      transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(@parallax-deg);
 
       &::before {
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z);
+        transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale);
       }
     }
   }
@@ -69,14 +71,14 @@
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
+      transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
 
       &::before {
         background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z);
+        transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale);
       }
     }
   }
@@ -87,14 +89,14 @@
     left: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(@parallax-deg) rotateY(@parallax-deg);
+      transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(@parallax-deg);
 
       &::before {
         background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z);
+        transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale);
       }
     }
   }
@@ -105,19 +107,20 @@
     right: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(100rem) rotateX(@parallax-deg) rotateY(-@parallax-deg);
+      transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(-@parallax-deg);
 
       &::before {
         background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z);
+        transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale);
       }
     }
   }
 }
 
+// Mixin: Parallax direction
 .parallax-dir() {
   height: 50%;
   position: absolute;