added stinson filter (#251)

* added stinson filter * adds the stinson filter import * heightens brightness and adds a before pseudo for a warmer hue
una · Nov 11, 2016 · 50e6e13 · 50e6e13
1 parent aaa58a1
commit 50e6e13
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 2 deletions.
diff --git a/site/filters.json b/site/filters.json
@@ -162,7 +162,7 @@
         },
         {
             "name": "Stinson",
-            "is_done": false,
+            "is_done": true,
             "usage": "stinson"
         },
         {

diff --git a/source/css/stinson.css b/source/css/stinson.css
@@ -0,0 +1,41 @@
+/*
+ *
+ * Stinson
+ *
+ */
+
+.stinson {
+  position: relative;
+  -webkit-filter: contrast(0.75) saturate(0.85) brightness(1.15);
+          filter: contrast(0.75) saturate(0.85) brightness(1.15); }
+
+  .stinson img {
+    width: 100%;
+    z-index: 1; }
+
+  .stinson:before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2; }
+
+  .stinson:after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 3; }
+
+  &::before {
+    background: rgba(240, 149, 128, .2);
+    mix-blend-mode: soft-light;
+  }
diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss
@@ -22,4 +22,5 @@
 @import 'brannan';
 @import 'valencia';
 @import 'kelvin';
-@import 'maven';
+@import 'maven';
+@import 'stinson';
diff --git a/source/scss/stinson.scss b/source/scss/stinson.scss
@@ -0,0 +1,42 @@
+/*
+ *
+ * Stinson
+ *
+ */
+
+@import 'shared';
+
+// mixin to extend stinson filter
+// @mixin stinson
+// @param $filters... {filter} - Zero to many css filters to be added
+// @example
+//   img {
+//     @include stinson;
+//   }
+//   or
+//   img {
+//     @include stinson(blur(2px));
+//   }
+//   or
+//   img {
+//     @include stinson(blur(2px)) {
+//       /*...*/
+//     };
+//   }
+@mixin stinson($filters...) {
+  @include filter-base;
+  filter: contrast(0.75) saturate(0.85) brightness(1.15) $filters;
+
+  &::before {
+    background: rgba(240, 149, 128, .2);
+    mix-blend-mode: soft-light;
+  }
+
+  @content;
+}
+
+// stinson Instagram filter
+%stinson,
+.stinson {
+  @include stinson;
+}