diff --git a/site/filters.json b/site/filters.json index d762217..001ab12 100644 --- 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 new file mode 100644 index 0000000..0fea3b1 --- /dev/null +++ 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 index e1776c7..e605511 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -22,4 +22,5 @@ @import 'brannan'; @import 'valencia'; @import 'kelvin'; -@import 'maven'; \ No newline at end of file +@import 'maven'; +@import 'helena'; diff --git a/source/scss/helena.scss b/source/scss/helena.scss new file mode 100644 index 0000000..58271de --- /dev/null +++ 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; +}