diff --git a/site/filters.json b/site/filters.json index 22aedf7..5b9cdd6 100644 --- a/site/filters.json +++ b/site/filters.json @@ -162,7 +162,7 @@ }, { "name": "Stinson", - "is_done": false, + "is_done": true, "usage": "stinson" }, { diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index a328cb9..1387ae3 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -19,6 +19,7 @@ @import 'willow'; @import 'rise'; @import 'slumber'; +@import 'stinson'; @import 'brannan'; @import 'valencia'; @import 'kelvin'; \ No newline at end of file diff --git a/source/scss/stinson.scss b/source/scss/stinson.scss new file mode 100644 index 0000000..1b4fa6d --- /dev/null +++ b/source/scss/stinson.scss @@ -0,0 +1,45 @@ +/* + * + * Stinson + * + */ +@import 'shared'; + +// mixin to extend stinson filter +// @mixin stinson +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include stinson; +// } +// or +// img { +// @include stinson(blur(2px)); +// } +// or +// img { +// @include stinson(blur(2px)) { +// /*...*/ +// }; +// } +@mixin stinson($filters...) { + @include filter-base; + filter: sepia(.2) hue-rotate(-2deg) contrast(.9) brightness(1.05) $filters; + + &::before { + background-color: rgba(171,148,142,.8); + mix-blend-mode: soft-light; + } + + &::after { + background-color: rgba(51,42,37,1); + mix-blend-mode: lighten; + } + @content; +} + +// stinson Instagram filter +%stinson, +.stinson { + @include stinson; +}