From aff94d2b863a9bebd2025f026faa13b54e6a62e8 Mon Sep 17 00:00:00 2001
From: calven123 <67599883+calven123@users.noreply.github.com>
Date: Wed, 12 Aug 2020 15:02:07 +0800
Subject: [PATCH 01/10] Create calven.css
---
source/css/calven.css | 41 +++++++++++++++++++++++++++++++++++++++++
1 file changed, 41 insertions(+)
create mode 100644 source/css/calven.css
diff --git a/source/css/calven.css b/source/css/calven.css
new file mode 100644
index 0000000..2802747
--- /dev/null
+++ b/source/css/calven.css
@@ -0,0 +1,41 @@
+/*
+ *
+ * Calven
+ *
+ */
+
+.calven {
+ position: relative;
+ -webkit-filter: contrast(0.9) brightness(1.1);
+ filter: contrast(0.9) brightness(1.1); }
+
+ .calven img {
+ width: 100%;
+ z-index: 1; }
+
+ .calven:before {
+ content: '';
+ display: block;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+ pointer-events: none;
+ z-index: 2; }
+
+ .calven:after {
+ content: '';
+ display: block;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+ pointer-events: none;
+ z-index: 3; }
+
+ .calven::after {
+ filter: brightness(99%) hue-rotate(25deg) saturate(238%) contrast(96%);
+-webkit-filter: brightness(99%) hue-rotate(25deg) saturate(238%) contrast(96%);
+-moz-filter: brightness(99%) hue-rotate(25deg) saturate(238%) contrast(96%); }
From b9f36ded4cdc62ef4f2e5cf6c2c522d6e7710fc8 Mon Sep 17 00:00:00 2001
From: calven123 <67599883+calven123@users.noreply.github.com>
Date: Wed, 12 Aug 2020 15:03:12 +0800
Subject: [PATCH 02/10] Create calven.min.css
---
source/css/calven.min.css | 1 +
1 file changed, 1 insertion(+)
create mode 100644 source/css/calven.min.css
diff --git a/source/css/calven.min.css b/source/css/calven.min.css
new file mode 100644
index 0000000..1d87866
--- /dev/null
+++ b/source/css/calven.min.css
@@ -0,0 +1 @@
+.calven{position:relative;-webkit-filter:contrast(.9) brightness(1.1);filter:contrast(.9) brightness(1.1)}.calven:after,.calven:before{content:'';display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none}.calven img{width:100%;z-index:1}.calven:before{z-index:2}.calven:after{z-index:3}.calven::after{ filter: brightness(99%) hue-rotate(25deg) saturate(238%) contrast(96%);-webkit-filter: brightness(99%) hue-rotate(25deg) saturate(238%) contrast(96%);-moz-filter: brightness(99%) hue-rotate(25deg) saturate(238%) contrast(96%); }
From 340cf22003f646447367efd45e43cf2c6639629c Mon Sep 17 00:00:00 2001
From: calven123 <67599883+calven123@users.noreply.github.com>
Date: Wed, 12 Aug 2020 15:05:35 +0800
Subject: [PATCH 03/10] Create calven.scss
---
source/scss/calven.scss | 42 +++++++++++++++++++++++++++++++++++++++++
1 file changed, 42 insertions(+)
create mode 100644 source/scss/calven.scss
diff --git a/source/scss/calven.scss b/source/scss/calven.scss
new file mode 100644
index 0000000..8f0cda1
--- /dev/null
+++ b/source/scss/calven.scss
@@ -0,0 +1,42 @@
+/*
+ *
+ * Calven
+ *
+ */
+@import 'shared';
+
+// mixin to extend calven filter
+// @mixin calven
+// @param $filters... {filter} - Zero to many css filters to be added
+// @example
+// img {
+// @include calven;
+// }
+// or
+// img {
+// @include calven(blur(2px));
+// }
+// or
+// img {
+// @include calven(blur(2px)) {
+// /*...*/
+// };
+// }
+@mixin calven($filters...) {
+ @include filter-base;
+ filter: contrast(.9) brightness(1.1) $filters;
+
+ &::after {
+ filter: brightness(99%) hue-rotate(25deg) saturate(238%) contrast(96%);
+-webkit-filter: brightness(99%) hue-rotate(25deg) saturate(238%) contrast(96%);
+-moz-filter: brightness(99%) hue-rotate(25deg) saturate(238%) contrast(96%);
+ }
+
+ @content;
+}
+
+// calven Instagram filter
+%calven,
+.calven {
+ @include calven;
+}
From 8df4ad0ece94ae2fe835c95776ca71886fe27b50 Mon Sep 17 00:00:00 2001
From: calven123 <67599883+calven123@users.noreply.github.com>
Date: Wed, 12 Aug 2020 15:08:10 +0800
Subject: [PATCH 04/10] Update filters.json
---
site/filters.json | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/site/filters.json b/site/filters.json
index 878ecde..2f6e043 100644
--- a/site/filters.json
+++ b/site/filters.json
@@ -199,8 +199,13 @@
"name": "X-pro II",
"is_done": true,
"usage": "xpro2"
+ },
+ {
+ "name": "Calven",
+ "is_done": true,
+ "usage": "calven"
}
],
"images": ["atx", "bike", "cacti", "lakegeneva", "tahoe"]
-}
\ No newline at end of file
+}
From 987879ec42bda1afc5096cad9727b091577e6db2 Mon Sep 17 00:00:00 2001
From: calven123 <67599883+calven123@users.noreply.github.com>
Date: Wed, 12 Aug 2020 15:13:06 +0800
Subject: [PATCH 05/10] Update index.html
---
site/index.html | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/site/index.html b/site/index.html
index a6678b1..fa73416 100644
--- a/site/index.html
+++ b/site/index.html
@@ -21,7 +21,7 @@
- 
+ 
A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.
@@ -212,6 +212,12 @@