diff --git a/site/filters.json b/site/filters.json index d762217..828ec9b 100644 --- a/site/filters.json +++ b/site/filters.json @@ -62,7 +62,7 @@ }, { "name": "Ginza", - "is_done": false, + "is_done": true, "usage": "ginza" }, { diff --git a/source/css/ginza.css b/source/css/ginza.css new file mode 100644 index 0000000..d431a54 --- /dev/null +++ b/source/css/ginza.css @@ -0,0 +1,44 @@ +/* + * + * Ginza + * + */ + +.ginza { + position: relative; + -webkit-filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); + filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2); } + + .ginza img { + width: 100%; + z-index: 1; } + + .ginza:before { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 2; } + + .ginza:after { + content: ''; + display: block; + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + pointer-events: none; + z-index: 3; } + + .ginza::after { + background: rgba(0, 70, 150, 0.4); + mix-blend-mode: lighten; } + + .ginza::before { + background: rgba(247, 176, 153, 0.56); + mix-blend-mode: darken; } diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index e1776c7..76c48f6 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -22,4 +22,5 @@ @import 'brannan'; @import 'valencia'; @import 'kelvin'; -@import 'maven'; \ No newline at end of file +@import 'maven'; +@import 'ginza'; diff --git a/source/scss/ginza.scss b/source/scss/ginza.scss new file mode 100644 index 0000000..d30138c --- /dev/null +++ b/source/scss/ginza.scss @@ -0,0 +1,47 @@ +/* + * + * Ginza + * + */ + +@import 'shared'; + +// mixin to extend ginza filter +// @mixin ginza +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include ginza; +// } +// or +// img { +// @include ginza(blur(2px)); +// } +// or +// img { +// @include ginza(blur(2px)) { +// /*...*/ +// }; +// } +@mixin ginza($filters...) { + @include filter-base; + filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2) $filters; + + &::after { + background: rgba(0, 70, 150, .4); + mix-blend-mode: lighten; + } + + &::before { + background: rgba(247, 176, 153, .56); + mix-blend-mode: darken; + } + + @content; +} + +// ginza Instagram filter +%ginza, +.ginza { + @include ginza; +}