diff --git a/site/filters.json b/site/filters.json index 878ecde..85ddc47 100644 --- a/site/filters.json +++ b/site/filters.json @@ -12,7 +12,7 @@ }, { "name": "Amaro", - "is_done": false, + "is_done": true, "usage": "amaro" }, { @@ -203,4 +203,4 @@ ], "images": ["atx", "bike", "cacti", "lakegeneva", "tahoe"] -} \ No newline at end of file +} diff --git a/source/scss/amaro.scss b/source/scss/amaro.scss new file mode 100644 index 0000000..38e39cd --- /dev/null +++ b/source/scss/amaro.scss @@ -0,0 +1,43 @@ +/* + * + * Amaro + * + */ + +@import 'shared'; + +// mixin to extend amaro filter +// @mixin amaro +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include amaro; +// } +// or +// img { +// @include amaro(blur(2px)); +// } +// or +// img { +// @include amaro(blur(2px)) { +// /*...*/ +// }; +// } +@mixin amaro($filters...) { + @include filter-base; + filter: hue-rotate(-2deg) contrast(1.0) brightness(0.9) saturate(1.1); + + &::after { + background: radial-gradient(circle at 29% 33%,rgba(85, 78, 136, 0.28),rgb(72, 17, 76),#540d80 97%); + mix-blend-mode: screen; + opacity: 0.4; + } + + @content; +} + +// amaro Instagram filter +%amaro, +.amaro { + @include amaro; +} diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index 65872f7..f103e61 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -1,4 +1,5 @@ @import 'aden'; +@import 'amaro'; @import 'inkwell'; @import 'perpetua'; @import 'reyes';