added maven filter (#252)

* added maven filter

* adds the maven filter import

site/filters.json

@@ -112,7 +112,7 @@
         },
         {
             "name": "Maven",
-            "is_done": false,
+            "is_done": true,
             "usage": "maven"
         },
         {

source/css/maven.css

@@ -0,0 +1,40 @@
+/*
+ *
+ * Maven
+ *
+ */
+
+.maven {
+  position: relative;
+  -webkit-filter: sepia(0.25) brightness(0.95) contrast(0.95) saturate(1.5);
+          filter: sepia(0.25) brightness(0.95) contrast(0.95) saturate(1.5); }
+
+  .maven img {
+    width: 100%;
+    z-index: 1; }
+
+  .maven:before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2; }
+
+  .maven:after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 3; }
+
+  .maven:after {
+    background: rgba(3,230,26,0.20);
+    mix-blend-mode: hue; }

source/scss/cssgram.scss

@@ -21,4 +21,5 @@
 @import 'slumber';
 @import 'brannan';
 @import 'valencia';
-@import 'kelvin';
+@import 'kelvin';;
+@import 'maven';

source/scss/maven.scss

@@ -0,0 +1,42 @@
+/*
+ *
+ * Maven
+ *
+ */
+
+@import 'shared';
+
+// mixin to extend maven filter
+// @mixin maven
+// @param $filters... {filter} - Zero to many css filters to be added
+// @example
+//   img {
+//     @include maven;
+//   }
+//   or
+//   img {
+//     @include maven(blur(2px));
+//   }
+//   or
+//   img {
+//     @include maven(blur(2px)) {
+//       /*...*/
+//     };
+//   }
+@mixin maven($filters...) {
+  @include filter-base;
+  filter: sepia(.25) brightness(.95) contrast(.95) saturate(1.5) $filters;
+
+  &:after{
+    background: rgba(3,230,26,0.20);
+    mix-blend-mode: hue;
+  }
+
+  @content;
+}
+
+// maven Instagram filter
+%maven,
+.maven {
+  @include maven;
+}