Add filter Juno

una · Oct 6, 2016 · 60cfd3b · 60cfd3b
1 parent 4615b1b
commit 60cfd3b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/site/filters.json b/site/filters.json
@@ -87,7 +87,7 @@
         },
         {
             "name": "Juno",
-            "is_done": false,
+            "is_done": true,
             "usage": "juno"
         },
         {
@@ -203,4 +203,4 @@
     ],
 
     "images": ["atx", "bike", "cacti", "lakegeneva", "tahoe"]
-}
+}
diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss
@@ -22,4 +22,5 @@
 @import 'slumber';
 @import 'brannan';
 @import 'valencia';
-@import 'kelvin';
+@import 'kelvin';
+@import 'juno';
diff --git a/source/scss/juno.scss b/source/scss/juno.scss
@@ -0,0 +1,38 @@
+/*
+ * Juno
+ *
+ */
+ @import 'shared';
+ // mixin to extend juno filter
+ // @mixin juno
+ // @param $filters... {filter} - Zero to many css filters to be added
+ // @example
+ //   img {
+ //     @include juno;
+ //   }
+ //   or
+ //   img {
+ //     @include juno(blur(2px));
+ //   }
+ //   or
+ //   img {
+ //     @include juno(blur(2px)) {
+ //       /*...*/
+ //     };
+ //   }
+@mixin juno($filters...) {
+  @extend %filter-base;
+  filter: contrast(1.2) saturate(0.8) $filters;
+  &:before {
+    background: linear-gradient(to bottom,rgba(255,255,255,0.2), rgba(74, 195, 111, 0.2), transparent);
+    mix-blend-mode: overlay;
+  }
+
+  @content;
+}
+
+// juno Instagram filter
+%juno,
+.juno {
+  @include juno;
+}