diff --git a/site/filters.json b/site/filters.json index de5138e..c26d3a3 100644 --- a/site/filters.json +++ b/site/filters.json @@ -162,7 +162,7 @@ }, { "name": "Stinson", - "is_done": false, + "is_done": true, "usage": "stinson" }, { @@ -203,4 +203,4 @@ ], "images": ["atx", "bike", "cacti", "lakegeneva", "tahoe"] -} \ No newline at end of file +} diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index a328cb9..1e81cf9 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 +@import 'kelvin'; diff --git a/source/scss/stinson.scss b/source/scss/stinson.scss new file mode 100644 index 0000000..69e15ee --- /dev/null +++ b/source/scss/stinson.scss @@ -0,0 +1,41 @@ +/* + * + * 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: brightness(1.15) contrast(.8) saturate(.85) sepia(.1) $filters; + + &::after { + background: rgba(240, 149, 128, .2); + mix-blend-mode: soft-light; + } + + @content; +} + +// stinson Instagram filter +%stinson, +.stinson { + @include stinson; +}