Merge branch 'master' into experimentalNotificationDB

2025-12-26 11:42:39 +00:00 · 2023-03-12 22:30:53 +13:00
parent 28cadcad06 30e7c73805
commit 0fc3e03e95
89 changed files with 2179 additions and 1075 deletions
--- a/changelog.md
+++ b/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
@@ -70,8 +138,7 @@ For a full record of development, visit our [Github Page](https://github.com/nat
 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

--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/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'>
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/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{
--- a/client/homebrew/googleDrive.png
+++ b/client/homebrew/googleDrive.png
--- a/client/homebrew/googleDrive.svg
+++ b/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>
--- a/client/homebrew/googleDriveMono.png
+++ b/client/homebrew/googleDriveMono.png
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/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({
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
@@ -94,7 +94,7 @@
 		}
 	}
 	.googleDriveIcon {
-		height	: 20px;
+		height	: 18px;
 		padding : 0px;
 		margin  : -5px;
 	}
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/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()}
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/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}>
--- a/client/homebrew/pages/editPage/editPage.less
+++ b/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);
+		}
 	}
 }
--- a/client/homebrew/pages/homePage/welcome_msg.md
+++ b/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
--- a/client/icons/book-front-cover.svg
+++ b/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>
--- a/client/icons/customIcons.less
+++ b/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');
+}
--- a/client/icons/fa-file-c.svg
+++ b/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>
--- a/client/icons/mask-corner.svg
+++ b/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>
--- a/client/icons/mask-edge.svg
+++ b/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>
--- a/client/icons/position-bottom-left.svg
+++ b/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>
--- a/client/icons/position-bottom-right.svg
+++ b/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>
--- a/client/icons/position-bottom.svg
+++ b/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>
--- a/client/icons/position-left.svg
+++ b/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>
--- a/client/icons/position-right.svg
+++ b/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>
--- a/client/icons/position-top-left.svg
+++ b/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>
--- a/client/icons/position-top-right.svg
+++ b/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>
--- a/client/icons/position-top.svg
+++ b/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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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/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",
@@ -98,15 +98,15 @@
    "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",
+    "jest": "^29.5.0",
    "supertest": "^6.3.3"
  }
 }
--- a/scripts/buildHomebrew.js
+++ b/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);
--- a/server/googleActions.js
+++ b/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,
--- a/themes/V3/5ePHB/snippets.js
+++ b/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',
--- a/themes/V3/5ePHB/snippets/coverpage.gen.js
+++ b/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`;
+};
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -253,7 +253,7 @@ body {
 		border-image-outset : 9px 0px;
 		border-image-width  : 11px;
 		padding             : 0.13cm 0.16cm;
-		filter              : drop-shadow(1px 4px 6px #888);
+		box-shadow          : 1px 4px 14px #888;
 		.page :where(&) {
 			margin-top        : 9px; //Prevent top border getting cut off on colbreak
 		}
@@ -282,7 +282,7 @@ body {
 		border-image        : @descriptiveBoxImage 12 stretch;
 		border-image-outset : 4px;
 		padding             : 0.1em;
-		filter              : drop-shadow(0 0 3px #faf7ea);
+		box-shadow          : 0 0 6px #faf7ea;
 		.page :where(&) {
 			margin-top        : 4px; //Prevent top border getting cut off on colbreak
 		}
@@ -397,7 +397,7 @@ body {
 			border-image-outset   : 0px 2px;
 			background-blend-mode : overlay;
 			background-attachment : fixed;
-			filter                : drop-shadow(1px 4px 6px #888);
+			box-shadow            : 1px 4px 14px #888;
 			padding               : 4px 2px;
 			margin-left           : -0.16cm;
 			margin-right          : -0.16cm;
@@ -624,134 +624,241 @@ body {
 // *       CLASS TABLE
 // *****************************/
 .page .classTable{
-	th[colspan]:not([rowspan]) {
-		white-space : nowrap;
+th[colspan]:not([rowspan]) {
+	white-space : nowrap;
+}
+&.frame {
+	margin-top          : 0.7cm;
+	margin-bottom       : 0.9cm;
+	margin-left         : -0.1cm;
+	margin-right        : -0.1cm;
+	width               : calc(100% + 0.2cm);
+	border-collapse     : separate;
+	background-color    : white;
+	border              : initial;
+	border-style        : solid;
+	border-image-outset : 0.4cm 0.3cm;
+	border-image-repeat : stretch;
+	border-image-slice  : 200;
+	border-image-source : @frameBorderImage;
+	border-image-width  : 47px;
+	&.wide:first-child {
+		margin-top: 0.12cm;
 	}
-	&.frame {
-		margin-top          : 0.7cm;
-		margin-bottom       : 0.9cm;
-		margin-left         : -0.1cm;
-		margin-right        : -0.1cm;
-		width               : calc(100% + 0.2cm);
-		border-collapse     : separate;
-		background-color    : white;
-		border              : initial;
-		border-style        : solid;
-		border-image-outset : 0.4cm 0.3cm;
-		border-image-repeat : stretch;
-		border-image-slice  : 200;
-		border-image-source : @frameBorderImage;
-		border-image-width  : 47px;
-		&.wide:first-child {
-			margin-top: 0.12cm;
-		}
-		& + * {
-			margin-top: 0;
-		}
-	}
-	&.decoration {
-		position:relative;
-	}
-	&.decoration::before {
-		content             :'';
-		position            : absolute;
-		background-image    : @classTableDecoration,
-		                      @classTableDecoration;
-		background-size     : contain, contain;
-		background-repeat   : no-repeat, no-repeat;
-		background-position : top, bottom;
-		width               : 7.75cm;
-		height              : calc(100% + 3.3cm);
-		top                 : 50%;
-		left                : 50%;
-		transform           : translateY(-50%) translateX(-50%);
-		filter              : drop-shadow(0px 0px 1px #C8C5C080);
-		z-index             : -1;
-	}
-	&.decoration.wide::before {
-		width               : calc(100% + 3.3cm);
-		height              : 7.75cm;
-		background-position : left, right;
-	}
-	h5 + table{
-		margin-top : 0.2cm;
+	& + * {
+		margin-top: 0;
 	}
 }
+&.decoration {
+	position:relative;
+}
+&.decoration::before {
+	content             :'';
+	position            : absolute;
+	background-image    : @classTableDecoration,
+	                      @classTableDecoration;
+	background-size     : contain, contain;
+	background-repeat   : no-repeat, no-repeat;
+	background-position : top, bottom;
+	width               : 7.75cm;
+	height              : calc(100% + 3.3cm);
+	top                 : 50%;
+	left                : 50%;
+	transform           : translateY(-50%) translateX(-50%);
+	filter              : drop-shadow(0px 0px 1px #C8C5C080);
+	z-index             : -1;
+}
+&.decoration.wide::before {
+	width               : calc(100% + 3.3cm);
+	height              : 7.75cm;
+	background-position : left, right;
+}
+h5 + table{
+	margin-top : 0.2cm;
+}
+}
+//*****************************
+// *      COVER PAGE
+// *****************************/
+.page:has(.coverPage) {
+	columns    : 1;
+	text-align : center;
+	&:after {
+		all: unset;
+	}
+	.logo {
+		position   : absolute;
+		top        : 0.5cm;
+		left       : 0;
+		right      : 0;
+		filter     :drop-shadow(0 0 0.075cm black);
+		img {
+			height : 2cm;
+			width  : 100%;
+		}
+	}
+	.columnWrapper > p img {
+		position  : absolute;
+		bottom    : 0;
+		left      : 0;
+		height    : 100%;
+		min-width : 100%;
+		z-index   : -1;
+	}
+	h1 {
+		text-shadow: unset;
+		filter         : drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
+		text-transform : uppercase;
+		font-weight    : normal;
+		display        : block;
+		margin-top     : 1.2cm;
+		margin-bottom  : 0;
+		color          : white;
+		font-family    : NodestoCapsCondensed;
+		font-size      : 2.245cm;
+		line-height    : 0.85em;
+	}
+	h2 {
+		filter         : drop-shadow(0 0 1px black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
+		font-family    : NodestoCapsCondensed;
+		font-weight    : normal;
+		font-size      : 0.85cm;
+		letter-spacing : 0.1cm;
+		color          : white;
+	}
+	hr {
+		display          : block;
+		position         : relative;
+		background-image : @horizontalRule;
+		background-size  : 100% 100%;
+		visibility       : visible;
+		height           : 0.5cm;
+		width            : 12cm;
+		border           : none;
+		margin           : auto;
+		filter           : drop-shadow(0 0 3px black);
+	}
+	.banner {
+		filter           : drop-shadow(2px 2px 2px black);
+		position         : absolute;
+		left             : 0;
+		bottom           : 4.2cm;
+		background-image : url('/assets/coverPageBanner.svg');
+		height           : 1.7cm;
+		width            : 10.5cm;
+		color            : white;
+		font-family      : NodestoCapsCondensed;
+		font-weight      : normal;
+		font-size        : 1cm;
+		letter-spacing   : 0.014cm;
+		text-align       : left;
+		padding-left     : 1cm;
+		display          : flex;
+		justify-content  : center;
+		flex-direction   : column;
+		padding-top      : 0.1cm;
+	}
+	.footnote {
+		filter       : drop-shadow(0 0 0.7px black) drop-shadow(0 0 0 black)
+									 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+									 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+									 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
+		position     : absolute;
+		text-align   : center;
+		color        : white;
+		font-size    : 0.496cm;
+		bottom       : 1.3cm;
+		left         : 0;
+    right        : 0;
+    margin-left  : auto;
+    margin-right : auto;
+		width        : 70%;
+		font-family  : Overpass;
+	}
+}
+
+
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/
 .page {
-	&:has(.toc):after {
-		display: none;
+&:has(.toc):after {
+	display: none;
+}
+.toc {
+-webkit-column-break-inside : avoid;
+page-break-inside           : avoid;
+break-inside                : avoid;
+	h1 {
+		text-align    : center;
+		margin-bottom : 0.3cm;
 	}
-	.toc {
-	-webkit-column-break-inside : avoid;
-	page-break-inside           : avoid;
-	break-inside                : avoid;
-		h1 {
-			text-align    : center;
-			margin-bottom : 0.3cm;
-		}
-		a{
-			display         : inline;
-			color           : inherit;
-			text-decoration : none;
-			&:hover{
-				text-decoration : underline;
-			}
-		}
-		h4 {
-			margin-top  : 0.2cm;
-			line-height : 0.4cm;
-			& + ul li {
-				line-height: 1.2em;
-			}
-		}
-		ul{
-			padding-left    : 0;
-			list-style-type : none;
-			margin-top      : 0;
-			a {
-				width           : 100%;
-				display         : flex;
-				flex-flow       : row nowrap;
-				justify-content : space-between;
-			}
-			li + li h3 {
-				margin-top  : 0.26cm;
-				line-height : 1em
-			}
-			h3 span:first-child::after {
-				border : none;
-			}
-			span {
-				display : contents;
-				&:first-child::after {
-					content       : "";
-					bottom        : 0.08cm;
-					flex          : 1;
-					margin-left   : 0.08cm;        /* Spacing before dot leaders */
-					margin-right  : 0.16cm;
-					border-bottom : 0.05cm dotted #000;
-					margin-bottom : 0.08cm;
-				}
-				&:last-child {
-					display     : inline-block;
-					align-self  : flex-end;
-					font-family : "BookInsanityRemake";
-					font-size   : 0.34cm;
-					font-weight : normal;
-					color       : #000;
-				}
-			}
-			ul { /*List indent*/
-				margin-left : 1em;
-			}
-		}
-		&.wide{
-			.useColumns(0.96, @fillMode: balance);
+	a{
+		display         : inline;
+		color           : inherit;
+		text-decoration : none;
+		&:hover{
+			text-decoration : underline;
 		}
 	}
+	h4 {
+		margin-top  : 0.2cm;
+		line-height : 0.4cm;
+		& + ul li {
+			line-height: 1.2em;
+		}
+	}
+	ul{
+		padding-left    : 0;
+		list-style-type : none;
+		margin-top      : 0;
+		a {
+			width           : 100%;
+			display         : flex;
+			flex-flow       : row nowrap;
+			justify-content : space-between;
+		}
+		li + li h3 {
+			margin-top  : 0.26cm;
+			line-height : 1em
+		}
+		h3 span:first-child::after {
+			border : none;
+		}
+		span {
+			display : contents;
+			&:first-child::after {
+				content       : "";
+				bottom        : 0.08cm;
+				flex          : 1;
+				margin-left   : 0.08cm;        /* Spacing before dot leaders */
+				margin-right  : 0.16cm;
+				border-bottom : 0.05cm dotted #000;
+				margin-bottom : 0.08cm;
+			}
+			&:last-child {
+				display     : inline-block;
+				align-self  : flex-end;
+				font-family : "BookInsanityRemake";
+				font-size   : 0.34cm;
+				font-weight : normal;
+				color       : #000;
+			}
+		}
+		ul { /*List indent*/
+			margin-left : 1em;
+		}
+	}
+	&.wide{
+		.useColumns(0.96, @fillMode: balance);
+	}
+}
 }

 //*****************************
--- a/themes/V3/Blank/snippets.js
+++ b/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',
--- a/themes/V3/Blank/snippets/imageMask.gen.js
+++ b/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`;
+	}
+
+};
+
+()=>{
+
+};
--- a/themes/V3/Blank/style.less
+++ b/themes/V3/Blank/style.less
@@ -15,6 +15,21 @@ body {
 	-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;
@@ -115,6 +130,50 @@ body {
 		margin-top : 0;	                        // have vertical spacing.
 	}

+	//************************************
+	// *           CODE BLOCKS
+	// ************************************/
+	code{
+    font-family      : "Courier New", Courier, monospace;
+		white-space      : pre-wrap;
+		overflow-wrap    : break-word;
+	}
+
+	pre code{
+		width               : 100%;
+		display             : inline-block;
+	}
+	//*****************************
+	// *          EXTRAS
+	// *****************************/
+	.columnSplit {
+		visibility                 : hidden;
+		-webkit-column-break-after : always;
+		break-after                : always;
+		-moz-column-break-after    : always;
+		margin-top                 : 0;
+		& + * {
+			margin-top : 0;
+		}
+	}
+	//Avoid breaking up
+	blockquote,table{
+		z-index                     : 15;
+		-webkit-column-break-inside : avoid;
+		page-break-inside           : avoid;
+		break-inside                : avoid;
+	}
+	// Nested lists
+	ul ul,ol ol,ul ol,ol ul{
+		margin-bottom : 0px;
+		margin-left   : 1.5em;
+	}
+	li{
+		-webkit-column-break-inside : avoid;
+		page-break-inside           : avoid;
+		break-inside                : avoid;
+	}
+
 	/* Watermark */
 	.watermark {
 		display         : grid !important;
@@ -168,64 +227,139 @@ body {
 	.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;
+	/* 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
 		}
 	}
-	//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;
-	}
-}

-//*****************************
-// *    MUSTACHE DIVS/SPANS
-// *****************************/
-.page {
-	.block {
-		break-inside      : avoid;
-		display           : inline-block;
-		width             : 100%;
-	}
-	.inline-block {
-		display     : inline-block;
-		text-indent : initial;
+	.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); }
 }

 //*****************************
--- a/themes/assets/assets.less
+++ b/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');
--- a/themes/assets/coverPageBanner.svg
+++ b/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>
--- a/themes/assets/dragonBackground.png
+++ b/themes/assets/dragonBackground.png
--- a/themes/assets/horizontalRule.svg
+++ b/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>
--- a/themes/assets/naturalCritLogo.svg
+++ b/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>
--- a/themes/assets/waterColorMasks/corner/0001.webp
+++ b/themes/assets/waterColorMasks/corner/0001.webp
--- a/themes/assets/waterColorMasks/corner/0002.webp
+++ b/themes/assets/waterColorMasks/corner/0002.webp
--- a/themes/assets/waterColorMasks/corner/0003.webp
+++ b/themes/assets/waterColorMasks/corner/0003.webp
--- a/themes/assets/waterColorMasks/corner/0004.webp
+++ b/themes/assets/waterColorMasks/corner/0004.webp
--- a/themes/assets/waterColorMasks/corner/0005.webp
+++ b/themes/assets/waterColorMasks/corner/0005.webp
--- a/themes/assets/waterColorMasks/corner/0006.webp
+++ b/themes/assets/waterColorMasks/corner/0006.webp
--- a/themes/assets/waterColorMasks/corner/0007.webp
+++ b/themes/assets/waterColorMasks/corner/0007.webp
--- a/themes/assets/waterColorMasks/corner/0008.webp
+++ b/themes/assets/waterColorMasks/corner/0008.webp
--- a/themes/assets/waterColorMasks/corner/0009.webp
+++ b/themes/assets/waterColorMasks/corner/0009.webp
--- a/themes/assets/waterColorMasks/corner/0010.webp
+++ b/themes/assets/waterColorMasks/corner/0010.webp
--- a/themes/assets/waterColorMasks/corner/0011.webp
+++ b/themes/assets/waterColorMasks/corner/0011.webp
--- a/themes/assets/waterColorMasks/corner/0012.webp
+++ b/themes/assets/waterColorMasks/corner/0012.webp
--- a/themes/assets/waterColorMasks/corner/0013.webp
+++ b/themes/assets/waterColorMasks/corner/0013.webp
--- a/themes/assets/waterColorMasks/corner/0014.webp
+++ b/themes/assets/waterColorMasks/corner/0014.webp
--- a/themes/assets/waterColorMasks/corner/0015.webp
+++ b/themes/assets/waterColorMasks/corner/0015.webp
--- a/themes/assets/waterColorMasks/corner/0016.webp
+++ b/themes/assets/waterColorMasks/corner/0016.webp
--- a/themes/assets/waterColorMasks/corner/0017.webp
+++ b/themes/assets/waterColorMasks/corner/0017.webp
--- a/themes/assets/waterColorMasks/corner/0018.webp
+++ b/themes/assets/waterColorMasks/corner/0018.webp
--- a/themes/assets/waterColorMasks/corner/0019.webp
+++ b/themes/assets/waterColorMasks/corner/0019.webp
--- a/themes/assets/waterColorMasks/corner/0020.webp
+++ b/themes/assets/waterColorMasks/corner/0020.webp
--- a/themes/assets/waterColorMasks/corner/0021.webp
+++ b/themes/assets/waterColorMasks/corner/0021.webp
--- a/themes/assets/waterColorMasks/corner/0022.webp
+++ b/themes/assets/waterColorMasks/corner/0022.webp
--- a/themes/assets/waterColorMasks/corner/0023.webp
+++ b/themes/assets/waterColorMasks/corner/0023.webp
--- a/themes/assets/waterColorMasks/corner/0024.webp
+++ b/themes/assets/waterColorMasks/corner/0024.webp
--- a/themes/assets/waterColorMasks/corner/0025.webp
+++ b/themes/assets/waterColorMasks/corner/0025.webp
--- a/themes/assets/waterColorMasks/corner/0026.webp
+++ b/themes/assets/waterColorMasks/corner/0026.webp
--- a/themes/assets/waterColorMasks/corner/0027.webp
+++ b/themes/assets/waterColorMasks/corner/0027.webp
--- a/themes/assets/waterColorMasks/corner/0028.webp
+++ b/themes/assets/waterColorMasks/corner/0028.webp
--- a/themes/assets/waterColorMasks/corner/0029.webp
+++ b/themes/assets/waterColorMasks/corner/0029.webp
--- a/themes/assets/waterColorMasks/corner/0030.webp
+++ b/themes/assets/waterColorMasks/corner/0030.webp
--- a/themes/assets/waterColorMasks/corner/0031.webp
+++ b/themes/assets/waterColorMasks/corner/0031.webp
--- a/themes/assets/waterColorMasks/corner/0032.webp
+++ b/themes/assets/waterColorMasks/corner/0032.webp
--- a/themes/assets/waterColorMasks/corner/0033.webp
+++ b/themes/assets/waterColorMasks/corner/0033.webp
--- a/themes/assets/waterColorMasks/corner/0034.webp
+++ b/themes/assets/waterColorMasks/corner/0034.webp
--- a/themes/assets/waterColorMasks/corner/0035.webp
+++ b/themes/assets/waterColorMasks/corner/0035.webp
--- a/themes/assets/waterColorMasks/corner/0036.webp
+++ b/themes/assets/waterColorMasks/corner/0036.webp
--- a/themes/assets/waterColorMasks/corner/0037.webp
+++ b/themes/assets/waterColorMasks/corner/0037.webp
--- a/themes/assets/waterColorMasks/edge/0001.webp
+++ b/themes/assets/waterColorMasks/edge/0001.webp
--- a/themes/assets/waterColorMasks/edge/0002.webp
+++ b/themes/assets/waterColorMasks/edge/0002.webp
--- a/themes/assets/waterColorMasks/edge/0003.webp
+++ b/themes/assets/waterColorMasks/edge/0003.webp
--- a/themes/assets/waterColorMasks/edge/0004.webp
+++ b/themes/assets/waterColorMasks/edge/0004.webp
--- a/themes/assets/waterColorMasks/edge/0005.webp
+++ b/themes/assets/waterColorMasks/edge/0005.webp
--- a/themes/assets/waterColorMasks/edge/0006.webp
+++ b/themes/assets/waterColorMasks/edge/0006.webp
--- a/themes/assets/waterColorMasks/edge/0007.webp
+++ b/themes/assets/waterColorMasks/edge/0007.webp
--- a/themes/assets/waterColorMasks/edge/0008.webp
+++ b/themes/assets/waterColorMasks/edge/0008.webp
--- a/themes/assets/waterColorMasks/missingImage.png
+++ b/themes/assets/waterColorMasks/missingImage.png
--- a/themes/fonts/5e/Nodesto
+++ b/themes/fonts/5e/Nodesto
--- a/themes/fonts/5e/Overpass
+++ b/themes/fonts/5e/Overpass
--- a/themes/fonts/5e/fonts.less
+++ b/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;
+}
				`@@ -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>
				`@@ -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>`