From a56b10e2395496c6c180c2784188267b76c917b8 Mon Sep 17 00:00:00 2001
From: Manu <manutastic@gmail.com>
Date: Fri, 2 Feb 2018 22:09:19 -0500
Subject: [PATCH] add vesper filter

---
 site/css/vesper.min.css   |  1 +
 site/filters.json         |  4 ++--
 source/css/vesper.css     | 40 ++++++++++++++++++++++++++++++++++++++
 source/css/vesper.min.css |  1 +
 source/scss/cssgram.scss  |  1 +
 source/scss/vesper.scss   | 41 +++++++++++++++++++++++++++++++++++++++
 6 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 site/css/vesper.min.css
 create mode 100644 source/css/vesper.css
 create mode 100644 source/css/vesper.min.css
 create mode 100644 source/scss/vesper.scss

diff --git a/site/css/vesper.min.css b/site/css/vesper.min.css
new file mode 100644
index 0000000..195d65a
--- /dev/null
+++ b/site/css/vesper.min.css
@@ -0,0 +1 @@
+.vesper{position:relative;-webkit-filter:hue-rotate(-10deg) contrast(.9) saturate(.9) brightness(1.2) sepia(.1);filter:hue-rotate(-10deg) contrast(.9) saturate(.9) brightness(1.2) sepia(.1)}.vesper img{width:100%;z-index:1}.vesper:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;z-index:2}.vesper:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;z-index:3}.vesper::after{background:rgba(220,250,40,.1);mix-blend-mode:darken}
\ No newline at end of file
diff --git a/site/filters.json b/site/filters.json
index 878ecde..09757ec 100644
--- a/site/filters.json
+++ b/site/filters.json
@@ -182,7 +182,7 @@
         },
         {
             "name": "Vesper",
-            "is_done": false,
+            "is_done": true,
             "usage": "vesper"
         },
         {
@@ -203,4 +203,4 @@
     ],
 
     "images": ["atx", "bike", "cacti", "lakegeneva", "tahoe"]
-}
\ No newline at end of file
+}
diff --git a/source/css/vesper.css b/source/css/vesper.css
new file mode 100644
index 0000000..b954036
--- /dev/null
+++ b/source/css/vesper.css
@@ -0,0 +1,40 @@
+/*
+ *
+ * Vesper
+ *
+ */
+
+.vesper {
+  position: relative;
+  -webkit-filter: hue-rotate(-10deg) contrast(0.9) saturate(0.9) brightness(1.2) sepia(0.1);
+          filter: hue-rotate(-10deg) contrast(0.9) saturate(0.9) brightness(1.2) sepia(0.1); }
+  
+  .vesper img {
+    width: 100%;
+    z-index: 1; }
+  
+  .vesper:before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2; }
+  
+  .vesper:after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 3; }
+  
+  .vesper::after {
+    background: rgba(220, 250, 40, 0.1);
+    mix-blend-mode: darken; }
diff --git a/source/css/vesper.min.css b/source/css/vesper.min.css
new file mode 100644
index 0000000..195d65a
--- /dev/null
+++ b/source/css/vesper.min.css
@@ -0,0 +1 @@
+.vesper{position:relative;-webkit-filter:hue-rotate(-10deg) contrast(.9) saturate(.9) brightness(1.2) sepia(.1);filter:hue-rotate(-10deg) contrast(.9) saturate(.9) brightness(1.2) sepia(.1)}.vesper img{width:100%;z-index:1}.vesper:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;z-index:2}.vesper:after{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;z-index:3}.vesper::after{background:rgba(220,250,40,.1);mix-blend-mode:darken}
\ No newline at end of file
diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss
index 65872f7..9a273db 100644
--- a/source/scss/cssgram.scss
+++ b/source/scss/cssgram.scss
@@ -24,3 +24,4 @@
 @import 'kelvin';
 @import 'maven';
 @import 'stinson';
+@import 'vesper';
diff --git a/source/scss/vesper.scss b/source/scss/vesper.scss
new file mode 100644
index 0000000..45819b2
--- /dev/null
+++ b/source/scss/vesper.scss
@@ -0,0 +1,41 @@
+/*
+ *
+ * Vesper
+ *
+ */
+@import 'shared';
+
+// mixin to extend vesper filter
+// @mixin vesper
+// @param $filters... {filter} - Zero to many css filters to be added
+// @example
+//   img {
+//     @include vesper;
+//   }
+//   or
+//   img {
+//     @include vesper(blur(2px));
+//   }
+//   or
+//   img {
+//     @include vesper(blur(2px)) {
+//       /*...*/
+//     };
+//   }
+@mixin vesper($filters...) {
+  @include filter-base;
+  filter: hue-rotate(-10deg) contrast(.9) saturate(.9) brightness(1.2) sepia(0.1) $filters;
+
+  &::after {
+    background: rgba(220, 250, 40, .1);
+    mix-blend-mode: darken;
+  }
+
+  @content;
+}
+
+// vesper Instagram filter
+%vesper,
+.vesper {
+  @include vesper;
+}