diff --git a/styles/blocks/index.css b/styles/blocks/index.css index e7efb94..0cf7c13 100644 --- a/styles/blocks/index.css +++ b/styles/blocks/index.css @@ -2,3 +2,4 @@ @import './buttons.css'; @import './core.css'; +@import './misc.css'; diff --git a/styles/blocks/misc.css b/styles/blocks/misc.css new file mode 100644 index 0000000..c1375b4 --- /dev/null +++ b/styles/blocks/misc.css @@ -0,0 +1,24 @@ +/* Misc block styles */ + +.logo-soup.layout-carousel { + /* Apply a gradient mask that fades 40px on both the left and right sides */ + mask-image: linear-gradient( + to right, + transparent 0px, + black 40px, + black calc(100% - 40px), + transparent 100% + ); + + -webkit-mask-image: linear-gradient( + to right, + transparent 0px, + black 40px, + black calc(100% - 40px), + transparent 100% + ); + + /* Ensures the mask doesn't break scrolling functionality */ + mask-composite: intersect; + -webkit-mask-composite: intersect; +}