Allow rotation and positioning up and down

client/homebrew/pages/printPage/printPage.jsx

@@ -91,6 +91,7 @@ const PrintPage = createClass({
 
 		return <div>
 			<Meta name='robots' content='noindex, nofollow' />
+			<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
 			{baseThemePath &&
 				<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
 			}

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

@@ -1,7 +1,7 @@
 const _ = require('lodash');
 
 module.exports = ()=>{
-	return `{{imageMask${_.random(1, 6)},top
+	return `{{imageMask${_.random(1, 6)},--offset:0cm,--rotation:0
-![](https://assets1.ignimgs.com/2019/05/29/dndmobile-br-1559158957902_160w.jpg?width=1280)
+![](https://assets1.ignimgs.com/2019/05/29/dndmobile-br-1559158957902_160w.jpg?width=1280){height:100%}
 }}\n\n`;
 };

themes/V3/Blank/style.less

@@ -172,34 +172,34 @@ body {
 
 	/* Image Masks */
 	[class*="imageMask"] {
-		position:absolute;
+		position              : absolute;
-		height: 100%;
+		height                : 200%;
-		width: 279.4mm; // Page height
+		width                 : 200%;
-		left:0px;
+		left                  : 50%;
-		bottom:0px;
+		bottom                : 50%;
-		--rotation : 0;
+		--rotation            : 0;
-		--revealer : none;
+		--revealer            : none;
-		--checkerboard : none;
+		--checkerboard        : none;
-		-webkit-mask-image  : var(--wc), var(--revealer);
+		-webkit-mask-image    : var(--wc), var(--revealer);
-		-webkit-mask-repeat : no-repeat;
+		-webkit-mask-repeat   : repeat-x;
-		-webkit-mask-size   : 100% 100%;
+		-webkit-mask-size     : 50%;
-		mask-image  : var(--wc);
+		-webkit-mask-position : 50% calc(50% - var(--offset));
-		mask-repeat : no-repeat;
+		mask-image            : var(--wc);
-		mask-size   : 100% 100%;
+		mask-repeat           : repeat-x;
-		background-image: var(--checkerboard);
+		mask-size             : 50%;
-		background-size: 20px;
+		mask-position         : 50% calc(50% - var(--offset));
-		z-index     : -1;
+		background-image      : var(--checkerboard);
-		//background-image : url(/assets/watercolorMasks/testBackground.jpg);
+		background-size       : 20px;
-		//background-size  : 0px; // Hide the background so it can be inherited into :before
+		z-index               : -1;
-		transform  : rotate(calc(1deg * var(--rotation)));
+		transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation)));
-		transition       : transform 2s;
+		transition            : transform 2s;
-		& > :not(img) {
+		& > p:has(img) {
 			position   : absolute;
-			bottom     : 0;
+			width      : 50%;
-			left       : 0;
+			height     : 50%;
-			width      : 100%;
+			bottom     : 50%;
-			height     : 100%;
+			left       : 50%;
-			transform  : rotate(calc(-1deg * var(--rotation)));
+			transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation)));
 			transition : transform 2s;
 		}
 		& img {
@@ -221,8 +221,6 @@ body {
 		}
 		&.right {
 			--rotation : -90;
-			left  : unset;
-			right : 0px;
 			& img {right: 0;}
 		}
 		&.revealImage {
@@ -231,12 +229,14 @@ body {
 		}
 	}
 
-	.imageMask1  { --wc : url(/assets/waterColorMasks/edge/0001.png); }
+	.imageMask1  { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
-	.imageMask2  { --wc : url(/assets/waterColorMasks/edge/0002.png); }
+	.imageMask2  { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
-	.imageMask3  { --wc : url(/assets/waterColorMasks/edge/0003.png); }
+	.imageMask3  { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
-	.imageMask4  { --wc : url(/assets/waterColorMasks/edge/0004.png); }
+	.imageMask4  { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
-	.imageMask5  { --wc : url(/assets/waterColorMasks/edge/0005.png); }
+	.imageMask5  { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
-	.imageMask6  { --wc : url(/assets/waterColorMasks/edge/0006.png); }
+	.imageMask6  { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
+	.imageMask7  { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
+	.imageMask8  { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
 
 	//************************************
 	// *           CODE BLOCKS