Up version to v3.7.1

[Draft] Trimming Google APIs

changelog.md

@@ -80,6 +80,29 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### Thursday 09/02/2023 - v3.7.1
+{{taskList
+
+##### Lucastucious (new contributor!)
+
+* [x] Changed `filter: drop-shadow` to `box-shadow` on text boxes, making text selectable in PDFs again.
+
+Fixes issues [#1569](https://github.com/naturalcrit/homebrewery/issues/1569)
+
+{{note
+**NOTE:** If you create your PDF on a computer with an old version of Mac Preview (v10 or older) you may see shadows appear as solid gray.
+}}
+
+##### MichielDeMey
+
+* [x] Updated the Google Drive icon
+* [x] Backend fix to unit tests failing intermittently
+
+##### Calculuschild
+
+* [x] Fix PDF pixelation on CoverPage text outlines
+}}
+
 
 ### Tuesday 28/02/2023 - v3.7.0
 {{taskList

client/homebrew/googleDrive.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
+	<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+	<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
+	<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
+	<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+	<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+	<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+</svg>

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

@@ -6,7 +6,7 @@ const cx    = require('classnames');
 const moment = require('moment');
 const request = require('../../../../utils/request-middleware.js');
 
-const googleDriveIcon = require('../../../../googleDrive.png');
+const googleDriveIcon = require('../../../../googleDrive.svg');
 const dedent = require('dedent-tabs').default;
 
 const BrewItem = createClass({

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

@@ -94,7 +94,7 @@
 		}
 	}
 	.googleDriveIcon {
-		height	: 20px;
+		height	: 18px;
 		padding : 0px;
 		margin  : -5px;
 	}

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

@@ -219,7 +219,7 @@ const ListPage = createClass({
 
 	render : function(){
 		return <div className='listPage sitePage'>
-			<style>@layer V3_5ePHB, bundle;</style>
+			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}

client/homebrew/pages/editPage/editPage.jsx

@@ -24,8 +24,7 @@ const Markdown = require('naturalcrit/markdown.js');
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
 
-const googleDriveActive = require('../../googleDrive.png');
-const googleDriveInactive = require('../../googleDriveMono.png');
+const googleDriveIcon = require('../../googleDrive.svg');
 
 const SAVE_TIMEOUT = 3000;
 
@@ -222,10 +221,7 @@ const EditPage = createClass({
 
 	renderGoogleDriveIcon : function(){
 		return <Nav.item className='googleDriveStorage' onClick={this.handleGoogleClick}>
-			{this.state.saveGoogle
-				? <img src={googleDriveActive} alt='googleDriveActive'/>
-				: <img src={googleDriveInactive} alt='googleDriveInactive'/>
-			}
+			<img src={googleDriveIcon} className={this.state.saveGoogle ? '' : 'inactive'} alt='Google Drive icon'/>
 
 			{this.state.confirmGoogleTransfer &&
 				<div className='errorContainer' onClick={this.closeAlerts}>

client/homebrew/pages/editPage/editPage.less

@@ -18,8 +18,12 @@
 		position : relative;
 	}
 	.googleDriveStorage img{
-		height	: 20px;
+		height	: 18px;
 		padding : 0px;
 		margin  : -5px;
+
+		&.inactive {
+			filter: grayscale(1);
+		}
 	}
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "engines": {
     "node": "16.11.x"
   },
@@ -72,6 +72,7 @@
     "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
+    "@googleapis/drive": "^4.0.2",
     "body-parser": "^1.20.2",
     "classnames": "^2.3.2",
     "codemirror": "^5.65.6",
@@ -82,7 +83,6 @@
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.1.7",
     "fs-extra": "11.1.0",
-    "googleapis": "111.0.0",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",

server/googleActions.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 const _ = require('lodash');
-const { google } = require('googleapis');
+const googleDrive = require('@googleapis/drive');
 const { nanoid } = require('nanoid');
 const token = require('./token.js');
 const config = require('./config.js');
@@ -14,7 +14,7 @@ if(!config.get('service_account')){
 		config.get('service_account');
 
 	try {
-		serviceAuth = google.auth.fromJSON(keys);
+		serviceAuth = googleDrive.auth.fromJSON(keys);
 		serviceAuth.scopes = ['https://www.googleapis.com/auth/drive'];
 	} catch (err) {
 		console.warn(err);
@@ -22,7 +22,7 @@ if(!config.get('service_account')){
 	}
 }
 
-google.options({ auth: serviceAuth || config.get('google_api_key') });
+const defaultAuth = serviceAuth || config.get('google_api_key');
 
 const GoogleActions = {
 
@@ -33,7 +33,7 @@ const GoogleActions = {
 			throw (err);
 		}
 
-		const oAuth2Client = new google.auth.OAuth2(
+		const oAuth2Client = new googleDrive.auth.OAuth2(
 			config.get('google_client_id'),
 			config.get('google_client_secret'),
 			'/auth/google/redirect'
@@ -60,7 +60,7 @@ const GoogleActions = {
 	},
 
 	getGoogleFolder : async (auth)=>{
-		const drive = google.drive({ version: 'v3', auth });
+		const drive = googleDrive.drive({ version: 'v3', auth });
 
 		fileMetadata = {
 			'name'     : 'Homebrewery',
@@ -97,7 +97,7 @@ const GoogleActions = {
 	},
 
 	listGoogleBrews : async (auth)=>{
-		const drive = google.drive({ version: 'v3', auth });
+		const drive = googleDrive.drive({ version: 'v3', auth });
 
 		const obj = await drive.files.list({
 			pageSize : 1000,
@@ -136,7 +136,7 @@ const GoogleActions = {
 	},
 
 	updateGoogleBrew : async (brew)=>{
-		const drive = google.drive({ version: 'v3' });
+		const drive = googleDrive.drive({ version: 'v3', auth: defaultAuth });
 
 		await drive.files.update({
 			fileId   : brew.googleId,
@@ -167,7 +167,7 @@ const GoogleActions = {
 	},
 
 	newGoogleBrew : async (auth, brew)=>{
-		const drive = google.drive({ version: 'v3', auth });
+		const drive = googleDrive.drive({ version: 'v3', auth });
 
 		const media = {
 			mimeType : 'text/plain',
@@ -218,7 +218,7 @@ const GoogleActions = {
 	},
 
 	getGoogleBrew : async (id, accessId, accessType)=>{
-		const drive = google.drive({ version: 'v3' });
+		const drive = googleDrive.drive({ version: 'v3', auth: defaultAuth });
 
 		const obj = await drive.files.get({
 			fileId : id,
@@ -274,7 +274,7 @@ const GoogleActions = {
 	},
 
 	deleteGoogleBrew : async (auth, id, accessId)=>{
-		const drive = google.drive({ version: 'v3', auth });
+		const drive = googleDrive.drive({ version: 'v3', auth });
 
 		const obj = await drive.files.get({
 			fileId : id,
@@ -300,7 +300,7 @@ const GoogleActions = {
 	},
 
 	increaseView : async (id, accessId, accessType, brew)=>{
-		const drive = google.drive({ version: 'v3' });
+		const drive = googleDrive.drive({ version: 'v3', auth: defaultAuth });
 
 		await drive.files.update({
 			fileId   : brew.googleId,

themes/V3/5ePHB/style.less

@@ -253,7 +253,7 @@ body {
 		border-image-outset : 9px 0px;
 		border-image-width  : 11px;
 		padding             : 0.13cm 0.16cm;
-		filter              : drop-shadow(1px 4px 6px #888);
+		box-shadow          : 1px 4px 14px #888;
 		.page :where(&) {
 			margin-top        : 9px; //Prevent top border getting cut off on colbreak
 		}
@@ -282,7 +282,7 @@ body {
 		border-image        : @descriptiveBoxImage 12 stretch;
 		border-image-outset : 4px;
 		padding             : 0.1em;
-		filter              : drop-shadow(0 0 3px #faf7ea);
+		box-shadow          : 0 0 6px #faf7ea;
 		.page :where(&) {
 			margin-top        : 4px; //Prevent top border getting cut off on colbreak
 		}
@@ -397,7 +397,7 @@ body {
 			border-image-outset   : 0px 2px;
 			background-blend-mode : overlay;
 			background-attachment : fixed;
-			filter                : drop-shadow(1px 4px 6px #888);
+			box-shadow            : 1px 4px 14px #888;
 			padding               : 4px 2px;
 			margin-left           : -0.16cm;
 			margin-right          : -0.16cm;
@@ -687,11 +687,11 @@ h5 + table{
 		all: unset;
 	}
 	.logo {
-		position : absolute;
-		top      : 0.5cm;
-		left     : 0;
-		right    : 0;
-		filter   : drop-shadow(0 0 0.075cm black);
+		position   : absolute;
+		top        : 0.5cm;
+		left       : 0;
+		right      : 0;
+		filter     :drop-shadow(0 0 0.075cm black);
 		img {
 			height : 2cm;
 			width  : 100%;
@@ -746,7 +746,7 @@ h5 + table{
 		filter           : drop-shadow(0 0 3px black);
 	}
 	.banner {
-		filter           : drop-shadow(2px 2px 2px #000);
+		filter           : drop-shadow(2px 2px 2px black);
 		position         : absolute;
 		left             : 0;
 		bottom           : 4.2cm;

themes/V3/Blank/style.less

@@ -1,412 +1,410 @@
-@layer V3_Blank {
-	@import (less) './themes/fonts/5e/fonts.less';
-	@import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/5e/fonts.less';
+@import (less) './themes/assets/assets.less';
 
-	:root {
-		//Colors
-		--HB_Color_Background            : #FFFFFF; // White
-		--HB_Color_WatercolorStain       : #000000; // Black
-	}
+:root {
+	//Colors
+	--HB_Color_Background            : #FFFFFF; // White
+	--HB_Color_WatercolorStain       : #000000; // Black
+}
 
-	@page { margin: 0; }
-	body {
-		counter-reset : phb-page-numbers;
+@page { margin: 0; }
+body {
+	counter-reset : phb-page-numbers;
+}
+*{
+	-webkit-print-color-adjust : exact;
+}
+
+//*****************************
+// *    MUSTACHE DIVS/SPANS
+// *****************************/
+.page {
+	.block {
+		break-inside      : avoid;
+		display           : inline-block;
+		width             : 100%;
 	}
-	*{
-		-webkit-print-color-adjust : exact;
+	.inline-block {
+		display     : inline-block;
+		text-indent : initial;
+	}
+}
+
+.useColumns(@multiplier : 1, @fillMode: balance){
+	column-fill          : @fillMode;
+	column-count         : 2;
+}
+.columnWrapper{
+	max-height        : 100%;
+	column-span       : all;
+	columns           : inherit;
+	column-gap        : inherit;
+}
+.page{
+	.useColumns();
+	height            : 279.4mm;
+	width             : 215.9mm;
+	padding           : 1.4cm 1.9cm 1.7cm;
+	counter-increment : phb-page-numbers;
+	background-color  : var(--HB_Color_Background);
+	position          : relative;
+	z-index           : 15;
+	box-sizing        : border-box;
+	overflow          : hidden;
+	text-rendering    : optimizeLegibility;
+	page-break-before : always;
+	page-break-after  : always;
+	contain           : size;
+}
+	//*****************************
+	// *            BASE
+	// *****************************/
+.page{
+	p{
+		overflow-wrap : break-word;
+		display       : block;
+	}
+	strong{
+		font-weight : bold;
+	}
+	em{
+		font-style : italic;
+	}
+	sup{
+		vertical-align : super;
+		font-size      : smaller;
+		line-height    : 0;
+	}
+	sub{
+		vertical-align : sub;
+		font-size      : smaller;
+		line-height    : 0;
+	}
+	ul {
+		list-style-position : outside; //Needed for multiline list items
+		list-style-type     : disc;
+		padding-left        : 1.4em;
+	}
+	ol {
+		list-style-position : outside;
+		list-style-type     : decimal;
+		padding-left        : 1.4em;
+	}
+	img{
+		z-index : -1;
 	}
 
 	//*****************************
-	// *    MUSTACHE DIVS/SPANS
+	// *           HEADERS
 	// *****************************/
-	.page {
-		.block {
-			break-inside      : avoid;
-			display           : inline-block;
-			width             : 100%;
-		}
-		.inline-block {
-			display     : inline-block;
-			text-indent : initial;
-		}
+	h1,h2,h3,h4,h5,h6{
+		font-weight  : bold;
+		line-height  : 1.2em;
 	}
-
-	.useColumns(@multiplier : 1, @fillMode: balance){
-		column-fill          : @fillMode;
-		column-count         : 2;
+	h1{
+		font-size : 2em;
 	}
-	.columnWrapper{
-		max-height        : 100%;
-		column-span       : all;
-		columns           : inherit;
-		column-gap        : inherit;
+	h2{
+		font-size : 1.5em;
 	}
-	.page{
-		.useColumns();
-		height            : 279.4mm;
-		width             : 215.9mm;
-		padding           : 1.4cm 1.9cm 1.7cm;
-		counter-increment : phb-page-numbers;
-		background-color  : var(--HB_Color_Background);
-		position          : relative;
-		z-index           : 15;
-		box-sizing        : border-box;
-		overflow          : hidden;
-		text-rendering    : optimizeLegibility;
-		page-break-before : always;
-		page-break-after  : always;
-		contain           : size;
+	h3{
+		font-size : 1.17em;
 	}
-		//*****************************
-		// *            BASE
-		// *****************************/
-	.page{
-		p{
-			overflow-wrap : break-word;
-			display       : block;
-		}
-		strong{
+	h4{
+		font-size : 1em;
+	}
+	h5{
+		font-size : 0.83em;
+	}
+	//*****************************
+	// *          TABLE
+	// *****************************/
+	table{
+		width : 100%;
+		thead{
+			display     : table-row-group;
 			font-weight : bold;
 		}
-		em{
-			font-style : italic;
-		}
-		sup{
-			vertical-align : super;
-			font-size      : smaller;
-			line-height    : 0;
-		}
-		sub{
-			vertical-align : sub;
-			font-size      : smaller;
-			line-height    : 0;
-		}
-		ul {
-			list-style-position : outside; //Needed for multiline list items
-			list-style-type     : disc;
-			padding-left        : 1.4em;
-		}
-		ol {
-			list-style-position : outside;
-			list-style-type     : decimal;
-			padding-left        : 1.4em;
-		}
-		img{
-			z-index : -1;
-		}
-
-		//*****************************
-		// *           HEADERS
-		// *****************************/
-		h1,h2,h3,h4,h5,h6{
-			font-weight  : bold;
-			line-height  : 1.2em;
-		}
-		h1{
-			font-size : 2em;
-		}
-		h2{
-			font-size : 1.5em;
-		}
-		h3{
-			font-size : 1.17em;
-		}
-		h4{
-			font-size : 1em;
-		}
-		h5{
-			font-size : 0.83em;
-		}
-		//*****************************
-		// *          TABLE
-		// *****************************/
-		table{
-			width : 100%;
-			thead{
-				display     : table-row-group;
-				font-weight : bold;
-			}
-		}
-		div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
-			margin-top : 0;	                        // have vertical spacing.
-		}
-
-		//************************************
-		// *           CODE BLOCKS
-		// ************************************/
-		code{
-	    font-family      : "Courier New", Courier, monospace;
-			white-space      : pre-wrap;
-			overflow-wrap    : break-word;
-		}
-
-		pre code{
-			width               : 100%;
-			display             : inline-block;
-		}
-		//*****************************
-		// *          EXTRAS
-		// *****************************/
-		.columnSplit {
-			visibility                 : hidden;
-			-webkit-column-break-after : always;
-			break-after                : always;
-			-moz-column-break-after    : always;
-			margin-top                 : 0;
-			& + * {
-				margin-top : 0;
-			}
-		}
-		//Avoid breaking up
-		blockquote,table{
-			z-index                     : 15;
-			-webkit-column-break-inside : avoid;
-			page-break-inside           : avoid;
-			break-inside                : avoid;
-		}
-		// Nested lists
-		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;
-		}
-
-		/* Watermark */
-		.watermark {
-			display         : grid !important;
-			place-items     : center;
-			justify-content	: center;
-			position        : absolute;
-			margin          : 0;
-			top             : 0;
-			left            : 0;
-			width           : 100%;
-			height          : 100%;
-			font-size       : 120px;
-			text-transform	: uppercase;
-			color           : black;
-			mix-blend-mode  : overlay;
-			opacity         : 30%;
-			transform       : rotate(-45deg);
-			z-index         : 500;
-			p {
-				margin-bottom : none;
-			}
-		}
-
-		/* 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 */
-			-webkit-mask-image  : var(--wc);
-			-webkit-mask-size   : contain;
-			-webkit-mask-repeat : no-repeat;
-			mask-image          : var(--wc);
-			mask-size           : contain;
-			mask-repeat         : no-repeat;
-			background-size     : cover;
-			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; }
-
-		/* Image Masks */
-		[class*="imageMask"] {
-			position              : absolute;
-			height                : 200%;
-			width                 : 200%;
-			left                  : 50%;
-			bottom                : 50%;
-			--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%; //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;
-			mask-size             : 50%;
-			mask-position         : 50% calc(50% - var(--offset));
-			background-image      : var(--checkerboard);
-			background-size       : 20px;
-			z-index               : -1;
-			transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
-			transition            : transform 2s;
-			& > p:has(img) {
-				position   : absolute;
-				width      : 50%;
-				height     : 50%;
-				bottom     : 50%;
-				left       : 50%;
-				transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
-				transition : transform 2s;
-			}
-			& img {
-				position : absolute;
-				display  : block;
-				bottom   : 0;
-			}
-			&.bottom {
-				--rotation : 0;
-				& img {bottom: 0;}
-			}
-			&.top {
-				--rotation : 180;
-				& img {top: 0;}
-			}
-			&.left {
-				--rotation : 90;
-				& img {left: 0;}
-			}
-			&.right {
-				--rotation : -90;
-				& img {right: 0;}
-			}
-			&.revealImage {
-				--revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2));
-				--checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image
-			}
-		}
-
-		.imageMaskEdge1  { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
-		.imageMaskEdge2  { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
-		.imageMaskEdge3  { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
-		.imageMaskEdge4  { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
-		.imageMaskEdge5  { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
-		.imageMaskEdge6  { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
-		.imageMaskEdge7  { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
-		.imageMaskEdge8  { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
-
-		[class*="imageMaskCorner"] {
-			height                : 200%;
-			width                 : 200%;
-			left                  : calc(-50% + var(--offsetX));
-			bottom                : calc(-50% + var(--offsetY));
-			-webkit-mask-image    : var(--wc), var(--revealer);
-			-webkit-mask-repeat   : no-repeat;
-			-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
-			-webkit-mask-position : 50% 50%;
-			mask-image            : var(--wc), var(--revealer);
-			mask-repeat           : no-repeat;
-			mask-size             : 100% 100%; //Scale both dimensions to fit page size
-			mask-position         : 50% 50%;
-			transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));;
-			& > p:has(img) {
-				width      : 50%;
-				height     : 50%; //Complex transform below to handle mix of % and cm offsets
-				left       : 25%;
-				bottom     : 25%;
-				transform  : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
-										 rotate(calc(-1deg * var(--rotation)))
-				             translateX(calc(-1 * var(--offsetX)))
-										 translateY(calc(1 * var(--offsetY)));
-			}
-		}
-
-		.imageMaskCorner1  { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
-		.imageMaskCorner2  { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
-		.imageMaskCorner3  { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
-		.imageMaskCorner4  { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
-		.imageMaskCorner5  { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
-		.imageMaskCorner6  { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
-		.imageMaskCorner7  { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
-		.imageMaskCorner8  { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
-		.imageMaskCorner9  { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
-		.imageMaskCorner10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
-		.imageMaskCorner11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
-		.imageMaskCorner12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
-		.imageMaskCorner13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
-		.imageMaskCorner14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
-		.imageMaskCorner15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
-		.imageMaskCorner16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
-		.imageMaskCorner17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
-		.imageMaskCorner18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
-		.imageMaskCorner19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
-		.imageMaskCorner20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
-		.imageMaskCorner21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
-		.imageMaskCorner22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
-		.imageMaskCorner23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
-		.imageMaskCorner24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
-		.imageMaskCorner25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
-		.imageMaskCorner26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
-		.imageMaskCorner27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
-		.imageMaskCorner28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
-		.imageMaskCorner29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
-		.imageMaskCorner30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
-		.imageMaskCorner31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
-		.imageMaskCorner32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
-		.imageMaskCorner33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
-		.imageMaskCorner34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
-		.imageMaskCorner35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
-		.imageMaskCorner36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
-		.imageMaskCorner37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); }
+	}
+	div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
+		margin-top : 0;	                        // have vertical spacing.
 	}
 
-	//*****************************
-	// *    DEFINITION LISTS
-	// *****************************/
-	.page {
-		dl {
-			padding-left : 1em;
-			white-space  : pre-line;
-		}
-	  dt {
-	    display      : inline;
-	    margin-right : 0.5ch;
-			margin-left  : -1em;
-	  }
-	  dd {
-			display     : inline;
-			margin-left : 0;
-			text-indent : 0;
-	  }
+	//************************************
+	// *           CODE BLOCKS
+	// ************************************/
+	code{
+    font-family      : "Courier New", Courier, monospace;
+		white-space      : pre-wrap;
+		overflow-wrap    : break-word;
 	}
 
+	pre code{
+		width               : 100%;
+		display             : inline-block;
+	}
 	//*****************************
-	// *    BLANK LINE
+	// *          EXTRAS
 	// *****************************/
-	.page {
-		.blank {
-			height     : 1em;
+	.columnSplit {
+		visibility                 : hidden;
+		-webkit-column-break-after : always;
+		break-after                : always;
+		-moz-column-break-after    : always;
+		margin-top                 : 0;
+		& + * {
 			margin-top : 0;
-			& + * {
-				margin-top : 0;
-			}
+		}
+	}
+	//Avoid breaking up
+	blockquote,table{
+		z-index                     : 15;
+		-webkit-column-break-inside : avoid;
+		page-break-inside           : avoid;
+		break-inside                : avoid;
+	}
+	// Nested lists
+	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;
+	}
+
+	/* Watermark */
+	.watermark {
+		display         : grid !important;
+		place-items     : center;
+		justify-content	: center;
+		position        : absolute;
+		margin          : 0;
+		top             : 0;
+		left            : 0;
+		width           : 100%;
+		height          : 100%;
+		font-size       : 120px;
+		text-transform	: uppercase;
+		color           : black;
+		mix-blend-mode  : overlay;
+		opacity         : 30%;
+		transform       : rotate(-45deg);
+		z-index         : 500;
+		p {
+			margin-bottom : none;
 		}
 	}
 
-	//*****************************
-	// *         WIDE
-	// *****************************/
-	.page {
-		.wide{
-			column-span         : all;
-			display             : block;
-			margin-bottom       : 1em;
-			&+* {
-				margin-top : 0;
-			}
+	/* 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 */
+		-webkit-mask-image  : var(--wc);
+		-webkit-mask-size   : contain;
+		-webkit-mask-repeat : no-repeat;
+		mask-image          : var(--wc);
+		mask-size           : contain;
+		mask-repeat         : no-repeat;
+		background-size     : cover;
+		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; }
+
+	/* Image Masks */
+	[class*="imageMask"] {
+		position              : absolute;
+		height                : 200%;
+		width                 : 200%;
+		left                  : 50%;
+		bottom                : 50%;
+		--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%; //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;
+		mask-size             : 50%;
+		mask-position         : 50% calc(50% - var(--offset));
+		background-image      : var(--checkerboard);
+		background-size       : 20px;
+		z-index               : -1;
+		transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
+		transition            : transform 2s;
+		& > p:has(img) {
+			position   : absolute;
+			width      : 50%;
+			height     : 50%;
+			bottom     : 50%;
+			left       : 50%;
+			transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
+			transition : transform 2s;
+		}
+		& img {
+			position : absolute;
+			display  : block;
+			bottom   : 0;
+		}
+		&.bottom {
+			--rotation : 0;
+			& img {bottom: 0;}
+		}
+		&.top {
+			--rotation : 180;
+			& img {top: 0;}
+		}
+		&.left {
+			--rotation : 90;
+			& img {left: 0;}
+		}
+		&.right {
+			--rotation : -90;
+			& img {right: 0;}
+		}
+		&.revealImage {
+			--revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2));
+			--checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image
+		}
+	}
+
+	.imageMaskEdge1  { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
+	.imageMaskEdge2  { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
+	.imageMaskEdge3  { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
+	.imageMaskEdge4  { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
+	.imageMaskEdge5  { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
+	.imageMaskEdge6  { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
+	.imageMaskEdge7  { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
+	.imageMaskEdge8  { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
+
+	[class*="imageMaskCorner"] {
+		height                : 200%;
+		width                 : 200%;
+		left                  : calc(-50% + var(--offsetX));
+		bottom                : calc(-50% + var(--offsetY));
+		-webkit-mask-image    : var(--wc), var(--revealer);
+		-webkit-mask-repeat   : no-repeat;
+		-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
+		-webkit-mask-position : 50% 50%;
+		mask-image            : var(--wc), var(--revealer);
+		mask-repeat           : no-repeat;
+		mask-size             : 100% 100%; //Scale both dimensions to fit page size
+		mask-position         : 50% 50%;
+		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));;
+		& > p:has(img) {
+			width      : 50%;
+			height     : 50%; //Complex transform below to handle mix of % and cm offsets
+			left       : 25%;
+			bottom     : 25%;
+			transform  : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
+									 rotate(calc(-1deg * var(--rotation)))
+			             translateX(calc(-1 * var(--offsetX)))
+									 translateY(calc(1 * var(--offsetY)));
+		}
+	}
+
+	.imageMaskCorner1  { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
+	.imageMaskCorner2  { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
+	.imageMaskCorner3  { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
+	.imageMaskCorner4  { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
+	.imageMaskCorner5  { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
+	.imageMaskCorner6  { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
+	.imageMaskCorner7  { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
+	.imageMaskCorner8  { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
+	.imageMaskCorner9  { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
+	.imageMaskCorner10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
+	.imageMaskCorner11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
+	.imageMaskCorner12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
+	.imageMaskCorner13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
+	.imageMaskCorner14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
+	.imageMaskCorner15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
+	.imageMaskCorner16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
+	.imageMaskCorner17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
+	.imageMaskCorner18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
+	.imageMaskCorner19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
+	.imageMaskCorner20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
+	.imageMaskCorner21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
+	.imageMaskCorner22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
+	.imageMaskCorner23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
+	.imageMaskCorner24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
+	.imageMaskCorner25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
+	.imageMaskCorner26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
+	.imageMaskCorner27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
+	.imageMaskCorner28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
+	.imageMaskCorner29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
+	.imageMaskCorner30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
+	.imageMaskCorner31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
+	.imageMaskCorner32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
+	.imageMaskCorner33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
+	.imageMaskCorner34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
+	.imageMaskCorner35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
+	.imageMaskCorner36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
+	.imageMaskCorner37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); }
+}
+
+//*****************************
+// *    DEFINITION LISTS
+// *****************************/
+.page {
+	dl {
+		padding-left : 1em;
+		white-space  : pre-line;
+	}
+  dt {
+    display      : inline;
+    margin-right : 0.5ch;
+		margin-left  : -1em;
+  }
+  dd {
+		display     : inline;
+		margin-left : 0;
+		text-indent : 0;
+  }
+}
+
+//*****************************
+// *    BLANK LINE
+// *****************************/
+.page {
+	.blank {
+		height     : 1em;
+		margin-top : 0;
+		& + * {
+			margin-top : 0;
+		}
+	}
+}
+
+//*****************************
+// *         WIDE
+// *****************************/
+.page {
+	.wide{
+		column-span         : all;
+		display             : block;
+		margin-bottom       : 1em;
+		&+* {
+			margin-top : 0;
 		}
 	}
 }