diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js index cd508cccb..d3da91765 100644 --- a/themes/V3/Blank/snippets.js +++ b/themes/V3/Blank/snippets.js @@ -1,7 +1,8 @@ /* eslint-disable max-lines */ -const WatercolorGen = require('./snippets/watercolor.gen.js'); -const dedent = require('dedent-tabs').default; +const WatercolorGen = require('./snippets/watercolor.gen.js'); +const ImageMaskGen = require('./snippets/imageMask.gen.js'); +const dedent = require('dedent-tabs').default; @@ -102,6 +103,11 @@ module.exports = [ icon : 'fas fa-fill-drip', gen : WatercolorGen, }, + { + name : 'Watercolor Image Mask', + icon : 'fas fa-fill-drip', + gen : ImageMaskGen, + }, { name : 'Watermark', icon : 'fas fa-id-card', diff --git a/themes/V3/Blank/snippets/imageMask.gen.js b/themes/V3/Blank/snippets/imageMask.gen.js new file mode 100644 index 000000000..3fed11ce4 --- /dev/null +++ b/themes/V3/Blank/snippets/imageMask.gen.js @@ -0,0 +1,7 @@ +const _ = require('lodash'); + +module.exports = ()=>{ + return `{{imageMask${_.random(1, 6)},top +![](https://assets1.ignimgs.com/2019/05/29/dndmobile-br-1559158957902_160w.jpg?width=1280) +}}\n\n`; +}; diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index 668be712e..3b5829622 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -170,6 +170,78 @@ body { .watercolor11 { --wc : @watercolor11; } .watercolor12 { --wc : @watercolor12; } + /* Image Masks */ + [class*="imageMask"] { + position:absolute; + height: 100%; + width: 279.4mm; // Page height + left:0px; + bottom:0px; + --revealer : none; + -webkit-mask-image : var(--wc), var(--revealer); + -webkit-mask-repeat : no-repeat; + -webkit-mask-size : 100% 100%; + mask-image : var(--wc); + mask-repeat : no-repeat; + mask-size : 100% 100%; + z-index : -1; + //background-image : url(/assets/watercolorMasks/testBackground.jpg); + //background-size : 0px; // Hide the background so it can be inherited into :before + transform : rotate(calc(1deg * var(--rotation))); + transition : transform 2s; + & > :not(img) { + position : absolute; + bottom : 0; + left : 0; + width : 100%; + height : 100%; + transform : rotate(calc(-1deg * var(--rotation))); + transition : transform 2s; + } + & img { + position : absolute; + display : block; + } + &:before { + content:''; + position:absolute; + display:block; + height:100%; + width:100%; + bottom:0px; + background-image:inherit; + background-position: bottom 0px left 0px; + background-size:100% 100%; + background-repeat:no-repeat; + transform : rotate(calc(-1deg * var(--rotation))); + transition : transform 2s; + } + &.bottom { + --rotation : 0; + } + &.top { + --rotation : 180; + } + &.left { + --rotation : 90; + } + &.right { + --rotation : -90; + left : unset; + right : 0px; + } + &.revealImage { + --revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2)); + } + } + + .imageMask1 { --wc : url(/assets/waterColorMasks/edge/0001.png); } + .imageMask2 { --wc : url(/assets/waterColorMasks/edge/0002.png); } + .imageMask3 { --wc : url(/assets/waterColorMasks/edge/0003.png); } + .imageMask4 { --wc : url(/assets/waterColorMasks/edge/0004.png); } + .imageMask5 { --wc : url(/assets/waterColorMasks/edge/0005.png); } + .imageMask6 { --wc : url(/assets/waterColorMasks/edge/0006.png); } + //************************************ // * CODE BLOCKS // ************************************/ diff --git a/themes/assets/testBackground.jpg b/themes/assets/testBackground.jpg new file mode 100644 index 000000000..c2f7804e8 Binary files /dev/null and b/themes/assets/testBackground.jpg differ diff --git a/themes/assets/waterColorMasks/edge/0001.png b/themes/assets/waterColorMasks/edge/0001.png new file mode 100644 index 000000000..57293bac0 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0001.png differ diff --git a/themes/assets/waterColorMasks/edge/0002.png b/themes/assets/waterColorMasks/edge/0002.png new file mode 100644 index 000000000..411c7718f Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0002.png differ diff --git a/themes/assets/waterColorMasks/edge/0003.png b/themes/assets/waterColorMasks/edge/0003.png new file mode 100644 index 000000000..2162e7745 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0003.png differ diff --git a/themes/assets/waterColorMasks/edge/0004.png b/themes/assets/waterColorMasks/edge/0004.png new file mode 100644 index 000000000..b08ddb9f8 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0004.png differ diff --git a/themes/assets/waterColorMasks/edge/0005.png b/themes/assets/waterColorMasks/edge/0005.png new file mode 100644 index 000000000..c77d7d0b2 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0005.png differ diff --git a/themes/assets/waterColorMasks/edge/0006.png b/themes/assets/waterColorMasks/edge/0006.png new file mode 100644 index 000000000..842c803c5 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0006.png differ diff --git a/themes/assets/waterColorMasks/edge/0007.png b/themes/assets/waterColorMasks/edge/0007.png new file mode 100644 index 000000000..ca91beb13 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0007.png differ diff --git a/themes/assets/waterColorMasks/edge/0008.png b/themes/assets/waterColorMasks/edge/0008.png new file mode 100644 index 000000000..ef72394ea Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0008.png differ diff --git a/themes/assets/waterColorMasks/edge/0009.png b/themes/assets/waterColorMasks/edge/0009.png new file mode 100644 index 000000000..2c62dadea Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0009.png differ diff --git a/themes/assets/waterColorMasks/edge/0010.png b/themes/assets/waterColorMasks/edge/0010.png new file mode 100644 index 000000000..2bc1e4913 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0010.png differ diff --git a/themes/assets/waterColorMasks/edge/0011.png b/themes/assets/waterColorMasks/edge/0011.png new file mode 100644 index 000000000..f44e68d4f Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0011.png differ diff --git a/themes/assets/waterColorMasks/edge/0012.png b/themes/assets/waterColorMasks/edge/0012.png new file mode 100644 index 000000000..9716ef690 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0012.png differ diff --git a/themes/assets/waterColorMasks/edge/0013.png b/themes/assets/waterColorMasks/edge/0013.png new file mode 100644 index 000000000..7533e9a8f Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0013.png differ diff --git a/themes/assets/waterColorMasks/edge/0014.png b/themes/assets/waterColorMasks/edge/0014.png new file mode 100644 index 000000000..fc8ee7be1 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0014.png differ diff --git a/themes/assets/waterColorMasks/edge/0015.png b/themes/assets/waterColorMasks/edge/0015.png new file mode 100644 index 000000000..35f2c2dd1 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0015.png differ diff --git a/themes/assets/waterColorMasks/edge/0016.png b/themes/assets/waterColorMasks/edge/0016.png new file mode 100644 index 000000000..9e9f6288b Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0016.png differ diff --git a/themes/assets/waterColorMasks/edge/0017.png b/themes/assets/waterColorMasks/edge/0017.png new file mode 100644 index 000000000..4b37b0eff Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0017.png differ diff --git a/themes/assets/waterColorMasks/edge/0018.png b/themes/assets/waterColorMasks/edge/0018.png new file mode 100644 index 000000000..15ab95c60 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0018.png differ diff --git a/themes/assets/waterColorMasks/edge/0019.png b/themes/assets/waterColorMasks/edge/0019.png new file mode 100644 index 000000000..2b663e360 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0019.png differ diff --git a/themes/assets/waterColorMasks/edge/0020.png b/themes/assets/waterColorMasks/edge/0020.png new file mode 100644 index 000000000..10ca34a79 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0020.png differ diff --git a/themes/assets/waterColorMasks/edge/0021.png b/themes/assets/waterColorMasks/edge/0021.png new file mode 100644 index 000000000..aff0803aa Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0021.png differ diff --git a/themes/assets/waterColorMasks/edge/0022.png b/themes/assets/waterColorMasks/edge/0022.png new file mode 100644 index 000000000..b9f5f4c73 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0022.png differ diff --git a/themes/assets/waterColorMasks/edge/0023.png b/themes/assets/waterColorMasks/edge/0023.png new file mode 100644 index 000000000..3f3ddc35b Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0023.png differ diff --git a/themes/assets/waterColorMasks/edge/0024.png b/themes/assets/waterColorMasks/edge/0024.png new file mode 100644 index 000000000..edff0d542 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0024.png differ diff --git a/themes/assets/waterColorMasks/edge/0025.png b/themes/assets/waterColorMasks/edge/0025.png new file mode 100644 index 000000000..aadcec7f8 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0025.png differ diff --git a/themes/assets/waterColorMasks/edge/0026.png b/themes/assets/waterColorMasks/edge/0026.png new file mode 100644 index 000000000..caa2a4f35 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0026.png differ diff --git a/themes/assets/waterColorMasks/edge/0027.png b/themes/assets/waterColorMasks/edge/0027.png new file mode 100644 index 000000000..aaf885111 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0027.png differ