diff --git a/site/filters.json b/site/filters.json index 22aedf7..526ca81 100644 --- a/site/filters.json +++ b/site/filters.json @@ -47,7 +47,7 @@ }, { "name": "Dogpatch", - "is_done": false, + "is_done": true, "usage": "dogpatch" }, { diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index 3ecc989..683f225 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -22,4 +22,6 @@ @import 'slumber'; @import 'brannan'; @import 'valencia'; -@import 'kelvin'; \ No newline at end of file +@import 'kelvin'; +@import 'juno'; +@import 'dogpatch'; diff --git a/source/scss/dogpatch.scss b/source/scss/dogpatch.scss new file mode 100644 index 0000000..367df2f --- /dev/null +++ b/source/scss/dogpatch.scss @@ -0,0 +1,34 @@ +/* + * Dogpatch + * + */ + @import 'shared'; + // mixin to extend dogpatch filter + // @mixin dogpatch + // @param $filters... {filter} - Zero to many css filters to be added + // @example + // img { + // @include dogpatch; + // } + // or + // img { + // @include dogpatch(blur(2px)); + // } + // or + // img { + // @include dogpatch(blur(2px)) { + // /*...*/ + // }; + // } + @mixin dogpatch($filters...) { + @extend %filter-base; + filter: contrast(1.38) saturate(.85) brightness(1.08) $filters; + + @content; + } + + // dogpatch Instagram filter + %dogpatch, + .dogpatch { + @include dogpatch; + }