diff --git a/site/filters.json b/site/filters.json index 22aedf7..b439b85 100644 --- a/site/filters.json +++ b/site/filters.json @@ -67,7 +67,7 @@ }, { "name": "Hefe", - "is_done": false, + "is_done": true, "usage": "hefe" }, { diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index 3ecc989..4ba5a25 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -21,5 +21,6 @@ @import 'rise'; @import 'slumber'; @import 'brannan'; +@import 'hefe'; @import 'valencia'; -@import 'kelvin'; \ No newline at end of file +@import 'kelvin'; diff --git a/source/scss/hefe.scss b/source/scss/hefe.scss new file mode 100644 index 0000000..61c3fe0 --- /dev/null +++ b/source/scss/hefe.scss @@ -0,0 +1,41 @@ +/* + * + * Hefe + * + */ +@import 'shared'; + +// mixin to extend hefe filter +// @mixin hefe +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include hefe; +// } +// or +// img { +// @include hefe(blur(2px)); +// } +// or +// img { +// @include hefe(blur(2px)) { +// /*...*/ +// }; +// } +@mixin hefe($filters...) { + @extend %filter-base; + filter: contrast(1.3) sepia(0.3) saturate(1.3) hue-rotate(-10deg) brightness(0.95); + + &::after { + background: rgba(243, 106, 188, 0); + mix-blend-mode: initial; + } + + @content; +} + +// hefe Instagram filter +%hefe, +.hefe { + @include hefe; +}