diff --git a/site/filters.json b/site/filters.json index de5138e..62b0b89 100644 --- a/site/filters.json +++ b/site/filters.json @@ -107,7 +107,7 @@ }, { "name": "Ludwig", - "is_done": false, + "is_done": true, "usage": "ludwig" }, { diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index aee0b81..9d1637c 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -21,4 +21,5 @@ @import 'rise'; @import 'slumber'; @import 'brannan'; -@import 'valencia'; \ No newline at end of file +@import 'valencia'; +@import 'ludwig'; \ No newline at end of file diff --git a/source/scss/ludwig.scss b/source/scss/ludwig.scss new file mode 100644 index 0000000..de8a6f3 --- /dev/null +++ b/source/scss/ludwig.scss @@ -0,0 +1,36 @@ +/* + * + * Ludwig + * + */ + @import 'shared'; + + // mixin to extend ludwig filter + // @mixin ludwig + // @param $filters... {filter} - Zero to many css filters to be added + // @example + // img { + // @include ludwig; + // } + // or + // img { + // @include ludwig(blur(2px)); + // } + // or + // img { + // @include ludwig(blur(2px)) { + // /*...*/ + // }; + // } + @mixin ludwig($filters...) { + @extend %filter-base; + filter: saturate(0.8) contrast(1.15) grayscale(0.25) $filters; + + @content; + } + + // ludwig Instagram filter + %ludwig, + .ludwig { + @include ludwig; + } \ No newline at end of file