Add 8 corner images.

Doesn't work well with --rotation but you can just set top,left or whatever. --offset works.

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -96,7 +96,7 @@ const BrewItem = createClass({
 	render : function(){
 		const brew = this.props.brew;
 		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
-			brew.tags = brew.tags?.filter(tag => tag); //remove tags that are empty strings
+			brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
 		}
 		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
@@ -112,7 +112,7 @@ const BrewItem = createClass({
 					<div className='brewTags' title={`Tags:\n${brew.tags.join('\n')}`}>
 						<i className='fas fa-tags'/>
 						{brew.tags.map((tag, idx)=>{
-							let matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
 							return <span className={matches[1]}>{matches[2]}</span>;
 						})}
 					</div>

themes/V3/Blank/snippets.js

@@ -104,9 +104,14 @@ module.exports = [
 				gen  : WatercolorGen,
 			},
 			{
-				name : 'Watercolor Image Mask',
+				name : 'Watercolor Image Mask Edge',
 				icon : 'fas fa-fill-drip',
-				gen  : ImageMaskGen,
+				gen  : ImageMaskGen.edge,
+			},
+			{
+				name : 'Watercolor Image Mask Corner',
+				icon : 'fas fa-fill-drip',
+				gen  : ImageMaskGen.corner,
 			},
 			{
 				name : 'Watermark',

themes/V3/Blank/snippets/imageMask.gen.js

@@ -1,7 +1,27 @@
 const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
+
+module.exports = {
+	edge : ()=>{
+		return dedent`
+			{{imageMask${_.random(1, 8)},--offset:0cm,--rotation:0
+			  ![](https://assets1.ignimgs.com/2019/05/29/dndmobile-br-1559158957902_160w.jpg?width=1280){height:100%}
+
+			  <!-- Use offset to shift the edge up or down. Use rotation to set rotation angle in degrees. -->
+			}}\n\n`;
+	},
+
+	corner : ()=>{
+		return dedent`
+			{{imageMask_Corner${_.random(1, 8)},--offset:0cm,bottom,left
+			  ![](https://assets1.ignimgs.com/2019/05/29/dndmobile-br-1559158957902_160w.jpg?width=1280){height:100%}
+
+			  <!-- Use offset to shift the edge up or down. Use top, bottom, left, and right to select a corner -->
+			}}\n\n`;
+	}
+
+};
+
+()=>{
 
-module.exports = ()=>{
-	return `{{imageMask${_.random(1, 6)},--offset:0cm,--rotation:0
-![](https://assets1.ignimgs.com/2019/05/29/dndmobile-br-1559158957902_160w.jpg?width=1280){height:100%}
-}}\n\n`;
 };

themes/V3/Blank/style.less

@@ -180,9 +180,11 @@ body {
 		--rotation            : 0;
 		--revealer            : none;
 		--checkerboard        : none;
+		--scaleX              : 1;
+		--scaleY              : 1;
 		-webkit-mask-image    : var(--wc), var(--revealer);
 		-webkit-mask-repeat   : repeat-x;
-		-webkit-mask-size     : 50%;
+		-webkit-mask-size     : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
 		-webkit-mask-position : 50% calc(50% - var(--offset));
 		mask-image            : var(--wc);
 		mask-repeat           : repeat-x;
@@ -191,7 +193,7 @@ body {
 		background-image      : var(--checkerboard);
 		background-size       : 20px;
 		z-index               : -1;
-		transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation)));
+		transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 		transition            : transform 2s;
 		& > p:has(img) {
 			position   : absolute;
@@ -199,7 +201,7 @@ body {
 			height     : 50%;
 			bottom     : 50%;
 			left       : 50%;
-			transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation)));
+			transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 			transition : transform 2s;
 		}
 		& img {
@@ -238,6 +240,33 @@ body {
 	.imageMask7  { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
 	.imageMask8  { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
 
+	[class*="imageMask_Corner"] {
+		-webkit-mask-size : 50% 50%; //Scale both dimensions to fit page size
+		&.bottom {
+			--rotation : 0;
+		}
+		&.top {
+			--rotation : 0;
+			--scaleY   : -1;
+		}
+		&.left {
+			--rotation : 0;
+		}
+		&.right {
+			--rotation : 0;
+			--scaleX   : -1;
+		}
+	}
+
+	.imageMask_Corner1  { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
+	.imageMask_Corner2  { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
+	.imageMask_Corner3  { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
+	.imageMask_Corner4  { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
+	.imageMask_Corner5  { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
+	.imageMask_Corner6  { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
+	.imageMask_Corner7  { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
+	.imageMask_Corner8  { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
+
 	//************************************
 	// *           CODE BLOCKS
 	// ************************************/