Up version to v3.7.1

[Draft] Trimming Google APIs

changelog.md

@@ -1,4 +1,23 @@
 ```css
+.beta {
+	color         : white;
+	padding       : 4px 6px;
+	line-height   : 1em;
+	background    : grey;
+	border-radius : 12px;
+	font-family   : monospace;
+	font-size     : 10px;
+	font-weight   : 800;
+	margin-top    : -5px;
+	margin-bottom : -5px;
+}
+
+.fac {
+	height: 1em;
+	line-height: 2em;
+	margin-bottom: -0.05cm
+}
+
 h5 {
 	font-size: .35cm !important;
 }
@@ -61,6 +80,55 @@ 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
+
+{{note
+**NOTE:** Some new snippets will now show a {{beta BETA}} tag. Feel free to use them, but be aware we may change how they work depending on your feedback.
+}}
+
+##### Calculuschild
+
+* [x] New {{openSans **IMAGES → WATERCOLOR EDGE** {{fac,mask-edge}} }} and {{openSans **WATERCOLOR CORNER** {{fac,mask-corner}} }} snippets for V3, which adds a stylish watercolor texture to the edge of your images! (Thanks to /u/flamableconcrete on Reddit for providing these image masks!)
+
+* [x] Fix site not displaying on iOS devices
+
+##### 5e-Cleric
+
+* [x] New {{openSans **PHB → COVER PAGE** {{fac,book-front-cover}} }} snippet for V3, which adds a stylish coverpage to your brew! (Thanks to /u/Kaiburr_Kath-Hound on Reddit for providing some of these resources!)
+
+##### MichielDeMey (new contribuor!)
+
+* [x] Fix typo in testing scripts
+* [x] Fix "mug" image not using HTTPS
+
+Fixes issues [#2687](https://github.com/naturalcrit/homebrewery/issues/2687)
+}}
+
 ### Saturday 18/02/2023 - v3.6.1
 {{taskList
 ##### G-Ambatte
@@ -71,7 +139,7 @@ Fixes issues [#2674](https://github.com/naturalcrit/homebrewery/issues/2674)
 }}
 
 
-### Friday 23/01/2023 - v3.6.0
+### Monday 23/01/2023 - v3.6.0
 {{taskList
 ##### calculuschild
 
@@ -96,6 +164,8 @@ Fixes issues [#2583](https://github.com/naturalcrit/homebrewery/issues/2583)
 * [x] Fix cloned brews inheriting the parent view count
 }}
 
+\column
+
 ### Friday 23/12/2022 - v3.5.0
 {{taskList
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -134,7 +134,8 @@ const BrewRenderer = createClass({
 
 	renderStyle : function() {
 		if(!this.props.style) return;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.props.style}\n</style>` }} />;
 	},
 
 	renderPage : function(pageText, index){

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -171,7 +171,8 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				{snippet.name}
+				<span className='name'>{snippet.name}</span>
+				{snippet.experimental && <span className='beta'>beta</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>
 					<div className='dropdown side'>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -97,19 +97,34 @@
 			background-color : #ddd;
 			.snippet{
 				.animate(background-color);
-				width     : max-content;
-				padding   : 5px;
-				cursor    : pointer;
-				font-size : 10px;
+				display     : flex;
+				align-items : center;
+				min-width   : max-content;
+				padding     : 5px;
+				cursor      : pointer;
+				font-size   : 10px;
 				i{
 					margin-right : 8px;
 					font-size    : 1.2em;
 					height       : 1.2em;
 					&~i{
 						margin-right: 0;
-						margin-left: 8px;
+						margin-left: 5px;
 					}
 				}
+				.name {
+					margin-right  : auto;
+				}
+				.beta {
+					color         : white;
+					padding       : 4px 6px;
+					line-height   : 1em;
+					margin-left   : 5px;
+					align-self    : center;
+					background    : grey;
+					border-radius : 12px;
+					font-family   : monospace;
+				}
 				&:hover{
 					background-color : #999;
 					&>.dropdown{

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);
+		}
 	}
 }

client/homebrew/pages/homePage/welcome_msg.md

@@ -36,7 +36,7 @@ After clicking the "Print" item in the navbar a new page will open and a print d
 If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew!
 }}
 
-![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
+![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
 
 {{artist,bottom:160px,left:100px
 ##### Homebrew Mug

client/homebrew/pages/printPage/printPage.jsx

@@ -60,7 +60,8 @@ const PrintPage = createClass({
 
 	renderStyle : function() {
 		if(!this.state.brew.style) return;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.state.brew.style}\n</style>` }} />;
 	},
 
 	renderPages : function(){

client/icons/book-front-cover.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 541.53217 512"
+   version="1.1"
+   id="svg22127"
+   sodipodi:docname="book-front-cover.svg"
+   width="541.53217"
+   height="512"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs22131" />
+  <sodipodi:namedview
+     id="namedview22129"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.39257813"
+     inkscape:cx="-263.64179"
+     inkscape:cy="444.49751"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg22127" />
+  <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+  <g
+     id="g20308"
+     transform="matrix(3.7795276,0,0,3.7795276,-201.76367,-251.58203)">
+    <path
+       id="rect20232"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:17.9;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill;stop-color:#000000"
+       d="m 78.783305,66.564412 c -14.022889,0 -25.4,11.377111 -25.4,25.4 v 84.666668 c 0,14.02289 11.377111,25.4 25.4,25.4 h 76.199995 8.46667 c 4.68312,0 8.46667,-3.78355 8.46667,-8.46667 0,-4.68311 -3.78355,-8.46666 -8.46667,-8.46666 v -16.93334 c 4.68312,0 8.46667,-3.78355 8.46667,-8.46666 v -1.9327 c -0.0322,-0.27545 -0.0652,-0.54693 -0.0946,-0.83923 -0.17511,-1.74441 -0.30542,-3.81626 -0.37672,-6.02909 -0.18285,-5.67612 -0.29322,-5.86808 -0.63459,-6.62698 -0.74838,-1.66366 -2.65792,-3.64941 -4.38681,-4.49844 -1.41973,-0.69716 -0.72585,-0.45434 -1.20923,-0.51934 -0.47548,-0.0639 -2.54581,-0.13856 -6.47454,-0.14056 -0.0907,2.9929 -0.0862,4.81682 -0.58601,7.244 -0.28023,1.36071 -0.97957,3.42078 -2.40812,5.10356 -1.42519,1.67884 -2.81498,2.35811 -3.28145,2.61896 -3.14428,1.76375 -5.09549,2.43427 -9.41597,1.33997 -2.05224,-0.5197 -2.32631,-0.92288 -2.76159,-1.19527 -0.43528,-0.27239 -0.71007,-0.47684 -0.97461,-0.67593 -0.52909,-0.39816 -0.97871,-0.77171 -1.48622,-1.20664 -1.015,-0.86987 -2.20927,-1.95397 -3.6096,-3.26182 -2.80065,-2.61568 -6.38094,-6.09226 -10.18335,-9.90844 -6.19117,-6.21357 -9.5466,-9.59164 -11.7874,-12.16412 -1.1204,-1.28623 -2.03413,-2.38181 -2.90576,-4.03127 -0.87162,-1.64948 -1.40664,-4.21493 -1.40664,-5.61103 0,-1.4012 0.54783,-3.99366 1.42989,-5.64668 0.88206,-1.65304 1.8039,-2.74855 2.94142,-4.04679 2.27504,-2.59646 5.70131,-6.03358 12.03699,-12.369267 7.37691,-7.376888 10.87768,-11.090687 14.75208,-13.810527 1.45289,-1.019939 3.46378,-2.249133 6.08386,-2.580204 0.87337,-0.110323 1.8133,-0.120299 2.82412,0.0098 4.0433,0.520471 6.12413,2.832857 7.01973,3.728454 1.29782,1.297845 3.1373,4.826955 3.46852,7.049182 0.29817,2.00025 0.26393,3.770666 0.25993,6.212541 0.57954,0.0034 0.50388,0.0217 1.17564,0.0217 4.54211,0 8.44363,0.111537 11.991,0.50953 v -21.41004 c 0,-4.683115 -3.78355,-8.466667 -8.46667,-8.466667 h -8.46667 z m 0,101.599998 h 67.733335 v 16.93334 H 78.783305 c -4.683115,0 -8.466667,-3.78357 -8.466667,-8.46667 0,-4.68313 3.783552,-8.46667 8.466667,-8.46667 z" />
+    <path
+       style="color:#000000;fill:#000000;stroke-width:17.9;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke markers fill"
+       d="m 186.69094,157.95633 c 2.67243,-2.24871 7.17957,-9.39389 8.63888,-13.69528 1.03796,-3.05942 1.31928,-5.13546 1.33362,-9.84167 0.0278,-9.1246 -2.25302,-14.5915 -8.79325,-21.07662 -6.8535,-6.79576 -12.35348,-8.46107 -27.94423,-8.46107 -8.05417,0 -9.45684,-0.12924 -9.75203,-0.89852 -0.18964,-0.49417 -0.34479,-3.81715 -0.34479,-7.384389 0,-5.728497 -0.13266,-6.618534 -1.13607,-7.621956 -2.57777,-2.57775 -3.29907,-2.07141 -18.02212,12.651595 -12.64444,12.64444 -13.78771,13.94921 -13.78771,15.73575 0,1.78396 1.13629,3.08846 13.49078,15.48766 7.47518,7.50224 14.10644,13.69554 14.8715,13.88928 0.78576,0.19902 2.0096,-0.002 2.84016,-0.46789 1.42969,-0.80092 1.46523,-0.97351 1.74346,-8.46583 l 0.28402,-7.64825 h 8.52049 c 8.16738,0 8.65373,0.0655 11.73586,1.579 3.72428,1.82893 6.9202,5.12058 8.60236,8.86006 0.94352,2.09748 1.22898,4.1112 1.41901,10.01012 0.13083,4.06143 0.49647,7.70394 0.81253,8.09446 0.94895,1.17251 3.64241,0.80611 5.48753,-0.74645 z"
+       id="path20297" />
+  </g>
+</svg>

client/icons/customIcons.less

@@ -13,3 +13,27 @@
 .position-bottom-right {
   content: url('../icons/position-bottom-right.svg');
 }
+.position-top {
+  content: url('../icons/position-top.svg');
+}
+.position-right {
+  content: url('../icons/position-right.svg');
+}
+.position-bottom {
+  content: url('../icons/position-bottom.svg');
+}
+.position-left {
+  content: url('../icons/position-left.svg');
+}
+.mask-edge {
+  content: url('../icons/mask-edge.svg');
+}
+.mask-corner {
+  content: url('../icons/mask-corner.svg');
+}
+.fa-file-c {
+  content: url('../icons/fa-file-c.svg');
+}
+.book-front-cover {
+  content: url('../icons/book-front-cover.svg');
+}

client/icons/fa-file-c.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 610.4 816.5" style="enable-background:new 0 0 610.4 816.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:20;stroke-miterlimit:10;}
+</style>
+<title>fa-file-c</title>
+<g id="Layer_2_1_">
+	<g id="Layer_1-2">
+		<g id="page">
+			<path id="page-2" d="M610.3,468.3c0,77.3,0.2,154.5,0,231.8s-39.8,116.5-116.8,116.4c-127.6,0-255.1,0-382.7,0
+				c-68.1,0-110.5-41.7-110.6-109.8c-0.2-197.7-0.2-395.5,0-593.2c0-68.4,43.2-110.9,112.1-111c90-0.1,180,0.2,270-0.2
+				c12.8,0,21.5,0.6,32.9,4c17.1,5,152.7,150.7,190.7,188.8c-0.7,18-6,5.7,1.4,35.1c0,6.8,3.1,11.2,3.1,18.1
+				C610.2,320.8,610.3,395.7,610.3,468.3z"/>
+			<path id="white_corner" class="st0" d="M364.1,0v200c0,9.3,1.7,25.6,13.1,36.8c12,11.7,28.8,12.1,37.5,12.2
+				c119.8,1.3,195.6,0.4,195.6,0.4l0,0l-0.3-54.3l-197,1l3-192L364.1,0z"/>
+		</g>
+		<path class="st1" d="M317.7,719.8c-38.3,0-71-8.1-98.3-24.3c-27.2-16.2-48.1-39.2-62.7-69C142.3,596.8,135,561.2,135,520
+			c0-30.9,4.1-58.6,12.4-83.1c8.3-24.5,20.2-45.3,35.9-62.4c15.6-17.1,34.9-30.4,57.7-39.8s48.4-14.1,76.7-14.1
+			c22.1-0.1,44,3.1,65.1,9.7c20.6,6.4,38.4,15.9,53.5,28.4c4.8,3.7,8,7.8,9.7,12.4c1.6,4.2,1.8,8.9,0.6,13.2
+			c-1.2,4.1-3.5,7.7-6.6,10.5c-3.1,2.8-7.2,4.2-11.3,4.1c-4.4,0-9.4-1.8-14.9-5.5c-13-10.5-27.7-18.6-43.6-23.7
+			c-16.6-5.3-33.9-7.9-51.3-7.7c-29.1,0-53.7,6.2-74,18.5s-35.5,30.3-45.8,53.8c-10.3,23.6-15.4,52.1-15.4,85.5s5.1,62.1,15.4,85.9
+			c10.3,23.7,25.6,41.8,45.8,54.1c20.2,12.3,44.9,18.5,74,18.5c17.4,0.1,34.8-2.6,51.3-8c16.2-5.3,31.3-13.5,44.7-24
+			c5.5-3.7,10.5-5.4,14.9-5.3c4,0.1,7.9,1.5,11,4.1c3,2.7,5.2,6.1,6.4,9.9c1.3,4.1,1.3,8.6,0,12.7c-1.3,4.4-4.1,8.3-8.6,11.6
+			c-15.5,13.3-33.6,23.3-54.4,30.1C362.7,716.6,340.3,720,317.7,719.8z"/>
+	</g>
+</g>
+</svg>

client/icons/mask-corner.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="mask-corner.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139"><pattern
+       inkscape:collect="always"
+       xlink:href="#Strips1_1"
+       id="pattern3077"
+       patternTransform="matrix(23.131931,-23.131931,19.25517,19.25517,26.214281,-26.952711)" /><pattern
+       inkscape:collect="always"
+       patternUnits="userSpaceOnUse"
+       width="2"
+       height="1"
+       patternTransform="translate(0,0) scale(10,10)"
+       id="Strips1_1"
+       inkscape:stockid="Stripes 1:1"><rect
+         style="fill:black;stroke:none"
+         x="0"
+         y="-0.5"
+         width="1"
+         height="2"
+         id="rect2097" /></pattern></defs><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="0.95758074"
+     inkscape:cx="275.17262"
+     inkscape:cy="306.50157"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="M 48,-5.2e-6 C 21.40803,-5.2e-6 1.98e-5,21.408025 1.98e-5,47.999995 V 464 C 1.98e-5,490.59197 21.40803,512 48,512 h 352 c 26.59198,0 48,-21.40803 48,-48 V 47.999995 C 448,21.408025 426.59198,-5.2e-6 400,-5.2e-6 Z M 64,63.999995 H 384 V 448 H 64 Z" /><rect
+     style="fill:url(#pattern3077);fill-opacity:1;stroke:#000000;stroke-width:48;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206"
+     width="208"
+     height="240"
+     x="32.000011"
+     y="32.000011"
+     rx="48"
+     ry="48" /></svg>

client/icons/mask-edge.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="mask-edge.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139"><pattern
+       inkscape:collect="always"
+       xlink:href="#Strips1_1"
+       id="pattern3077"
+       patternTransform="matrix(23.131931,-23.13193,19.25517,19.25517,26.214281,-26.952711)" /><pattern
+       inkscape:collect="always"
+       patternUnits="userSpaceOnUse"
+       width="2"
+       height="1"
+       patternTransform="translate(0,0) scale(10,10)"
+       id="Strips1_1"
+       inkscape:stockid="Stripes 1:1"><rect
+         style="fill:black;stroke:none"
+         x="0"
+         y="-0.5"
+         width="1"
+         height="2"
+         id="rect2097" /></pattern></defs><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="0.95758074"
+     inkscape:cx="231.31209"
+     inkscape:cy="171.78708"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="M 48,-5.2e-6 C 21.40803,-5.2e-6 1.98e-5,21.408025 1.98e-5,47.999995 V 464 C 1.98e-5,490.59197 21.40803,512 48,512 h 352 c 26.59198,0 48,-21.40803 48,-48 V 47.999995 C 448,21.408025 426.59198,-5.2e-6 400,-5.2e-6 Z M 64,63.999995 H 384 V 448 H 64 Z" /><rect
+     style="fill:url(#pattern3077);fill-opacity:1;stroke:#000000;stroke-width:48;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206"
+     width="208"
+     height="447.99997"
+     x="32.000011"
+     y="32.000011"
+     rx="48"
+     ry="48" /><rect
+     style="fill:#000000;fill-opacity:1;stroke-width:47.9999;stroke-linejoin:round;stroke-dasharray:none;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect4640"
+     width="48"
+     height="512"
+     x="216"
+     y="0" /></svg>

client/icons/position-bottom-left.svg

@@ -1 +1,46 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 495"><path fill-opacity=".995" d="M495 135.49V0H359.51v135.49M482.72 11.37v113.26H371.9V11.37zM135.49 315.245v-135.49H0v135.49m123.21-124.12v113.26H12.39v-113.26zm12.28-55.635V0H0v135.49M123.21 11.37v113.26H12.39V11.37zm192.035 124.12V0h-135.49v135.49m123.21-124.12v113.26h-110.82V11.37zm12.28 303.875v-135.49h-135.49v135.49m123.21-124.12v113.26h-110.82v-113.26zM495 315.245v-135.49H359.51v135.49m123.21-124.12v113.26H371.9v-113.26zM135.49 495V359.51H0V495Zm179.755 0V359.51h-135.49V495m123.21-124.12v113.26h-110.82V370.88zM495 495V359.51H359.51V495m123.21-124.12v113.26H371.9V370.88z"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="position-bottom-left.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139" /><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="0.70792086"
+     inkscape:cx="174.45453"
+     inkscape:cy="325.60137"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="m 48,511.99998 c -26.59197,0 -48.00000035682677,-21.40803 -48.00000035682677,-48 v -416 C -3.5682677e-7,21.40801 21.40803,-1.9692461e-5 48,-1.9692461e-5 h 352 c 26.59198,0 48,21.408029692461 48,47.999999692461 v 416 c 0,26.59197 -21.40802,48 -48,48 z m 16,-64 h 320 v -384 H 64 Z" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206"
+     width="208"
+     height="240"
+     x="-3.5682677e-07"
+     y="-512"
+     rx="48"
+     ry="48"
+     transform="scale(1,-1)" /></svg>

client/icons/position-bottom-right.svg

@@ -1 +1,46 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 495"><g fill-opacity=".995"><path d="M135.49 0H0v135.49h135.49M11.37 12.28h113.26V123.1H11.37zM315.245 359.51h-135.49V495h135.49m-124.12-123.21h113.26v110.82h-113.26zM135.49 359.51H0V495h135.49M11.37 371.79h113.26v110.82H11.37zM135.49 179.755H0v135.49h135.49M11.37 192.035h113.26v110.82H11.37zM315.245 179.755h-135.49v135.49h135.49m-124.12-123.21h113.26v110.82h-113.26zM315.245 0h-135.49v135.49h135.49M191.125 12.28h113.26V123.1h-113.26zM495 359.51H359.51V495H495ZM495 179.755H359.51v135.49H495m-124.12-123.21h113.26v110.82H370.88zM495 0H359.51v135.49H495M370.88 12.28h113.26V123.1H370.88z"/></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="position-bottom-right.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139" /><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="0.70792086"
+     inkscape:cx="174.45453"
+     inkscape:cy="325.60137"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="m 400,511.99998 c 26.59197,0 48,-21.40803 48,-48 v -416 C 448,21.40801 426.59197,-1.9692461e-5 400,-1.9692461e-5 H 48 C 21.40802,-1.9692461e-5 -3.5682677e-7,21.40801 -3.5682677e-7,47.99998 v 416 c 0,26.59197 21.40802035682677,48 48.00000035682677,48 z m -16,-64 H 64 v -384 h 320 z" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206"
+     width="208"
+     height="240"
+     x="-448"
+     y="-512"
+     rx="48"
+     ry="48"
+     transform="scale(-1)" /></svg>

client/icons/position-bottom.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="position-bottom.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139" /><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="1.0011513"
+     inkscape:cx="273.18549"
+     inkscape:cy="216.25103"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201-2"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="m 48,512.00004 c -26.5919,0 -48,-21.4081 -48,-48 V 47.999996 C 0,21.408026 21.4081,-3.8146973e-6 48,-3.8146973e-6 h 352 c 26.592,0 48,21.4080298146973 48,47.9999998146973 V 464.00004 c 0,26.5919 -21.408,48 -48,48 z m 16,-64 H 384 V 63.999996 H 64 Z" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30.0001;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206-8"
+     width="447.99997"
+     height="240"
+     x="1.40625e-05"
+     y="-512.00006"
+     rx="48"
+     ry="48"
+     transform="scale(1,-1)" /></svg>

client/icons/position-left.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="position-left.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139" /><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="0.70792086"
+     inkscape:cx="164.56642"
+     inkscape:cy="243.6713"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201-0"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="M 48,0 C 21.4081,0 0,21.40803 0,48 v 416 c 0,26.59197 21.4081,48 48,48 h 352.0001 c 26.5919,0 48,-21.40803 48,-48 V 48 c 0,-26.59197 -21.4081,-48 -48,-48 z M 64,64 H 384.0001 V 448 H 64 Z" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206-2"
+     width="208"
+     height="512.00006"
+     x="7.0762391e-05"
+     y="-8.8710935e-05"
+     rx="48"
+     ry="48.000004" /></svg>

client/icons/position-right.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="position-right.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139" /><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="0.70792086"
+     inkscape:cx="164.56642"
+     inkscape:cy="243.6713"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201-0"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="m 400.0001,0 c 26.5919,0 48,21.40803 48,48 v 416 c 0,26.59197 -21.4081,48 -48,48 H 48 C 21.4081,512 0,490.59197 0,464 V 48 C 0,21.40803 21.4081,0 48,0 Z m -16,64 H 64 v 384 h 320.0001 z" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206-2"
+     width="208"
+     height="512.00006"
+     x="-448.00003"
+     y="-8.8710935e-05"
+     rx="48"
+     ry="48.000004"
+     transform="scale(-1,1)" /></svg>

client/icons/position-top-left.svg

@@ -1 +1,45 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 495"><path fill-opacity=".995" d="M359.51 495H495V359.51H359.51m124.12 123.21H370.37V371.9h113.26zM179.755 135.49h135.49V0h-135.49m124.12 123.21h-113.26V12.39h113.26zM359.51 135.49H495V0H359.51m124.12 123.21H370.37V12.39h113.26zM359.51 315.245H495v-135.49H359.51m124.12 123.21H370.37v-110.82h113.26zM179.755 315.245h135.49v-135.49h-135.49m124.12 123.21h-113.26v-110.82h113.26zM179.755 495h135.49V359.51h-135.49m124.12 123.21h-113.26V371.9h113.26zM0 135.49h135.49V0H0ZM0 315.245h135.49v-135.49H0m124.12 123.21H10.86v-110.82h113.26zM0 495h135.49V359.51H0m124.12 123.21H10.86V371.9h113.26z"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="position-top-left.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139" /><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="0.70792086"
+     inkscape:cx="174.45453"
+     inkscape:cy="325.60137"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="M 48,0 C 21.40803,0 0,21.40803 0,48 v 416 c 0,26.59197 21.40803,48 48,48 h 352 c 26.59198,0 48,-21.40803 48,-48 V 48 C 448,21.40803 426.59198,0 400,0 Z M 64,64 H 384 V 448 H 64 Z" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206"
+     width="208"
+     height="240"
+     x="-3.5682677e-07"
+     y="-1.9692461e-05"
+     rx="48"
+     ry="48" /></svg>

client/icons/position-top-right.svg

@@ -1 +1,46 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 495"><g fill-opacity=".995"><path d="M0 359.51V495h135.49V359.51M12.28 483.63V370.37H123.1v113.26zM359.51 179.755v135.49H495v-135.49m-123.21 124.12v-113.26h110.82v113.26zM359.51 359.51V495H495V359.51M371.79 483.63V370.37h110.82v113.26zM179.755 359.51V495h135.49V359.51m-123.21 124.12V370.37h110.82v113.26zM179.755 179.755v135.49h135.49v-135.49m-123.21 124.12v-113.26h110.82v113.26zM0 179.755v135.49h135.49v-135.49M12.28 303.875v-113.26H123.1v113.26zM359.51 0v135.49H495V0ZM179.755 0v135.49h135.49V0m-123.21 124.12V10.86h110.82v113.26zM0 0v135.49h135.49V0M12.28 124.12V10.86H123.1v113.26z"/></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="position-top-right.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139" /><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="0.70792086"
+     inkscape:cx="174.45453"
+     inkscape:cy="325.60137"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="m 400,0 c 26.59197,0 48,21.40803 48,48 v 416 c 0,26.59197 -21.40803,48 -48,48 H 48 C 21.40802,512 -3.5682677e-7,490.59197 -3.5682677e-7,464 V 48 C -3.5682677e-7,21.40803 21.40802,0 48,0 Z M 384,64 H 64 v 384 h 320 z" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206"
+     width="208"
+     height="240"
+     x="-448"
+     y="-1.9692461e-05"
+     rx="48"
+     ry="48"
+     transform="scale(-1,1)" /></svg>

client/icons/position-top.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="position-top.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139" /><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="1.0011513"
+     inkscape:cx="273.18549"
+     inkscape:cy="216.25103"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201-2"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="M 48,0 C 21.4081,0 0,21.4081 0,48 v 416.00004 c 0,26.59197 21.4081,48 48,48 h 352 c 26.592,0 48,-21.40803 48,-48 V 48 C 448,21.4081 426.592,0 400,0 Z M 64,64 H 384 V 448.00004 H 64 Z" /><rect
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30.0001;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206-8"
+     width="447.99997"
+     height="240"
+     x="1.40625e-05"
+     y="-3.8146973e-06"
+     rx="48"
+     ry="48" /></svg>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.6.1",
+  "version": "3.7.1",
   "engines": {
     "node": "16.11.x"
   },
@@ -39,7 +39,7 @@
   "jest": {
     "testTimeout": 15000,
     "modulePaths": [
-      "mode_modules",
+      "node_modules",
       "shared",
       "server"
     ],
@@ -68,11 +68,12 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/core": "^7.21.0",
+    "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
-    "body-parser": "^1.20.1",
+    "@googleapis/drive": "^4.0.2",
+    "body-parser": "^1.20.2",
     "classnames": "^2.3.2",
     "codemirror": "^5.65.6",
     "cookie-parser": "^1.4.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",
@@ -91,20 +91,20 @@
     "marked-extended-tables": "^1.0.5",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.4",
-    "mongoose": "^6.9.1",
+    "mongoose": "^6.9.2",
     "nanoid": "3.3.4",
     "nconf": "^0.12.0",
     "npm": "^8.10.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-frame-component": "4.1.3",
-    "react-router-dom": "6.8.1",
+    "react-router-dom": "6.8.2",
     "sanitize-filename": "1.6.3",
     "superagent": "^6.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.34.0",
+    "eslint": "^8.35.0",
     "eslint-plugin-react": "^7.32.2",
     "jest": "^29.4.3",
     "supertest": "^6.3.3"

scripts/buildHomebrew.js

@@ -20,8 +20,8 @@ const transforms = {
 };
 
 const build = async ({ bundle, render, ssr })=>{
-	let css = await lessTransform.generate({ paths: './shared' });
-	css = `@layer bundle {\n${css}\n}`;
+	const css = await lessTransform.generate({ paths: './shared' });
+	//css = `@layer bundle {\n${css}\n}`;
 	await fs.outputFile('./build/homebrew/bundle.css', css);
 	await fs.outputFile('./build/homebrew/bundle.js', bundle);
 	await fs.outputFile('./build/homebrew/ssr.js', ssr);

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/Legacy/5ePHB/style.less

@@ -1,499 +1,497 @@
-@layer Legacy_5ePHB {
-	@import (less) './themes/fonts/5e legacy/fonts.less';
-	@import (less) './themes/assets/assets.less';
-	@import (less) './themes/phb.depricated.less';
-	//Colors
-	@background            : #EEE5CE; // Light parchment
-	@noteGreen             : #e0e5c1; // Pastel green
-	@headerUnderline       : #c9ad6a; // Gold
-	@horizontalRule        : #9c2b1b; // Maroon
-	@headerText            : #58180D; // Dark maroon
-	@monsterStatBackground : #FDF1DC; // Lighter parchment
-	@captionText           : #766649; // Brown
-	@page { margin: 0; }
-	body {
-		counter-reset : phb-page-numbers;
-	}
-	*{
-		-webkit-print-color-adjust : exact;
-	}
-	.useSansSerif(){
+@import (less) './themes/fonts/5e legacy/fonts.less';
+@import (less) './themes/assets/assets.less';
+@import (less) './themes/phb.depricated.less';
+//Colors
+@background            : #EEE5CE; // Light parchment
+@noteGreen             : #e0e5c1; // Pastel green
+@headerUnderline       : #c9ad6a; // Gold
+@horizontalRule        : #9c2b1b; // Maroon
+@headerText            : #58180D; // Dark maroon
+@monsterStatBackground : #FDF1DC; // Lighter parchment
+@captionText           : #766649; // Brown
+@page { margin: 0; }
+body {
+	counter-reset : phb-page-numbers;
+}
+*{
+	-webkit-print-color-adjust : exact;
+}
+.useSansSerif(){
+	font-family : ScalySans;
+	em{
 		font-family : ScalySans;
-		em{
-			font-family : ScalySans;
-			font-style  : italic;
-		}
-		strong{
-			font-family    : ScalySans;
-			font-weight    : 800;
-			letter-spacing : -0.02em;
+		font-style  : italic;
+	}
+	strong{
+		font-family    : ScalySans;
+		font-weight    : 800;
+		letter-spacing : -0.02em;
+	}
+}
+.useColumns(@multiplier : 1){
+	column-count         : 2;
+	column-fill          : auto;
+	column-gap           : 1cm;
+	column-width         : 8cm * @multiplier;
+	-webkit-column-count : 2;
+	-moz-column-count    : 2;
+	-webkit-column-width : 8cm * @multiplier;
+	-moz-column-width    : 8cm * @multiplier;
+	-webkit-column-gap   : 1cm;
+	-moz-column-gap      : 1cm;
+}
+.phb{
+	.useColumns();
+	counter-increment : phb-page-numbers;
+	position          : relative;
+	z-index           : 15;
+	box-sizing        : border-box;
+	overflow          : hidden;
+	height            : 279.4mm;
+	width             : 215.9mm;
+	padding           : 1.0cm 1.7cm;
+	padding-bottom    : 1.5cm;
+	background-color  : @background;
+	background-image  : @backgroundImage;
+	font-family       : BookSanity;
+	font-size         : 0.317cm;
+	text-rendering    : optimizeLegibility;
+	page-break-before : always;
+	page-break-after  : always;
+	contain           : size;
+	//*****************************
+	// *            BASE
+	// *****************************/
+	p{
+		padding-bottom : 0.8em;
+		line-height    : 1.269em;
+		&+p{
+			margin-top : -0.8em;
 		}
 	}
-	.useColumns(@multiplier : 1){
-		column-count         : 2;
-		column-fill          : auto;
-		column-gap           : 1cm;
-		column-width         : 8cm * @multiplier;
-		-webkit-column-count : 2;
-		-moz-column-count    : 2;
-		-webkit-column-width : 8cm * @multiplier;
-		-moz-column-width    : 8cm * @multiplier;
-		-webkit-column-gap   : 1cm;
-		-moz-column-gap      : 1cm;
+	ul{
+		margin-bottom       : 0.8em;
+		padding-left        : 1.4em;
+		line-height         : 1.269em;
+		list-style-position : outside;
+		list-style-type     : disc;
 	}
-	.phb{
-		.useColumns();
-		counter-increment : phb-page-numbers;
-		position          : relative;
-		z-index           : 15;
-		box-sizing        : border-box;
-		overflow          : hidden;
-		height            : 279.4mm;
-		width             : 215.9mm;
-		padding           : 1.0cm 1.7cm;
-		padding-bottom    : 1.5cm;
-		background-color  : @background;
-		background-image  : @backgroundImage;
-		font-family       : BookSanity;
-		font-size         : 0.317cm;
-		text-rendering    : optimizeLegibility;
-		page-break-before : always;
-		page-break-after  : always;
-		contain           : size;
-		//*****************************
-		// *            BASE
-		// *****************************/
-		p{
-			padding-bottom : 0.8em;
-			line-height    : 1.269em;
-			&+p{
-				margin-top : -0.8em;
+	ol{
+		margin-bottom       : 0.8em;
+		padding-left        : 1.4em;
+		line-height         : 1.269em;
+		list-style-position : outside;
+		list-style-type     : decimal;
+	}
+	//Indents after p or lists
+	p+p, ul+p, ol+p{
+		text-indent : 1em;
+	}
+	img{
+		z-index : -1;
+	}
+	strong{
+		font-weight    : bold;
+		letter-spacing : 0.03em;
+	}
+	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{
+		margin-top    : 0.2em;
+		margin-bottom : 0.2em;
+		font-family   : MrJeeves;
+		font-weight   : 800;
+		color         : @headerText;
+	}
+	h1{
+		column-span         : all;
+		font-size           : 0.987cm;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+		&+p::first-letter{
+			float       : left;
+			font-family : Solberry;
+			font-size   : 10em;
+			color       : #222;
+			line-height : 0.795em;
+		}
+	}
+	h2{
+		font-size : 0.705cm;
+	}
+	h3{
+		font-size     : 0.529cm;
+		border-bottom : 2px solid @headerUnderline;
+	}
+	h4{
+		margin-bottom : 0.00em;
+		font-size     : 0.458cm;
+	}
+	h5{
+		margin-bottom : 0.2em;
+		font-family   : ScalySansSmallCaps;
+		font-size     : 0.423cm;
+		font-weight   : 900;
+	}
+	//*****************************
+	// *          TABLE
+	// *****************************/
+	table{
+		.useSansSerif();
+		width         : 100%;
+		margin-bottom : 1em;
+		font-size     : 10pt;
+		thead{
+			display: table-row-group;
+			font-weight : 800;
+			th{
+				vertical-align : bottom;
+				padding-bottom : 0.3em;
+				padding-right  : 0.1em;
+				padding-left   : 0.1em;
 			}
 		}
-		ul{
-			margin-bottom       : 0.8em;
-			padding-left        : 1.4em;
-			line-height         : 1.269em;
-			list-style-position : outside;
-			list-style-type     : disc;
-		}
-		ol{
-			margin-bottom       : 0.8em;
-			padding-left        : 1.4em;
-			line-height         : 1.269em;
-			list-style-position : outside;
-			list-style-type     : decimal;
-		}
-		//Indents after p or lists
-		p+p, ul+p, ol+p{
-			text-indent : 1em;
-		}
-		img{
-			z-index : -1;
-		}
-		strong{
-			font-weight    : bold;
-			letter-spacing : 0.03em;
-		}
-		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{
-			margin-top    : 0.2em;
-			margin-bottom : 0.2em;
-			font-family   : MrJeeves;
-			font-weight   : 800;
-			color         : @headerText;
-		}
-		h1{
-			column-span         : all;
-			font-size           : 0.987cm;
-			-webkit-column-span : all;
-			-moz-column-span    : all;
-			&+p::first-letter{
-				float       : left;
-				font-family : Solberry;
-				font-size   : 10em;
-				color       : #222;
-				line-height : 0.795em;
-			}
-		}
-		h2{
-			font-size : 0.705cm;
-		}
-		h3{
-			font-size     : 0.529cm;
-			border-bottom : 2px solid @headerUnderline;
-		}
-		h4{
-			margin-bottom : 0.00em;
-			font-size     : 0.458cm;
-		}
-		h5{
-			margin-bottom : 0.2em;
-			font-family   : ScalySansSmallCaps;
-			font-size     : 0.423cm;
-			font-weight   : 900;
-		}
-		//*****************************
-		// *          TABLE
-		// *****************************/
-		table{
-			.useSansSerif();
-			width         : 100%;
-			margin-bottom : 1em;
-			font-size     : 10pt;
-			thead{
-				display: table-row-group;
-				font-weight : 800;
-				th{
-					vertical-align : bottom;
-					padding-bottom : 0.3em;
-					padding-right  : 0.1em;
-					padding-left   : 0.1em;
+		tbody{
+			tr{
+				td{
+					padding : 0.3em 0.1em;
+				}
+				&:nth-child(odd){
+					background-color : @noteGreen;
 				}
 			}
-			tbody{
-				tr{
-					td{
-						padding : 0.3em 0.1em;
-					}
-					&:nth-child(odd){
-						background-color : @noteGreen;
-					}
-				}
-			}
-		}
-		//*****************************
-		// *            NOTE
-		// *****************************/
-		blockquote{
-			.useSansSerif();
-			box-sizing          : border-box;
-			margin-bottom       : 1em;
-			padding             : 5px 10px;
-			background-color    : @noteGreen;
-			border-style        : solid;
-			border-width        : 11px;
-			border-image        : @noteBorderImage 11;
-			border-image-outset : 9px 0px;
-			box-shadow          : 1px 4px 14px #888;
-			p, ul{
-				font-size   : 0.352cm;
-				line-height : 1.083em;
-			}
-		}
-		//If a note starts a column, give it space at the top to render border
-		pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
-			margin-top : 13px;
-		}
-		//*****************************
-		// *    MONSTER STAT BLOCK
-		// *****************************/
-		hr+blockquote{
-			position         : relative;
-			padding-top      : 15px;
-			background-color : @monsterStatBackground;
-			border-style     : solid;
-			border-width     : 10px;
-			border-image     : @monsterBorderImageLegacy 10;
-			h2{
-				margin-top    : -8px;
-				margin-bottom : 0px;
-				&+p{
-					padding-bottom : 0px;
-				}
-			}
-			h3{
-				font-family   : ScalySans;
-				font-weight   : 400;
-				border-bottom : 1px solid @headerText;
-			}
-			hr+ul{
-				color : @headerText;
-			}
-			ul{
-				.useSansSerif();
-				padding-left : 1em;
-				font-size    : 0.352cm;
-			}
-			// Monster Ability table
-			hr+table{
-				margin              : 0;
-				background-color    : transparent;
-				border-style        : none;
-				border-image        : none;
-				tbody{
-					tr:nth-child(odd), tr:nth-child(even){
-						background-color : transparent;
-					}
-				}
-			}
-			table{
-				color : @headerText;
-			}
-			p+p{
-				margin-top     : 0em;
-				padding-bottom : 0.5em;
-				text-indent    : 0em;
-			}
-			//Triangle dividers
-			hr{
-				visibility       : visible;
-				height           : 6px;
-				margin           : 4px 0px;
-				background-image : @redTriangleImage;
-				background-size  : 100% 100%;
-				border           : none;
-			}
-		}
-		//Full Width
-		hr+hr+blockquote{
-			.useColumns(0.96);
-		}
-		//*****************************
-		// *           FOOTER
-		// *****************************/
-		&:after{
-			content          : "";
-			position         : absolute;
-			bottom           : 0px;
-			left             : 0px;
-			z-index          : 100;
-			height           : 50px;
-			width            : 100%;
-			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;
-			bottom     : 22px;
-			width      : 50px;
-			font-size  : 0.9em;
-			color      : #c9ad6a;
-			text-align : center;
-			&.auto::after {
-				content : counter(phb-page-numbers);
-			}
-		}
-		.footnote{
-			position   : absolute;
-			right      : 80px;
-			bottom     : 32px;
-			z-index    : 150;
-			width      : 200px;
-			font-size  : 0.8em;
-			color      : #c9ad6a;
-			text-align : right;
-		}
-		//*****************************
-		// *          EXTRAS
-		// *****************************/
-		hr{
-			visibility : hidden;
-			margin     : 0px;
-		}
-		//Modified unorder list, used in spells
-		hr+ul{
-			margin-bottom   : 0.5em;
-			padding-left    : 1em;
-			text-indent     : -1em;
-			list-style-type : none;
-		}
-		//Column Break
-		pre, code{
-			visibility                 : hidden;
-			-webkit-column-break-after : always;
-			break-after                : always;
-			-moz-column-break-after    : always;
-		}
-		//Avoid breaking up
-		p,blockquote,table{
-			z-index                     : 15;
-			-webkit-column-break-inside : avoid;
-			page-break-inside           : avoid;
-			break-inside                : avoid;
-		}
-		//Better spacing for spell blocks
-		h4+p+hr+ul{
-			margin-top : -0.5em
-		}
-		//Text indent right after table
-		table+p{
-			text-indent : 1em;
-		}
-		// 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;
 		}
 	}
 	//*****************************
-	// *         SPELL LIST
+	// *            NOTE
 	// *****************************/
-	.phb .spellList{
+	blockquote{
 		.useSansSerif();
-		column-count        : 4;
-		column-span         : all;
-		-webkit-column-span : all;
-		-moz-column-span    : all;
-		ul+h5{
-			margin-top : 15px;
-		}
+		box-sizing          : border-box;
+		margin-bottom       : 1em;
+		padding             : 5px 10px;
+		background-color    : @noteGreen;
+		border-style        : solid;
+		border-width        : 11px;
+		border-image        : @noteBorderImage 11;
+		border-image-outset : 9px 0px;
+		box-shadow          : 1px 4px 14px #888;
 		p, ul{
 			font-size   : 0.352cm;
-			line-height : 1.263em;
+			line-height : 1.083em;
+		}
+	}
+	//If a note starts a column, give it space at the top to render border
+	pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
+		margin-top : 13px;
+	}
+	//*****************************
+	// *    MONSTER STAT BLOCK
+	// *****************************/
+	hr+blockquote{
+		position         : relative;
+		padding-top      : 15px;
+		background-color : @monsterStatBackground;
+		border-style     : solid;
+		border-width     : 10px;
+		border-image     : @monsterBorderImageLegacy 10;
+		h2{
+			margin-top    : -8px;
+			margin-bottom : 0px;
+			&+p{
+				padding-bottom : 0px;
+			}
+		}
+		h3{
+			font-family   : ScalySans;
+			font-weight   : 400;
+			border-bottom : 1px solid @headerText;
+		}
+		hr+ul{
+			color : @headerText;
 		}
 		ul{
-			margin-bottom               : 0.5em;
-			padding-left                : 1em;
-			text-indent                 : -1em;
-			list-style-type             : none;
-			-webkit-column-break-inside : auto;
-			page-break-inside           : auto;
-			break-inside                : auto;
+			.useSansSerif();
+			padding-left : 1em;
+			font-size    : 0.352cm;
 		}
-	}
-	//*****************************
-	// *         WIDE
-	// *****************************/
-	.phb .wide{
-		column-span         : all;
-		-webkit-column-span : all;
-		-moz-column-span    : all;
-	}
-	//*****************************
-	// *       CLASS TABLE
-	// *****************************/
-	.phb .classTable{
-		margin-top          : 25px;
-		margin-bottom       : 40px;
-		border-collapse     : separate;
-		background-color    : white;
-		border              : initial;
-		border-style        : solid;
-		border-image-outset : 25px 17px;
-		border-image-repeat : stretch;
-		border-image-slice  : 150 200 150 200;
-		border-image-source : @frameBorderImage;
-		border-image-width  : 47px;
-		h5{
-			margin-bottom : 10px;
-		}
-	}
-	//************************************
-	// *       DESCRIPTIVE TEXT BOX
-	// ************************************/
-	.phb .descriptive{
-		margin-bottom       : 1em;
-		background-color    : #faf7ea;
-		font-family         : ScalySans;
-		border-style        : solid;
-		border-width        : 7px;
-		border-image        : @descriptiveBoxImage 12 stretch;
-		border-image-outset : 4px;
-		box-shadow          : 0px 0px 6px #faf7ea;
-		p{
-			display        : block;
-			padding-bottom : 0px;
-			line-height    : 1.47em;
-		}
-		p + p {
-			padding-top : .8em;
-		}
-		em {
-			font-family : ScalySans;
-			font-style  : italic;
-		}
-		strong {
-			font-family    : ScalySans;
-			font-weight    : 800;
-			letter-spacing : -0.02em;
-		}
-	}
-	.phb pre+.descriptive{
-		margin-top : 8px;
-	}
-
-	//*****************************
-	// *    ARTIST CREDIT BLOCK
-	// *****************************/
-	.phb {
-		.artist {
-			position    : absolute;
-			text-align  : center;
-			font-family : WalterTurncoat;
-			font-size   : 0.27cm;
-			color       : @captionText;
-			p, p + p {
-				margin      : unset;
-				text-indent : unset;
-				line-height : 0.941em;
-			}
-		 	h5 {
-				font-size   : 1.3em;
-				font-family : WalterTurncoat;
-			}
-			a{
-				color           : inherit;
-				text-decoration : unset;
-				&:hover {
-					text-decoration : underline;
+		// Monster Ability table
+		hr+table{
+			margin              : 0;
+			background-color    : transparent;
+			border-style        : none;
+			border-image        : none;
+			tbody{
+				tr:nth-child(odd), tr:nth-child(even){
+					background-color : transparent;
 				}
 			}
 		}
+		table{
+			color : @headerText;
+		}
+		p+p{
+			margin-top     : 0em;
+			padding-bottom : 0.5em;
+			text-indent    : 0em;
+		}
+		//Triangle dividers
+		hr{
+			visibility       : visible;
+			height           : 6px;
+			margin           : 4px 0px;
+			background-image : @redTriangleImage;
+			background-size  : 100% 100%;
+			border           : none;
+		}
+	}
+	//Full Width
+	hr+hr+blockquote{
+		.useColumns(0.96);
 	}
 	//*****************************
-	// *      TABLE OF CONTENTS
+	// *           FOOTER
 	// *****************************/
-	.phb .toc{
+	&:after{
+		content          : "";
+		position         : absolute;
+		bottom           : 0px;
+		left             : 0px;
+		z-index          : 100;
+		height           : 50px;
+		width            : 100%;
+		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;
+		bottom     : 22px;
+		width      : 50px;
+		font-size  : 0.9em;
+		color      : #c9ad6a;
+		text-align : center;
+		&.auto::after {
+			content : counter(phb-page-numbers);
+		}
+	}
+	.footnote{
+		position   : absolute;
+		right      : 80px;
+		bottom     : 32px;
+		z-index    : 150;
+		width      : 200px;
+		font-size  : 0.8em;
+		color      : #c9ad6a;
+		text-align : right;
+	}
+	//*****************************
+	// *          EXTRAS
+	// *****************************/
+	hr{
+		visibility : hidden;
+		margin     : 0px;
+	}
+	//Modified unorder list, used in spells
+	hr+ul{
+		margin-bottom   : 0.5em;
+		padding-left    : 1em;
+		text-indent     : -1em;
+		list-style-type : none;
+	}
+	//Column Break
+	pre, code{
+		visibility                 : hidden;
+		-webkit-column-break-after : always;
+		break-after                : always;
+		-moz-column-break-after    : always;
+	}
+	//Avoid breaking up
+	p,blockquote,table{
+		z-index                     : 15;
 		-webkit-column-break-inside : avoid;
 		page-break-inside           : avoid;
 		break-inside                : avoid;
+	}
+	//Better spacing for spell blocks
+	h4+p+hr+ul{
+		margin-top : -0.5em
+	}
+	//Text indent right after table
+	table+p{
+		text-indent : 1em;
+	}
+	// 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;
+	}
+}
+//*****************************
+// *         SPELL LIST
+// *****************************/
+.phb .spellList{
+	.useSansSerif();
+	column-count        : 4;
+	column-span         : all;
+	-webkit-column-span : all;
+	-moz-column-span    : all;
+	ul+h5{
+		margin-top : 15px;
+	}
+	p, ul{
+		font-size   : 0.352cm;
+		line-height : 1.263em;
+	}
+	ul{
+		margin-bottom               : 0.5em;
+		padding-left                : 1em;
+		text-indent                 : -1em;
+		list-style-type             : none;
+		-webkit-column-break-inside : auto;
+		page-break-inside           : auto;
+		break-inside                : auto;
+	}
+}
+//*****************************
+// *         WIDE
+// *****************************/
+.phb .wide{
+	column-span         : all;
+	-webkit-column-span : all;
+	-moz-column-span    : all;
+}
+//*****************************
+// *       CLASS TABLE
+// *****************************/
+.phb .classTable{
+	margin-top          : 25px;
+	margin-bottom       : 40px;
+	border-collapse     : separate;
+	background-color    : white;
+	border              : initial;
+	border-style        : solid;
+	border-image-outset : 25px 17px;
+	border-image-repeat : stretch;
+	border-image-slice  : 150 200 150 200;
+	border-image-source : @frameBorderImage;
+	border-image-width  : 47px;
+	h5{
+		margin-bottom : 10px;
+	}
+}
+//************************************
+// *       DESCRIPTIVE TEXT BOX
+// ************************************/
+.phb .descriptive{
+	margin-bottom       : 1em;
+	background-color    : #faf7ea;
+	font-family         : ScalySans;
+	border-style        : solid;
+	border-width        : 7px;
+	border-image        : @descriptiveBoxImage 12 stretch;
+	border-image-outset : 4px;
+	box-shadow          : 0px 0px 6px #faf7ea;
+	p{
+		display        : block;
+		padding-bottom : 0px;
+		line-height    : 1.47em;
+	}
+	p + p {
+		padding-top : .8em;
+	}
+	em {
+		font-family : ScalySans;
+		font-style  : italic;
+	}
+	strong {
+		font-family    : ScalySans;
+		font-weight    : 800;
+		letter-spacing : -0.02em;
+	}
+}
+.phb pre+.descriptive{
+	margin-top : 8px;
+}
+
+//*****************************
+// *    ARTIST CREDIT BLOCK
+// *****************************/
+.phb {
+	.artist {
+		position    : absolute;
+		text-align  : center;
+		font-family : WalterTurncoat;
+		font-size   : 0.27cm;
+		color       : @captionText;
+		p, p + p {
+			margin      : unset;
+			text-indent : unset;
+			line-height : 0.941em;
+		}
+	 	h5 {
+			font-size   : 1.3em;
+			font-family : WalterTurncoat;
+		}
 		a{
-			color           : black;
-			text-decoration : none;
-			&:hover{
+			color           : inherit;
+			text-decoration : unset;
+			&:hover {
 				text-decoration : underline;
 			}
 		}
-		ul{
-			padding-left    : 0;
-			list-style-type : none;
-		}
-		&>ul>li{
-			margin-bottom : 10px;
-		}
+	}
+}
+//*****************************
+// *      TABLE OF CONTENTS
+// *****************************/
+.phb .toc{
+	-webkit-column-break-inside : avoid;
+	page-break-inside           : avoid;
+	break-inside                : avoid;
+	a{
+		color           : black;
+		text-decoration : none;
+		&:hover{
+			text-decoration : underline;
+		}
+	}
+	ul{
+		padding-left    : 0;
+		list-style-type : none;
+	}
+	&>ul>li{
+		margin-bottom : 10px;
 	}
 }

themes/V3/5eDMG/style.less

@@ -1,21 +1,19 @@
-@layer V3_5eDMG {
-	:root {
-		//Colors
-		--HB_Color_Accent                : #EBCEC3; // Salmon
-		--HB_Color_Footnotes             : #5C5C5C; // Dark gray
+:root {
+	//Colors
+	--HB_Color_Accent                : #EBCEC3; // Salmon
+	--HB_Color_Footnotes             : #5C5C5C; // Dark gray
+}
+
+.page {
+	background-image : url(/assets/DMG_background.png);
+	background-size  : cover;
+
+	&:after {
+		background-image : url(/assets/DMG_footerAccent.png);
+		height: 58px;
 	}
 
-	.page {
-		background-image : url(/assets/DMG_background.png);
-		background-size  : cover;
-
-		&:after {
-			background-image : url(/assets/DMG_footerAccent.png);
-			height: 58px;
-		}
-
-		.footnote {
-			bottom : 40px;
-		}
+	.footnote {
+		bottom : 40px;
 	}
 }

themes/V3/5ePHB/snippets.js

@@ -169,9 +169,10 @@ module.exports = [
 				gen  : MonsterBlockGen.monster('monster,frame,wide', 4),
 			},
 			{
-				name : 'Cover Page',
-				icon : 'fas fa-file-word',
-				gen  : CoverPageGen,
+				name         : 'Cover Page',
+				icon         : 'fac book-front-cover',
+				gen          : CoverPageGen,
+				experimental : true
 			},
 			{
 				name : 'Magic Item',

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

@@ -1,55 +1,46 @@
 const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
 
 const titles = [
-	'The Burning Gallows',
-	'The Ring of Nenlast',
-	'Below the Blind Tavern',
-	'Below the Hungering River',
-	'Before Bahamut\'s Land',
-	'The Cruel Grave from Within',
-	'The Strength of Trade Road',
-	'Through The Raven Queen\'s Worlds',
-	'Within the Settlement',
-	'The Crown from Within',
-	'The Merchant Within the Battlefield',
-	'Ioun\'s Fading Traveler',
-	'The Legion Ingredient',
-	'The Explorer Lure',
-	'Before the Charming Badlands',
-	'The Living Dead Above the Fearful Cage',
-	'Vecna\'s Hidden Sage',
-	'Bahamut\'s Demonspawn',
-	'Across Gruumsh\'s Elemental Chaos',
-	'The Blade of Orcus',
-	'Beyond Revenge',
-	'Brain of Insanity',
-	'Breed Battle!, A New Beginning',
-	'Evil Lake, A New Beginning',
-	'Invasion of the Gigantic Cat, Part II',
-	'Kraken War 2020',
-	'The Body Whisperers',
-	'The Diabolical Tales of the Ape-Women',
-	'The Doctor Immortal',
-	'The Doctor from Heaven',
-	'The Graveyard',
-	'Azure Core',
-	'Core Battle',
-	'Core of Heaven: The Guardian of Amazement',
-	'Deadly Amazement III',
-	'Dry Chaos IX',
-	'Gate Thunder',
-	'Guardian: Skies of the Dark Wizard',
-	'Lute of Eternity',
-	'Mercury\'s Planet: Brave Evolution',
-	'Ruby of Atlantis: The Quake of Peace',
-	'Sky of Zelda: The Thunder of Force',
-	'Vyse\'s Skies',
-	'White Greatness III',
-	'Yellow Divinity',
-	'Zidane\'s Ghost'
+	'The Burning Gallows',                    'The Ring of Nenlast',
+	'Below the Blind Tavern',                 'Below the Hungering River',
+	'Before Bahamut\'s Land',                 'The Cruel Grave from Within',
+	'The Strength of Trade Road',             'Through The Raven Queen\'s Worlds',
+	'Within the Settlement',                  'The Crown from Within',
+	'The Merchant Within the Battlefield',    'Ioun\'s Fading Traveler',
+	'The Legion Ingredient',                  'The Explorer Lure',
+	'Before the Charming Badlands',           'Vecna\'s Hidden Sage',
+	'The Living Dead Above the Fearful Cage', 'Bahamut\'s Demonspawn',
+	'Across Gruumsh\'s Elemental Chaos',      'The Blade of Orcus',
+	'Beyond Revenge',                         'Brain of Insanity',
+	'Breed Battle!, A New Beginning',         'Evil Lake, A New Beginning',
+	'Invasion of the Gigantic Cat, Part II',  'Kraken War 2020',
+	'The Body Whisperers',                    'The Doctor from Heaven',
+	'The Diabolical Tales of the Ape-Women',  'The Doctor Immortal',
+	'Core of Heaven: Guardian of Amazement',  'The Graveyard',
+	'Guardian: Skies of the Dark Wizard',     'Lute of Eternity',
+	'Mercury\'s Planet: Brave Evolution',     'Azure Core',
+	'Sky of Zelda: The Thunder of Force',     'Core Battle',
+	'Ruby of Atlantis: The Quake of Peace',   'Deadly Amazement III',
+	'Dry Chaos IX',                           'Gate Thunder',
+	'Vyse\'s Skies',                          'White Greatness III',
+	'Yellow Divinity',                        'Zidane\'s Ghost'
 ];
 
 const subtitles = [
+	'Tomb of Shadows',                        'Dragon\'s Lair',
+	'Lost Caverns',                           'The Necromancer',
+	'Mystic Forest',                          'Cursed Ruins',
+	'The Dark Abyss',                         'Enchanted Maze',
+	'Haunted Castle',                         'Sands of Fate',
+	'Dragon\'s Hoard',                        'Undead Menace',
+	'Lost City Ruins',                        'Goblin Ambush',
+	'Enchanted Forest',                       'Darkness Rising',
+	'Quest for Glory',                        'Ancient Prophecy',
+	'Shadowy Depths',                         'Mystic Isles'
+];
+
+const footnote = [
 	'In an ominous universe, a botanist opposes terrorism.',
 	'In a demon-haunted city, in an age of lies and hate, a physicist tries to find an ancient treasure and battles a mob of aliens.',
 	'In a land of corruption, two cyberneticists and a dungeon delver search for freedom.',
@@ -74,51 +65,26 @@ const subtitles = [
 	'On a planet of mysticism, three travelers and a fire fighter quest for the ultimate weapon and oppose evil.',
 	'In a wicked universe, five seers fight lawlessness.',
 	'In a kingdom of death, in an era of illusion and blood, four colonists search for fame.',
-	'In an amazing kingdom, in an age of sorcery and lost souls, eight space pirates quest for freedom.',
-	'In a cursed empire, five inventors oppose terrorism.',
-	'On a crime-ridden planet of conspiracy, a watchman and an artificial intelligence try to find love and oppose lawlessness.',
-	'In a forgotten land, a reporter and a spy try to stop the apocalypse.',
-	'In a forbidden land of prophecy, a scientist and an archivist oppose a cabal of barbarians intent on stealing the souls of the innocent.',
-	'On an infernal world of illusion, a grave robber and a watchman try to find revenge and combat a syndicate of mages intent on stealing the source of all magic.',
-	'In a galaxy of dark magic, four fighters seek freedom.',
-	'In an empire of deception, six tomb-robbers quest for the ultimate weapon and combat an army of raiders.',
-	'In a kingdom of corruption and lost souls, in an age of panic, eight planetologists oppose evil.',
-	'In a galaxy of misery and hopelessness, in a time of agony and pain, five planetologists search for vengance.',
-	'In a universe of technology and insanity, in a time of sorcery, a computer techician quests for hope.',
-	'On a planet of dark magic and barbarism, in an age of horror and blasphemy, seven librarians search for fame.',
-	'In an empire of dark magic, in a time of blood and illusions, four monks try to find the ultimate weapon and combat terrorism.',
-	'In a forgotten empire of dark magic, six kings try to prevent the destruction of mankind.',
-	'In a galaxy of dark magic and horror, in an age of hopelessness, four marines and an outlaw combat evil.',
-	'In a mysterious city of illusion, in an age of computerization, a witch-hunter tries to find the ultimate weapon and opposes an evil corporation.',
-	'In a damned kingdom of technology, a virtual reality programmer and a fighter seek fame.',
-	'In a hellish kingdom, in an age of blasphemy and blasphemy, an astrologer searches for fame.',
-	'In a damned world of devils, an alien and a ranger quest for love and oppose a syndicate of demons.',
-	'In a cursed galaxy, in a time of pain, seven librarians hope to avert the apocalypse.',
-	'In a crime-infested galaxy, in an era of hopelessness and panic, three champions and a grave robber try to solve the ultimate crime.'
+	'In an amazing kingdom, in an age of sorcery and lost souls, eight space pirates quest for freedom.'
 ];
 
-
 module.exports = ()=>{
-	return `<style>
-  .page#p1{ text-align:center; counter-increment: none; }
-  .page#p1:after{ display:none; }
-  .page:nth-child(2n) .pageNumber { left: inherit !important; right: 2px !important; }
-  .page:nth-child(2n+1) .pageNumber { right: inherit !important; left: 2px !important; }
-  .page:nth-child(2n)::after { transform: scaleX(1); }
-  .page:nth-child(2n+1)::after { transform: scaleX(-1); }
-  .page:nth-child(2n) .footnote { left: inherit; text-align: right; }
-  .page:nth-child(2n+1) .footnote { left: 80px; text-align: left; }
-</style>
+	return dedent`
+  {{coverPage }}
 
-{{margin-top:225px}}
+  {{logo ![](/assets/naturalCritLogo.svg)}}
 
-# ${_.sample(titles)}
+  # ${_.sample(titles)}
+  ## ${_.sample(subtitles)}
+  __________
 
-{{margin-top:25px}}
+  {{banner HOMEBREW}}
 
-{{wide
-##### ${_.sample(subtitles)}
-}}
+  {{footnote
+    ${_.sample(footnote)}
+  }}
 
-\\page`;
-};
+  ![background image](https://i.imgur.com/Mqx8Vf7.png)
+
+  \page`;
+};

themes/V3/Blank/snippets.js

@@ -1,9 +1,8 @@
 /* eslint-disable max-lines */
 
-const WatercolorGen      = require('./snippets/watercolor.gen.js');
-const dedent             = require('dedent-tabs').default;
-
-
+const WatercolorGen = require('./snippets/watercolor.gen.js');
+const ImageMaskGen  = require('./snippets/imageMask.gen.js');
+const dedent        = require('dedent-tabs').default;
 
 module.exports = [
 
@@ -102,6 +101,62 @@ module.exports = [
 				icon : 'fas fa-fill-drip',
 				gen  : WatercolorGen,
 			},
+			{
+				name         : 'Watercolor Edge',
+				icon         : 'fac mask-edge',
+				gen          : ImageMaskGen.edge('bottom'),
+				experimental : true,
+				subsnippets  : [
+					{
+						name : 'Top',
+						icon : 'fac position-top',
+						gen  : ImageMaskGen.edge('top'),
+					},
+					{
+						name : 'Right',
+						icon : 'fac position-right',
+						gen  : ImageMaskGen.edge('right'),
+					},
+					{
+						name : 'Bottom',
+						icon : 'fac position-bottom',
+						gen  : ImageMaskGen.edge('bottom'),
+					},
+					{
+						name : 'Left',
+						icon : 'fac position-left',
+						gen  : ImageMaskGen.edge('left'),
+					},
+				]
+			},
+			{
+				name         : 'Watercolor Corner',
+				icon         : 'fac mask-corner',
+				gen          : ImageMaskGen.corner,
+				experimental : true,
+				subsnippets  : [
+					{
+						name : 'Top-Left',
+						icon : 'fac position-top-left',
+						gen  : ImageMaskGen.corner('top', 'left'),
+					},
+					{
+						name : 'Top-Right',
+						icon : 'fac position-top-right',
+						gen  : ImageMaskGen.corner('top', 'right'),
+					},
+					{
+						name : 'Bottom-Left',
+						icon : 'fac position-bottom-left',
+						gen  : ImageMaskGen.corner('bottom', 'left'),
+					},
+					{
+						name : 'Bottom-Right',
+						icon : 'fac position-bottom-right',
+						gen  : ImageMaskGen.corner('bottom', 'right'),
+					}
+				]
+			},
 			{
 				name : 'Watermark',
 				icon : 'fas fa-id-card',

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

@@ -0,0 +1,36 @@
+const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
+
+module.exports = {
+	edge : (side = 'bottom')=>{
+		const rotation = {
+			'bottom' : 0,
+			'top'    : 180,
+			'left'   : 90,
+			'right'  : 270
+		}[side];
+		return dedent`
+			{{imageMaskEdge${_.random(1, 8)},--offset:0cm,--rotation:${rotation}
+			  ![](https://i.imgur.com/GZfjDWV.png){height:100%}
+			}}
+			<!-- Use --offset to shift the mask toward or away from the page center.
+			     Use --rotation to set rotation angle in degrees. -->\n\n`;
+	},
+
+	corner : (y = 'top', x = 'left')=>{
+		const offsetX = (x == 'left' ? '-50%' : '50%');
+		const offsetY = (y == 'top'  ? '50%' : '-50%');
+		return dedent`
+			{{imageMaskCorner${_.random(1, 37)},--offsetX:${offsetX},--offsetY:${offsetY},--rotation:0
+			  ![](https://i.imgur.com/GZfjDWV.png){height:100%}
+			}}
+			<!-- Use --offsetX to shift the mask left or right (can use cm instead of %)
+			     Use --offsetY to shift the mask up or down
+			     Use --rotation to set rotation angle in degrees. -->\n\n`;
+	}
+
+};
+
+()=>{
+
+};

themes/V3/Blank/style.less

@@ -1,278 +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;
+}
+*{
+	-webkit-print-color-adjust : exact;
+}
+
+//*****************************
+// *    MUSTACHE DIVS/SPANS
+// *****************************/
+.page {
+	.block {
+		break-inside      : avoid;
+		display           : inline-block;
+		width             : 100%;
+	}
+	.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;
 	}
 
-	@page { margin: 0; }
-	body {
-		counter-reset : phb-page-numbers;
+	//*****************************
+	// *           HEADERS
+	// *****************************/
+	h1,h2,h3,h4,h5,h6{
+		font-weight  : bold;
+		line-height  : 1.2em;
 	}
-	*{
-		-webkit-print-color-adjust : exact;
+	h1{
+		font-size : 2em;
 	}
-
-	.useColumns(@multiplier : 1, @fillMode: balance){
-		column-fill          : @fillMode;
-		column-count         : 2;
+	h2{
+		font-size : 1.5em;
 	}
-	.columnWrapper{
-		max-height        : 100%;
-		column-span       : all;
-		columns           : inherit;
-		column-gap        : inherit;
+	h3{
+		font-size : 1.17em;
 	}
-	.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;
+	h4{
+		font-size : 1em;
 	}
-		//*****************************
-		// *            BASE
-		// *****************************/
-	.page{
-		p{
-			overflow-wrap : break-word;
-			display       : block;
-		}
-		strong{
+	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.
-		}
-
-		/* 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; }
-
-		//************************************
-		// *           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;
-		}
+	}
+	div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
+		margin-top : 0;	                        // have vertical spacing.
 	}
 
-	//*****************************
-	// *    MUSTACHE DIVS/SPANS
-	// *****************************/
-	.page {
-		.block {
-			break-inside      : avoid;
-			display           : inline-block;
-			width             : 100%;
-		}
-		.inline-block {
-			display     : inline-block;
-			text-indent : initial;
-		}
+	//************************************
+	// *           CODE BLOCKS
+	// ************************************/
+	code{
+    font-family      : "Courier New", Courier, monospace;
+		white-space      : pre-wrap;
+		overflow-wrap    : break-word;
 	}
 
-	//*****************************
-	// *    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;
-	  }
+	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;
 		}
 	}
 }

themes/assets/assets.less

@@ -10,6 +10,9 @@
 @monsterBorderImage       : url('/assets/monsterBorderFancy.png');
 @codeBorderImage          : url('/assets/codeBorder.png');
 @classTableDecoration     : url('/assets/classTableDecoration.png');
+@naturalCritLogo          : url('/assets/naturalCritLogo.svg');
+@coverPageBanner          : url('/assets/coverPageBanner.svg');
+@horizontalRule           : url('/assets/horizontalRule.svg');
 
 // Watercolor Images
 @watercolor1  : url('/assets/watercolor/watercolor1.png');

themes/assets/coverPageBanner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 970.25 154.67"><defs><style>.cls-1{fill:#ed1f24;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="banner"><path id="mainShape" class="cls-1" d="M0,154.67V6.42l188.38,0s137.26,9.45,141.43,9.79c0,.14-96.52,6.76-96.52,6.76l47.09,2.24,39.48-3.05L479.43,34s-36.75,2.68-50.19,3.71c0,.29,178.19,14.48,178.19,14.48s34-3.95,34-4.24c-22.33-1.59-74.72-5.66-74.72-5.66l94-6.19s33.14,2.2,46.39,3.18c12.39.92,40.61,2.82,40.61,2.82l-24.34,2.07,35.24,3,47.36-3.62L762.5,40.26l95-6.94s84.83,6.11,96.45,7c0,.06-65.05,4.32-92.07,6.19-.29,0,39.6,3.57,54.16,4.73,0,.19-108.33,6.75-159.44,10.21,40.47,4.1,86.29,8.6,126,12.62,0,.15-41,4.34-58.14,6.16,0,.21,65.56,5.15,93.67,7.41-.2,0-41.27,2.79-56.81,4,0,.23,44.76,3.66,62.76,5.09,0,.11-103.55,7.17-150.95,10.53,0,.25,47.29,3.67,66.36,5.19,0,.1-62.19,4.45-89.84,6.47,0,.27,10.77,2.61,10.77,2.61L532.16,139.22,459.29,134l44.38-3.57L434.1,125l-58.43,4.31,59.76,4.36-123.38,11,44.19,3.14S337.9,149.34,330,150c-9.83.77-59.3,4.72-59.3,4.72Z"/><polygon id="diamondF" class="cls-1" points="552.6 154.33 469.43 147.19 550.72 142.21 633.24 148.52 552.6 154.33"/><polygon id="diamondE" class="cls-1" points="631.14 140.38 741.62 130.66 782.71 133.62 755.63 135.82 812.67 140.14 722.1 146.81 631.14 140.38"/><polygon id="diamondD" class="cls-1" points="812.57 62.87 892.92 57.13 970.25 63.1 894.05 68.76 812.57 62.87"/><path id="diamondC" class="cls-1" d="M480.21,29.59c4.21-.38,71.22-4.68,71.22-4.68l67.15,4.94-68.22,4.87S480.22,29.68,480.21,29.59Z"/><polygon id="diamondB" class="cls-1" points="450.19 23.52 344.58 16.3 449.17 8.62 556.38 16.36 450.19 23.52"/><polygon id="diamondA" class="cls-1" points="297.87 0 350.13 3.9 296.54 7.79 241.43 3.9 297.87 0"/></g></g></svg>

themes/assets/horizontalRule.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762.29 18.4"><defs><style>.cls-1{fill:#ed1f24;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="horizontalRule"><path id="mainShape" class="cls-1" d="M0,9.06S406.1,0,381.53,0,762.29,8.7,762.29,8.7s-350.49,10-381.53,9.69S0,9.06,0,9.06Z"/></g></g></svg>

themes/assets/naturalCritLogo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.65 94.6"><defs><style>.cls-1{fill:#ed1f24;}</style></defs><title>NaturalCritLogo</title><g id="Layer_2" data-name="Layer 2"><g id="base"><path id="D20" class="cls-1" d="M63.45.09s-45.91,12.4-46,12.45a.71.71,0,0,0-.15.08l-.15.1-.12.11a1.07,1.07,0,0,0-.14.16l-.09.11-.12.23,0,.06L.2,54.9a1.59,1.59,0,0,0,.11,1.69L29.36,94h0l0,0,.08.08.08.08.09.09.08.06.13.07a0,0,0,0,0,0,0,1.59,1.59,0,0,0,.27.12l.13.05.06,0a1.55,1.55,0,0,0,.37,0,1.63,1.63,0,0,0,.31,0l45.67-8.3.16,0,.11,0,.12,0,.06,0s0,0,0,0l.06,0a1.65,1.65,0,0,0,.36-.28l0-.06a1.6,1.6,0,0,0,.26-.38s0,0,0,0v0h0a.14.14,0,0,1,0-.06L94.52,43.74a1.4,1.4,0,0,0,.11-.4.41.41,0,0,0,0-.11,1.13,1.13,0,0,0,0-.26.66.66,0,0,0,0-.14,2,2,0,0,0-.06-.26l0-.11a2.68,2.68,0,0,0-.18-.33v0L65.29.6C64.77-.31,63.45.09,63.45.09ZM74.9,81.7l-28.81-18L78.5,38.49ZM44.1,61l-11-40.17L77,35.39ZM82,37.78l8.92,5.95L79,73.48Zm4.46-1.1-4.6-3.06L75.69,21.36Zm-9.26-4.8-42.07-14,28.05-14ZM30.56,16.34l-6.49-2.16L47.85,7.7Zm-11.35-.21L27.88,19,7.64,45Zm10.73,5.76L40.78,61.64,4.64,54.42Zm10.82,43.2L30.26,89.6,5.75,58.09Zm3.16,1.24L71.74,83.72l-38.26,7Z"/></g></g></svg>

themes/fonts/5e/fonts.less

@@ -106,3 +106,10 @@
 	font-weight: bold;
 	font-style: italic;
 }
+
+@font-face {
+	font-family: Overpass;
+	src: url('../../../fonts/5e/Overpass Medium.woff2');
+	font-weight: 500;
+	font-style: normal;
+}