last draft

themes/V3/5ePHB/snippets/partcoverpage.gen.js

@@ -38,16 +38,15 @@ var titles = [
 ];
 
 module.exports = ()=>{
-	return `
-{{partCover
-# PART X
-## ${_.sample(titles)}
+	return `{{partCover}}
 
+# PART X
+## Developing and Using NPCs
+
+{{imageMaskEdge5,--offset:-12cm,--rotation:0        
 ![Background](https://i.imgur.com/dpg5qPT.png)
 }}
-        
-{{pageNumber,auto}}
-{{footnote PART X | SECTION NAME}}
-
+<!-- Use --offset to shift the mask toward or away from the page center.
+     Use --rotation to set rotation angle in degrees. -->
 \\page`;
 };

themes/V3/5ePHB/style.less

@@ -1,3 +1,4 @@
+@layer V3_5ePHB {
 	@import (less) './themes/fonts/5e/fonts.less';
 	@import (less) './themes/assets/assets.less';
 
@@ -14,34 +15,49 @@
 		--HB_Color_Footnotes: #C9AD6A; // Gold
 	}
 
-@page { margin: 0; }
+	@page {
+		margin: 0;
+	}
+
 	body {
 		counter-reset: phb-page-numbers;
 	}
+
 	* {
 		-webkit-print-color-adjust: exact;
 	}
+
 	.useSansSerif() {
 		font-family: ScalySansRemake;
 		font-size: 0.318cm;
 		line-height: 1.2em;
-	p,dl,ul,ol {
+
+		p,
+		dl,
+		ul,
+		ol {
 			line-height: 1.2em;
 		}
-	ul, ol {
+
+		ul,
+		ol {
 			padding-left: 1em;
 		}
+
 		em {
 			font-style: italic;
 		}
+
 		strong {
 			font-weight: 800;
 			letter-spacing: -0.02em;
 		}
+
 		h5+* {
 			margin-top: 0.1cm;
 		}
 	}
+
 	.useColumns(@multiplier : 1, @fillMode: balance) {
 		column-count: 2;
 		column-fill: @fillMode;
@@ -54,12 +70,14 @@ body {
 		-webkit-column-gap: 0.9cm;
 		-moz-column-gap: 0.9cm;
 	}
+
 	.columnWrapper {
 		max-height: 100%;
 		column-span: all;
 		columns: inherit;
 		column-gap: inherit;
 	}
+
 	.page {
 		.useColumns();
 		counter-increment: phb-page-numbers;
@@ -78,6 +96,7 @@ body {
 		page-break-before: always;
 		page-break-after: always;
 	}
+
 	//*****************************
 	// *            BASE
 	// *****************************/
@@ -87,13 +106,16 @@ body {
 			overflow-wrap: break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
 			display: block;
 			line-height: 1.25em;
+
 			&+* {
 				margin-top: 0.325cm;
 			}
+
 			&+p {
 				margin-top: 0;
 			}
 		}
+
 		ul {
 			margin-bottom: 0.8em;
 			padding-left: 1.4em;
@@ -101,6 +123,7 @@ body {
 			list-style-position: outside;
 			list-style-type: disc;
 		}
+
 		ol {
 			margin-bottom: 0.8em;
 			padding-left: 1.4em;
@@ -108,38 +131,51 @@ body {
 			list-style-position: outside;
 			list-style-type: decimal;
 		}
+
 		//Indents after p or lists
-	p+p, ul+p, ol+p{
+		p+p,
+		ul+p,
+		ol+p {
 			text-indent: 1em;
 		}
+
 		img {
 			z-index: -1;
 		}
+
 		strong {
 			font-weight: bold;
 			letter-spacing: -0.02em;
 		}
+
 		em {
 			font-style: italic;
 		}
+
 		sup {
 			vertical-align: super;
 			font-size: smaller;
 			line-height: 0;
 		}
+
 		sub {
 			vertical-align: sub;
 			font-size: smaller;
 			line-height: 0;
 		}
+
 		//*****************************
 		// *           HEADERS
 		// *****************************/
-	h1,h2,h3,h4{
+		h1,
+		h2,
+		h3,
+		h4 {
 			font-family: MrEavesRemake;
 			font-weight: 800;
 			color: var(--HB_Color_HeaderText);
 		}
+
 		h1 {
 			margin-bottom: 0.18cm; //Margin-bottom only because this is WIDE
 			column-span: all;
@@ -147,6 +183,7 @@ body {
 			line-height: 1em;
 			-webkit-column-span: all;
 			-moz-column-span: all;
+
 			&+p::first-letter {
 				float: left;
 				font-family: SolberaImitationRemake;
@@ -162,41 +199,51 @@ body {
 				-webkit-background-clip: text;
 				color: rgba(0, 0, 0, 0);
 			}
+
 			&+p::first-line {
 				font-variant: small-caps;
 			}
 		}
+
 		h2 {
 			//margin-top    : 0px; //Font is misaligned. Shift up slightly
 			//margin-bottom : 0.05cm;
 			font-size: 0.75cm;
 			line-height: 0.988em; //Font is misaligned. Shift up slightly
 		}
+
 		h3 {
 			//margin-top    : -0.1cm; //Font is misaligned. Shift up slightly
 			//margin-bottom : 0.1cm;
 			font-size: 0.575cm;
-		border-bottom : 2px solid var(--HB_Color_HeaderUnderline);;
+			border-bottom: 2px solid var(--HB_Color_HeaderUnderline);
+			;
 			line-height: 0.995em; //Font is misaligned. Shift up slightly
+
 			&+* {
 				margin-top: 0.17cm;
 			}
 		}
+
 		*+h3 {
 			margin-top: 0.155cm; //(0.325 - 0.17)
 		}
+
 		h4 {
 			//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
 			//margin-bottom : 0.02cm;
 			font-size: 0.458cm;
 			line-height: 0.971em; //Font is misaligned. Shift up slightly
+
 			&+* {
 				margin-top: 0.09cm;
 			}
 		}
+
 		*+h4 {
 			margin-top: 0.235cm; //(0.325 - 0.09)
 		}
+
 		h5 {
 			//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
 			//margin-bottom : 0.02cm;
@@ -204,10 +251,12 @@ body {
 			font-size: 0.423cm;
 			font-weight: 900;
 			line-height: 0.951em; //Font is misaligned. Shift up slightly
+
 			&+* {
 				margin-top: 0.2cm;
 			}
 		}
+
 		//*****************************
 		// *          TABLE
 		// *****************************/
@@ -215,12 +264,15 @@ body {
 			.useSansSerif();
 			width: 100%;
 			line-height: 16px;
+
 			&+* {
 				margin-top: 0.325cm;
 			}
+
 			thead {
 				display: table-row-group;
 				font-weight: 800;
+
 				th {
 					vertical-align: bottom;
 					//padding        : 0.14em 0.4em;
@@ -228,6 +280,7 @@ body {
 					//line-height : 16px;        // PDF to render at same height until Chrome 108
 				}
 			}
+
 			tbody {
 				tr {
 					td {
@@ -235,12 +288,14 @@ body {
 						padding: 0px 1.5px; // Both of these are temporary, just to force
 						//line-height : 16px;        // PDF to render at same height until Chrome 108
 					}
+
 					&:nth-child(odd) {
 						background-color: var(--HB_Color_Accent);
 					}
 				}
 			}
 		}
+
 		//*****************************
 		// *            NOTE
 		// *****************************/
@@ -254,23 +309,29 @@ body {
 			border-image-width: 11px;
 			padding: 0.13cm 0.16cm;
 			filter: drop-shadow(1px 4px 6px #888);
+
 			.page :where(&) {
 				margin-top: 9px; //Prevent top border getting cut off on colbreak
 			}
+
 			&+* {
 				margin-top: 0.45cm;
 			}
+
 			h5 {
 				font-size: 0.375cm;
 			}
+
 			p {
 				display: block;
 				padding-bottom: 0px;
 			}
+
 			:last-child {
 				margin-bottom: 0;
 			}
 		}
+
 		//************************************
 		// *       DESCRIPTIVE TEXT BOX
 		// ************************************/
@@ -283,24 +344,30 @@ body {
 			border-image-outset: 4px;
 			padding: 0.1em;
 			filter: drop-shadow(0 0 3px #faf7ea);
+
 			.page :where(&) {
 				margin-top: 4px; //Prevent top border getting cut off on colbreak
 			}
+
 			&+* {
 				margin-top: 0.45cm;
 			}
+
 			h5 {
 				font-size: 0.375cm;
 			}
+
 			p {
 				display: block;
 				padding-bottom: 0px;
 				line-height: 1.5em;
 			}
+
 			:last-child {
 				margin-bottom: 0;
 			}
 		}
+
 		//*****************************
 		// *    Images Snippets
 		// *****************************/
@@ -313,18 +380,23 @@ body {
 			font-family: WalterTurncoat;
 			font-size: 0.27cm;
 			color: var(--HB_Color_CaptionText);
-		p, p + p {
+
+			p,
+			p+p {
 				margin: unset;
 				text-indent: unset;
 				line-height: 1em;
 			}
+
 			h5 {
 				font-size: 1.3em;
 				font-family: WalterTurncoat;
 			}
+
 			a {
 				color: inherit;
 				text-decoration: unset;
+
 				&:hover {
 					text-decoration: underline;
 				}
@@ -348,6 +420,7 @@ body {
 			opacity: 30%;
 			transform: rotate(-45deg);
 			z-index: 500;
+
 			p {
 				margin-bottom: none;
 			}
@@ -356,8 +429,10 @@ body {
 		/* Watercolor */
 		[class*="watercolor"] {
 			position: absolute;
-		width               : 2000px;    /* dimensions need to be real big so the user can set */
-		height              : 2000px;    /* height or width and the image will maintain aspect ratio */
+			width: 2000px;
+			/* dimensions need to be real big so the user can set */
+			height: 2000px;
+			/* height or width and the image will maintain aspect ratio */
 			-webkit-mask-image: var(--wc);
 			-webkit-mask-size: contain;
 			-webkit-mask-repeat: no-repeat;
@@ -365,29 +440,67 @@ body {
 			mask-size: contain;
 			mask-repeat: no-repeat;
 			background-size: cover;
-		background-color    : var(--HB_Color_WatercolorStain);			/*default color*/
-		--wc                : @watercolor1;         /*default image*/
+			background-color: var(--HB_Color_WatercolorStain);
+			/*default color*/
+			--wc: @watercolor1;
+			/*default image*/
 			z-index: -2;
 		}
 
-	.watercolor1  { --wc : @watercolor1; }
-	.watercolor2  { --wc : @watercolor2; }
-	.watercolor3  { --wc : @watercolor3; }
-	.watercolor4  { --wc : @watercolor4; }
-	.watercolor5  { --wc : @watercolor5; }
-	.watercolor6  { --wc : @watercolor6; }
-	.watercolor7  { --wc : @watercolor7; }
-	.watercolor8  { --wc : @watercolor8; }
-	.watercolor9  { --wc : @watercolor9; }
-	.watercolor10 { --wc : @watercolor10; }
-	.watercolor11 { --wc : @watercolor11; }
-	.watercolor12 { --wc : @watercolor12; }
+		.watercolor1 {
+			--wc: @watercolor1;
+		}
+
+		.watercolor2 {
+			--wc: @watercolor2;
+		}
+
+		.watercolor3 {
+			--wc: @watercolor3;
+		}
+
+		.watercolor4 {
+			--wc: @watercolor4;
+		}
+
+		.watercolor5 {
+			--wc: @watercolor5;
+		}
+
+		.watercolor6 {
+			--wc: @watercolor6;
+		}
+
+		.watercolor7 {
+			--wc: @watercolor7;
+		}
+
+		.watercolor8 {
+			--wc: @watercolor8;
+		}
+
+		.watercolor9 {
+			--wc: @watercolor9;
+		}
+
+		.watercolor10 {
+			--wc: @watercolor10;
+		}
+
+		.watercolor11 {
+			--wc: @watercolor11;
+		}
+
+		.watercolor12 {
+			--wc: @watercolor12;
+		}
 
 		//*****************************
 		// *    MONSTER STAT BLOCK
 		// *****************************/
 		.monster {
 			.useSansSerif();
+
 			&.frame {
 				border-style: solid;
 				border-width: 7px 6px;
@@ -413,11 +526,13 @@ body {
 				font-size: 0.62cm;
 				line-height: 1em;
 				margin: 0;
+
 				&+p {
 					font-size: 0.304cm; //Monster size and type subtext
 					margin-bottom: 0;
 				}
 			}
+
 			h3 {
 				font-family: ScalySansRemake;
 				font-weight: 800;
@@ -441,10 +556,12 @@ body {
 			hr~ :is(dl, p) {
 				color: var(--HB_Color_HeaderText);
 			}
+
 			hr:last-of-type {
 				&~ :is(dl, p) {
 					color: inherit; // After the HRs, reset text to black
 				}
+
 				&+* {
 					margin-top: 0.325cm; // Space after last HR
 				}
@@ -459,10 +576,13 @@ body {
 				border-style: none;
 				border-image: none;
 				-webkit-column-span: none;
+
 				tr {
 					background-color: transparent;
 				}
-			td,th {
+
+				td,
+				th {
 					padding: 0px;
 				}
 			}
@@ -491,18 +611,22 @@ body {
 			background-image: @footerAccentImage;
 			background-size: cover;
 		}
+
 		&:nth-child(even) {
 			&:after {
 				transform: scaleX(-1);
 			}
+
 			.pageNumber {
 				left: 2px;
 			}
+
 			.footnote {
 				left: 80px;
 				text-align: left;
 			}
 		}
+
 		.pageNumber {
 			position: absolute;
 			right: 2px;
@@ -512,10 +636,12 @@ body {
 			color: var(--HB_Color_Footnotes);
 			text-align: center;
 			text-indent: 0;
+
 			&.auto::after {
 				content: counter(phb-page-numbers);
 			}
 		}
+
 		.footnote {
 			position: absolute;
 			right: 80px;
@@ -526,6 +652,7 @@ body {
 			color: var(--HB_Color_Footnotes);
 			text-align: right;
 		}
+
 		//************************************
 		// *           CODE BLOCKS
 		// ************************************/
@@ -551,13 +678,16 @@ body {
 			border-radius: 12px;
 			margin-bottom: 2px;
 			padding: 0.15cm;
+
 			.page :where(&) {
 				margin-top: 2px; //Prevent top border getting cut off on colbreak
 			}
+
 			&+* {
 				margin-top: 0.325cm;
 			}
 		}
+
 		//*****************************
 		// *          EXTRAS
 		// *****************************/
@@ -565,44 +695,57 @@ body {
 			visibility: hidden;
 			margin: 0px;
 		}
+
 		.columnSplit {
 			visibility: hidden;
 			-webkit-column-break-after: always;
 			break-after: always;
 			-moz-column-break-after: always;
 		}
+
 		//Avoid breaking up
-	blockquote,table{
+		blockquote,
+		table {
 			z-index: 15;
 			-webkit-column-break-inside: avoid;
 			page-break-inside: avoid;
 			break-inside: avoid;
 		}
+
 		//Text indent right after table
 		table+p {
 			text-indent: 1em;
 		}
+
 		// Nested lists
-	ul ul,ol ol,ul ol,ol ul{
+		ul ul,
+		ol ol,
+		ul ol,
+		ol ul {
 			margin-bottom: 0px;
 			margin-left: 1.5em;
 		}
+
 		li {
 			-webkit-column-break-inside: avoid;
 			page-break-inside: avoid;
 			break-inside: avoid;
 		}
+	}
+
 	//*****************************
 	// *         PART COVER
 	// *****************************/
 	.page:has(.partCover) {
 		padding-top: 0;
 
-		h1, h2 {
+		h1,
+		h2 {
 			margin-inline: auto;
 			text-align: center;
 			column-span: all;
 		}
+
 		.partCover {
 			background-image: @partCoverHeader;
 			background-repeat: no-repeat;
@@ -612,63 +755,60 @@ body {
 			left: 0;
 			height: 6cm;
 			width: 100%;
-			z-index:-1;
 		}
 
 		img {
 			position: absolute;
 			left: 0;
-			bottom: 0;
+			top: 0;
 			height: 100%;
-			mask-image: @partCoverMaskOdd;
-			mask-size: 215.9mm;
-			-webkit-mask-image: @partCoverMaskOdd;
-			-webkit-mask-size: 215.9mm;
-			z-index:-2;
+			z-index: -1;
 		}
 
 		h1 {
+			position: relative;
 			text-align: center;
 			text-transform: uppercase;
-			font-size: 2.1cm;
+			font-size: 2.3cm;
 			font-family: NodestoCapsCondensed;
 			max-width: 6cm;
 			text-overflow: clip;
 			white-space: nowrap;
 			overflow: hidden;
 			margin-inline: auto;
+			margin-top: .4cm;
 		}
 
 		h2 {
 			text-align: center;
-			font-family: MartelSansBlack;
-			font-size: 0.48cm;
+			font-family: Overpass;
+			font-size: 0.45cm;
 			position: relative;
 			max-width: 5cm;
 			margin-inline: auto;
-			margin-top: -.4em;
+			margin-top: -0.7em;
 			line-height: 1.1em;
 		}
+	}
+
 
-		&:nth-child(even) img {
-			mask-image: @partCoverMaskEven;
-			-webkit-mask-image: @partCoverMaskEven;
-		}
-	}
-}
 	//*****************************
 	// *         SPELL LIST
 	// *****************************/
 	.page .spellList {
 		.useSansSerif();
 		column-count: 2;
+
 		ul+h5 {
 			margin-top: 15px;
 		}
-	p, ul{
+
+		p,
+		ul {
 			font-size: 0.352cm;
 			line-height: 1.265em;
 		}
+
 		ul {
 			margin-bottom: 0.5em;
 			padding-left: 1em;
@@ -678,6 +818,7 @@ body {
 			page-break-inside: auto;
 			break-inside: auto;
 		}
+
 		&.wide {
 			column-count: 4;
 		}
@@ -690,6 +831,7 @@ body {
 		th[colspan]:not([rowspan]) {
 			white-space: nowrap;
 		}
+
 		&.frame {
 			margin-top: 0.7cm;
 			margin-bottom: 0.9cm;
@@ -705,16 +847,20 @@ th[colspan]:not([rowspan]) {
 			border-image-slice: 200;
 			border-image-source: @frameBorderImage;
 			border-image-width: 47px;
+
 			&.wide:first-child {
 				margin-top: 0.12cm;
 			}
+
 			&+* {
 				margin-top: 0;
 			}
 		}
+
 		&.decoration {
 			position: relative;
 		}
+
 		&.decoration::before {
 			content: '';
 			position: absolute;
@@ -731,35 +877,42 @@ th[colspan]:not([rowspan]) {
 			filter: drop-shadow(0px 0px 1px #C8C5C080);
 			z-index: -1;
 		}
+
 		&.decoration.wide::before {
 			width: calc(100% + 3.3cm);
 			height: 7.75cm;
 			background-position: left, right;
 		}
+
 		h5+table {
 			margin-top: 0.2cm;
 		}
 	}
+
 	//*****************************
 	// *      COVER PAGE
 	// *****************************/
 	.page:has(.coverPage) {
 		columns: 1;
 		text-align: center;
+
 		&:after {
 			all: unset;
 		}
+
 		.logo {
 			position: absolute;
 			top: 0.5cm;
 			left: 0;
 			right: 0;
 			filter: drop-shadow(0 0 0.075cm black);
+
 			img {
 				height: 2cm;
 				width: 100%;
 			}
 		}
+
 		.columnWrapper>p img {
 			position: absolute;
 			bottom: 0;
@@ -768,6 +921,7 @@ h5 + table{
 			min-width: 100%;
 			z-index: -1;
 		}
+
 		h1 {
 			--shadow-x0: #000 0px 0px 0.1cm;
 			--shadow-x1: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0);
@@ -784,6 +938,7 @@ h5 + table{
 			font-size: 2.245cm;
 			line-height: 0.85em;
 		}
+
 		h2 {
 			--shadow-x0: #000 0px 0px 2.5px;
 			--shadow-x1: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0);
@@ -796,6 +951,7 @@ h5 + table{
 			letter-spacing: 0.1cm;
 			color: white;
 		}
+
 		hr {
 			display: block;
 			position: relative;
@@ -808,6 +964,7 @@ h5 + table{
 			margin: auto;
 			filter: drop-shadow(0 0 3px black);
 		}
+
 		.banner {
 			filter: drop-shadow(2px 2px 2px #000);
 			position: absolute;
@@ -828,6 +985,7 @@ h5 + table{
 			flex-direction: column;
 			padding-top: 0.1cm;
 		}
+
 		.footnote {
 			--shadow-x0: #000 0px 0px 0.05cm;
 			--shadow-x1: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0);
@@ -855,57 +1013,71 @@ h5 + table{
 		&:has(.toc):after {
 			display: none;
 		}
+
 		.toc {
 			-webkit-column-break-inside: avoid;
 			page-break-inside: avoid;
 			break-inside: avoid;
+
 			h1 {
 				text-align: center;
 				margin-bottom: 0.3cm;
 			}
+
 			a {
 				display: inline;
 				color: inherit;
 				text-decoration: none;
+
 				&:hover {
 					text-decoration: underline;
 				}
 			}
+
 			h4 {
 				margin-top: 0.2cm;
 				line-height: 0.4cm;
+
 				&+ul li {
 					line-height: 1.2em;
 				}
 			}
+
 			ul {
 				padding-left: 0;
 				list-style-type: none;
 				margin-top: 0;
+
 				a {
 					width: 100%;
 					display: flex;
 					flex-flow: row nowrap;
 					justify-content: space-between;
 				}
+
 				li+li h3 {
 					margin-top: 0.26cm;
 					line-height: 1em
 				}
+
 				h3 span:first-child::after {
 					border: none;
 				}
+
 				span {
 					display: contents;
+
 					&:first-child::after {
 						content: "";
 						bottom: 0.08cm;
 						flex: 1;
-				margin-left   : 0.08cm;        /* Spacing before dot leaders */
+						margin-left: 0.08cm;
+						/* Spacing before dot leaders */
 						margin-right: 0.16cm;
 						border-bottom: 0.05cm dotted #000;
 						margin-bottom: 0.08cm;
 					}
+
 					&:last-child {
 						display: inline-block;
 						align-self: flex-end;
@@ -915,10 +1087,13 @@ break-inside                : avoid;
 						color: #000;
 					}
 				}
-		ul { /*List indent*/
+
+				ul {
+					/*List indent*/
 					margin-left: 1em;
 				}
 			}
+
 			&.wide {
 				.useColumns(0.96, @fillMode: balance);
 			}
@@ -933,21 +1108,26 @@ break-inside                : avoid;
 			line-height: 1.25em;
 			padding-left: 1em;
 			white-space: pre-line;
+
 			&+* {
 				margin-top: 0.28cm;
 			}
 		}
+
 		dl+* {
 			margin-top: 0.17cm;
 		}
+
 		p+dl {
 			margin-top: 0.17cm;
 		}
+
 		dt {
 			display: inline;
 			margin-right: 5px;
 			margin-left: -1em;
 		}
+
 		dd {
 			display: inline;
 			margin-left: 0px;
@@ -965,3 +1145,4 @@ break-inside                : avoid;
 	.page h1+* {
 		margin-top: 0;
 	}
+}