Diff mask for even/odd pages

themes/V3/5ePHB/style.less

@@ -798,41 +798,50 @@
 	//*****************************
 	// *         PART COVER
 	// *****************************/
-	.page .partCover {
+	.page {
-		background-image: @partCoverHeader;
+		.partCover {
-		background-repeat: no-repeat;
+			background-image: @partCoverHeader;
-		position: absolute;
+			background-repeat: no-repeat;
-		background-size: 100%;
-		inset: 0;
-		img {
 			position: absolute;
+			background-size: 100%;
 			inset: 0;
-			height:100%;
+
-			mask-image: @partCoverMask;
+			img {
-			mask-size: 816px;
+				position: absolute;
-			-webkit-mask-image: @partCoverMask;
+				inset: 0;
-			-webkit-mask-size: 816px;
+				height: 100%;
+				mask-image: @partCoverMaskOdd;
+				mask-size: 816px;
+				-webkit-mask-image: @partCoverMaskOdd;
+				-webkit-mask-size: 816px;
+			}
+
+			h1 {
+				text-align: center;
+				text-transform: uppercase;
+				font-size: 80px;
+				font-family: NodestoCapsCondensed;
+				font-variant: small-caps;
+				max-width: 7ch;
+				text-overflow: clip;
+				white-space: nowrap;
+				overflow: hidden;
+				margin-inline: auto;
+			}
+
+			h2 {
+				text-align: center;
+				font-family: MartelSansBlack;
+				font-size: 18px;
+				position: relative;
+				max-width: 18ch;
+				margin-inline: auto;
+				margin-top: -5px;
+			}
 		}
-		h1 {
+		&:nth-child(even) .partCover img {
-			text-align: center;
+			mask-image: @partCoverMaskEven;
-			text-transform: uppercase;
+			-webkit-mask-image: @partCoverMaskEven;
-			font-size: 80px;
-			font-family: NodestoCapsCondensed;
-			font-variant: small-caps;
-			max-width: 7ch;
-			text-overflow: clip; 
-			white-space: nowrap;
-			overflow: hidden;
-			margin-inline: auto;
-		}
-		h2 {
-			text-align: center;
-			font-family: MartelSansBlack;
-			font-size: 18px;
-			position: relative;
-			max-width: 18ch;
-			margin-inline: auto;
-			margin-top: -5px;
 		}
 	}
 }

themes/assets/assets.less

@@ -11,7 +11,8 @@
 @codeBorderImage          : url('/assets/codeBorder.png');
 @classTableDecoration     : url('/assets/classTableDecoration.png');
 @partCoverHeader          : url('/assets/partCoverHeader.png');
-@partCoverMask            : url('/assets/partCoverMask.png');
+@partCoverMaskOdd         : url('/assets/partCoverMaskOdd.png');
+@partCoverMaskEven         : url('/assets/partCoverMaskEven.png');
 
 // Watercolor Images
 @watercolor1  : url('/assets/watercolor/watercolor1.png');