Initial commit

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',

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`;
+};

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
 	// ************************************/