adds helena filter

una · Oct 27, 2016 · f89e96f · f89e96f
1 parent d736911
commit f89e96f
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
@@ -72,7 +72,7 @@
         },
         {
             "name": "Helena",
-            "is_done": false,
+            "is_done": true,
             "usage": "helena"
         },
         {

diff --git a/source/css/helena.css b/source/css/helena.css
@@ -0,0 +1,41 @@
+/*
+ *
+ * Helena
+ *
+ */
+
+.helena {
+  position: relative;
+  -webkit-filter: hue-rotate(-18deg) sepia(0.3) saturate(1.3);
+          filter: hue-rotate(-18deg) sepia(0.3) saturate(1.3); }
+
+  .helena img {
+    width: 100%;
+    z-index: 1; }
+
+  .helena:before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2; }
+
+  .helena:after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 3; }
+
+  .helena::after {
+    background: #007ccc;
+    mix-blend-mode: soft-light;
+    opacity: .3; }
diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss
@@ -21,4 +21,5 @@
 @import 'slumber';
 @import 'brannan';
 @import 'valencia';
-@import 'kelvin';
+@import 'kelvin';
+@import 'helena';
diff --git a/source/scss/helena.scss b/source/scss/helena.scss
@@ -0,0 +1,42 @@
+/*
+ *
+ * Helena
+ *
+ */
+@import 'shared';
+
+// mixin to extend helena filter
+// @mixin helena
+// @param $filters... {filter} - Zero to many css filters to be added
+// @example
+//   img {
+//     @include helena;
+//   }
+//   or
+//   img {
+//     @include helena(blur(2px));
+//   }
+//   or
+//   img {
+//     @include helena(blur(2px)) {
+//       /*...*/
+//     };
+//   }
+@mixin helena($filters...) {
+  @include filter-base;
+  filter: hue-rotate(-18deg) sepia(0.3) saturate(1.3) $filters;
+
+  &::after {
+    background: #007ccc;
+    mix-blend-mode: soft-light;
+    opacity: .3;
+  }
+
+  @content;
+}
+
+// helena Instagram filter
+%helena,
+.helena {
+  @include helena;
+}