Up version to 3.6.1

Fix author deletion #2674

.gitignore

@@ -12,3 +12,5 @@ todo.md
 startDB.bat
 startMViewer.bat
 .vscode
+
+coverage

README.md

@@ -21,24 +21,29 @@ below.
 First, install three programs that The Homebrewery requires to run and retrieve
 updates:
 
-1. install [node](https://nodejs.org/en/)
+1. install [node](https://nodejs.org/en/), version v16 or higher.
 1. install [mongodb](https://www.mongodb.com/try/download/community) (Community version)
 
     For the easiest installation, follow these steps:
     1. In the installer, uncheck the option to run as a service.
     1. You can install MongoDB Compass if you want a GUI to view your database documents.
+    1. If you install any version over 6.0, you will have to install [MongoDB Shell](https://www.mongodb.com/try/download/shell).
     1. Go to the C:\ drive and create a folder called "data".
     1. Inside the "data" folder, create a new folder called "db".
-    1. Open a command prompt or other terminal and navigate to your MongoDB install folder (C:\Program Files\Mongo\Server\4.4\bin).
+    1. Open a command prompt or other terminal and navigate to your MongoDB install folder (C:\Program Files\Mongo\Server\6.0\bin).
     1. In the command prompt, run "mongod", which will start up your local database server.
     1. While MongoD is running, open a second command prompt and navigate to the MongoDB install folder.
-    1. In the second command prompt, run "mongo", which allows you to edit the database.
-    1. Type `use homebrewery` to create The Homebrewery database. You should see `switched to db homebrewery`.
-    1. Type `db.brews.insert({"title":"test"})` to create a blank document. You should see `WriteResult({ "nInserted" : 1 })`.
     1. Search in Windows for "Advanced system settings" and open it.
     1. Click "Environment variables", find the "path" variable, and double-click to open it.
     1. Click "New" and paste in the path to the MongoDB "bin" folder.
     1. Click "OK" three times to close all the windows.
+    1. In the second command prompt, run "mongo", which allows you to edit the database.
+    1. Type `use homebrewery` to create The Homebrewery database. You should see `switched to db homebrewery`.
+    1. Type `db.brews.insertOne({"title":"test"})` to create a blank document. You should see `{
+acknowledged: true,
+insertedId: ObjectId("63c2fce9e5ac5a94fe2410cf")
+}`
+   
 1. install [git](https://git-scm.com/downloads) (select the option that allows Git to run from the command prompt).
 
 Checkout the repo ([documentation][github-clone-repo-docs-url]):
@@ -51,11 +56,19 @@ git clone https://github.com/naturalcrit/homebrewery.git
 Second, you will need to add the environment variable `NODE_ENV=local` to allow
 the project to run locally.
 
-You can set this temporarily in your shell of choice:
+You can set this **temporarily** (until you close the terminal) in your shell of choice with admin privileges:
 * Windows Powershell: `$env:NODE_ENV="local"`
 * Windows CMD: `set NODE_ENV=local`
 * Linux / macOS: `export NODE_ENV=local`
 
+If you want to add this variable **permanently** the steps are as follows:
+    1. Search in Windows for "Advanced system settings" and open it.
+    1. Click "Environment variables".
+    1. In System Variables, click "New"
+    1. Click "New" and write `NODE_ENV` as a name and `local` as the value.
+    1. Click "OK" three times to close all the windows.
+  This can be undone at any time if needed.
+
 Third, you will need to install the Node dependencies, compile the app, and run
 it using the two commands:
 
@@ -65,6 +78,13 @@ it using the two commands:
 You should now be able to go to [http://localhost:8000](http://localhost:8000)
 in your browser and use The Homebrewery offline.
 
+If you had any issue at all, here are some links that may be useful:
+- [Course](https://learn.mongodb.com/courses/m103-basic-cluster-administration) on cluster administration, useful for beginners
+- [Mongo community forums](https://www.mongodb.com/community/forums/)
+- Useful Stack Overflow links for your most probable errors: [1](https://stackoverflow.com/questions/44962540/mongod-and-mongo-commands-not-working-on-windows-10), [2](https://stackoverflow.com/questions/15053893/mongo-command-not-recognized-when-trying-to-connect-to-a-mongodb-server/41507803#41507803), [3](https://stackoverflow.com/questions/51224959/mongo-is-not-recognized-as-an-internal-or-external-command-operable-program-o)
+
+If you still have problems, post in [Our Subreddit](https://www.reddit.com/r/homebrewery/) and we will help you.
+
 ### Running the application via Docker
 
 Please see the docs here: [README.DOCKER.md](./README.DOCKER.md)

changelog.md

@@ -61,6 +61,16 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### Saturday 18/02/2023 - v3.6.1
+{{taskList
+##### G-Ambatte
+
+* [x] Fix users not being removed from Authors list correctly
+
+Fixes issues [#2674](https://github.com/naturalcrit/homebrewery/issues/2674)
+}}
+
+
 ### Friday 23/01/2023 - v3.6.0
 {{taskList
 ##### calculuschild

client/homebrew/brewRenderer/brewRenderer.jsx

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

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -37,7 +37,7 @@ const MetadataEditor = createClass({
 				renderer    : 'legacy',
 				theme       : '5ePHB'
 			},
-			onChange : ()=>{},
+			onChange    : ()=>{},
 			reportError : ()=>{}
 		};
 	},
@@ -189,6 +189,10 @@ const MetadataEditor = createClass({
 				return <div className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
 					{`${theme.renderer} : ${theme.name}`}
 					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
+					<div className='preview'>
+						<h6>{`${theme.name}`} preview</h6>
+						<img src={`/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`}/>
+					</div>
 				</div>;
 			});
 		};
@@ -198,14 +202,14 @@ const MetadataEditor = createClass({
 
 		if(this.props.metadata.renderer == 'legacy') {
 			dropdown =
-				<Nav.dropdown className='disabled' trigger='disabled'>
+				<Nav.dropdown className='disabled value' trigger='disabled'>
 					<div>
 						{`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i>
 					</div>
 				</Nav.dropdown>;
 		} else {
 			dropdown =
-				<Nav.dropdown trigger='click'>
+				<Nav.dropdown className='value' trigger='click'>
 					<div>
 						{`${_.upperFirst(currentTheme.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
 					</div>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -35,7 +35,6 @@
 		flex-direction: column;
 		flex: 5 0 200px;
 		gap: 10px;
-		
 	}
 	.field{
 		display       : flex;
@@ -159,7 +158,6 @@
 		font-size : 13.33px;
 		.navDropdownContainer {
 			background-color	: white;
-			width				: 100%;
 			position			: relative;
 			z-index				: 500;
 			&.disabled {
@@ -182,24 +180,51 @@
 			}
 			.navDropdown {
 				box-shadow	: 0px 5px 10px rgba(0, 0, 0, 0.3);
-				position	: absolute;
-				width		: 100%;
+				position	  : absolute;
+				width		    : 100%;
 				.item {
-					padding				: 3px 3px;
-					border-top			: 1px solid rgb(118, 118, 118);
-					position			: relative;
-					overflow			: hidden;
+					padding           : 3px 3px;
+					border-top        : 1px solid rgb(118, 118, 118);
+					position          : relative;
+					overflow          : visible;
 					background-color	: white;
+					.preview {
+						display       : flex;
+  					flex-direction: column;
+						background    : #ccc;
+						border-radius : 5px;
+  					box-shadow    : 0 0 5px black;
+						width         : 200px;
+						color         :black;
+						position      : absolute;
+						top           : 0;
+						right         : 0;
+						opacity       : 0;
+						transition    : opacity 250ms ease;
+						z-index       : 1;
+						overflow      :hidden;
+						h6 {
+							font-weight   : 900;
+							padding-inline:1em;
+							padding-block :.5em;
+							border-bottom :2px solid hsl(0,0%,40%);
+						}
+					}
 					&:hover {
 						background-color	: @blue;
-						color				: white;
+						color				      : white;
 					}
-					img {
-						mask-image			: linear-gradient(90deg, transparent, black 20%);
+					&:hover > .preview {
+						opacity: 1;
+					}
+					>img {
+						mask-image			    : linear-gradient(90deg, transparent, black 20%);
 						-webkit-mask-image	: linear-gradient(90deg, transparent, black 20%);
-				    position	: absolute;
-				    left		: ~"max(100px, 100% - 300px)";
-				    top			: 0px;
+				    	position			    : absolute;
+				    	right				      : 0;
+				    	top					      : 0px;
+						width				        : 50%;
+						height				      : 100%;
 					}
 				}
 			}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -163,15 +163,22 @@ const SnippetGroup = createClass({
 			onSnippetClick : function(){},
 		};
 	},
-	handleSnippetClick : function(snippet){
+	handleSnippetClick : function(e, snippet){
+		e.stopPropagation();
 		this.props.onSnippetClick(execute(snippet.gen, this.props.brew));
 	},
-	renderSnippets : function(){
-		return _.map(this.props.snippets, (snippet)=>{
-			return <div className='snippet' key={snippet.name} onClick={()=>this.handleSnippetClick(snippet)}>
+	renderSnippets : function(snippets){
+		return _.map(snippets, (snippet)=>{
+			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
 				{snippet.name}
+				{snippet.subsnippets && <>
+					<i className='fas fa-caret-right'></i>
+					<div className='dropdown side'>
+						{this.renderSnippets(snippet.subsnippets)}
+					</div></>}
 			</div>;
+
 		});
 	},
 
@@ -182,7 +189,7 @@ const SnippetGroup = createClass({
 				<span className='groupName'>{this.props.groupName}</span>
 			</div>
 			<div className='dropdown'>
-				{this.renderSnippets()}
+				{this.renderSnippets(this.props.snippets)}
 			</div>
 		</div>;
 	},

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,4 +1,4 @@
-
+@import (less) './client/icons/customIcons.less';
 .snippetBar{
 	@menuHeight      : 25px;
 	position         : relative;
@@ -83,7 +83,7 @@
 	.snippetGroup{
 		border-right   : 1px solid black;
 		&:hover{
-			.dropdown{
+			&>.dropdown{
 				visibility : visible;
 			}
 		}
@@ -97,15 +97,30 @@
 			background-color : #ddd;
 			.snippet{
 				.animate(background-color);
+				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;
+					}
 				}
 				&:hover{
 					background-color : #999;
+					&>.dropdown{
+						visibility : visible;
+						&.side {
+							left: 100%;
+							top: 0%;
+							margin-left:0;
+							box-shadow: -1px 1px 2px 0px #999;
+						}
+					}
 				}
 			}
 		}

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

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

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

@@ -10,14 +10,14 @@
 	-moz-column-width    : auto;
 	-webkit-column-gap   : auto;
 	-moz-column-gap      : auto;
+	height               : auto;
+	min-height           : 279.4mm;
+	margin               : 20px auto;
 }
 .listPage{
 	.content{
-		.phb{
-			.noColumns();
-			height     : auto;
-			min-height : 279.4mm;
-			margin     : 20px auto;
+		.page{
+			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
 			&::after{
 				display : none;
 			}

client/homebrew/pages/printPage/printPage.jsx

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

client/icons/customIcons.less

@@ -0,0 +1,15 @@
+.fac {
+  display      : inline-block;
+}
+.position-top-left {
+  content: url('../icons/position-top-left.svg');
+}
+.position-top-right {
+  content: url('../icons/position-top-right.svg');
+}
+.position-bottom-left {
+  content: url('../icons/position-bottom-left.svg');
+}
+.position-bottom-right {
+  content: url('../icons/position-bottom-right.svg');
+}

client/icons/position-bottom-left.svg

@@ -0,0 +1 @@
+<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>

client/icons/position-bottom-right.svg

@@ -0,0 +1 @@
+<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>

client/icons/position-top-left.svg

@@ -0,0 +1 @@
+<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>

client/icons/position-top-right.svg

@@ -0,0 +1 @@
+<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>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "engines": {
     "node": "16.11.x"
   },
@@ -82,7 +82,7 @@
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.1.7",
     "fs-extra": "11.1.0",
-    "googleapis": "110.0.0",
+    "googleapis": "111.0.0",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
@@ -91,22 +91,22 @@
     "marked-extended-tables": "^1.0.5",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.4",
-    "mongoose": "^6.8.4",
+    "mongoose": "^6.9.1",
     "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.7.0",
+    "react-router-dom": "6.8.1",
     "sanitize-filename": "1.6.3",
     "superagent": "^6.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.32.0",
-    "eslint-plugin-react": "^7.32.1",
-    "jest": "^29.2.2",
+    "eslint": "^8.34.0",
+    "eslint-plugin-react": "^7.32.2",
+    "jest": "^29.4.3",
     "supertest": "^6.3.3"
   }
 }

scripts/buildHomebrew.js

@@ -20,7 +20,8 @@ const transforms = {
 };
 
 const build = async ({ bundle, render, ssr })=>{
-	const css = await lessTransform.generate({ paths: './shared' });
+	let 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);
@@ -72,6 +73,7 @@ fs.emptyDirSync('./build');
 		themeData.path = dir;
 		themes.V3[dir] = (themeData);
 		fs.copy(`./themes/V3/${dir}/dropdownTexture.png`, `./build/themes/V3/${dir}/dropdownTexture.png`);
+		fs.copy(`./themes/V3/${dir}/dropdownPreview.png`, `./build/themes/V3/${dir}/dropdownPreview.png`);
 		const src = `./themes/V3/${dir}/style.less`;
 	  ((outputDirectory)=>{
 			less.render(fs.readFileSync(src).toString(), {
@@ -95,6 +97,7 @@ fs.emptyDirSync('./build');
 	// Move assets
 	await fs.copy('./themes/fonts', './build/fonts');
 	await fs.copy('./themes/assets', './build/assets');
+	await fs.copy('./client/icons', './build/icons');
 
 	//v==----------------------------- BUNDLE PACKAGES --------------------------------==v//
 

server/app.js

@@ -294,8 +294,15 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), (req, res, next)=>{
 app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
 	sanitizeBrew(req.brew, 'share');
 	splitTextStyleAndMetadata(req.brew);
-	req.brew.views = 0;
-	req.brew.title = `CLONE - ${req.brew.title}`;
+	const brew = {
+		shareId  : req.brew.shareId,
+		title    : `CLONE - ${req.brew.title}`,
+		text     : req.brew.text,
+		style    : req.brew.style,
+		renderer : req.brew.renderer,
+		theme    : req.brew.theme
+	};
+	req.brew = _.defaults(brew, DEFAULT_BREW);
 
 	req.ogMeta = { ...defaultMetaTags,
 		title       : 'New',

server/brewDefaults.js

@@ -16,6 +16,7 @@ const DEFAULT_BREW = {
 	tags        : [],
 	systems     : [],
 	thumbnail   : '',
+	views       : 0,
 	published   : false,
 	pageCount   : 1,
 	gDrive      : false,

server/homebrew.api.js

@@ -317,8 +317,7 @@ If you believe you should have access to this brew, ask the file owner to invite
 					brew.textBin = zlib.deflateRawSync(brew.text);
 					brew.text = undefined;
 				}
-
-				// Otherwise, save the brew with updated author list
+				brew.markModified('authors'); //Mongo will not properly update arrays without markModified()
 				await brew.save()
 					.catch((err)=>{
 						throw { status: 500, message: err };

server/homebrew.api.spec.js

@@ -11,6 +11,7 @@ describe('Tests for api', ()=>{
 	let modelBrew;
 	let saveFunc;
 	let removeFunc;
+	let markModifiedFunc;
 	let saved;
 
 	beforeEach(()=>{
@@ -20,15 +21,18 @@ describe('Tests for api', ()=>{
 			return saved;
 		});
 		removeFunc = jest.fn(async function() {});
+		markModifiedFunc = jest.fn(()=>true);
 
 		modelBrew = (brew)=>({
 			...brew,
-			save     : saveFunc,
-			remove   : removeFunc,
-			toObject : function() {
+			save         : saveFunc,
+			remove       : removeFunc,
+			markModified : markModifiedFunc,
+			toObject     : function() {
 				delete this.save;
 				delete this.toObject;
 				delete this.remove;
+				delete this.markModified;
 				return this;
 			}
 		});
@@ -71,7 +75,8 @@ describe('Tests for api', ()=>{
 			lastViewed  : new Date(),
 			version     : 1,
 			pageCount   : 1,
-			textBin     : ''
+			textBin     : '',
+			views       : 0
 		};
 		googleBrew = {
 			...hbBrew,
@@ -261,7 +266,8 @@ If you believe you should have access to this brew, ask the file owner to invite
 				gDrive      : false,
 				style       : undefined,
 				trashed     : false,
-				updatedAt   : undefined
+				updatedAt   : undefined,
+				views       : 0
 			});
 			expect(next).toHaveBeenCalled();
 			expect(api.getId).toHaveBeenCalledWith(req);
@@ -452,7 +458,8 @@ brew`);
 				thumbnail   : '',
 				title       : 'asdf',
 				trashed     : false,
-				updatedAt   : undefined
+				updatedAt   : undefined,
+				views       : 0
 			});
 		});
 
@@ -510,7 +517,8 @@ brew`);
 				thumbnail   : '',
 				title       : 'asdf',
 				trashed     : false,
-				updatedAt   : undefined
+				updatedAt   : undefined,
+				views       : 0
 			});
 		});
 
@@ -623,6 +631,7 @@ brew`);
 			await api.deleteBrew(req, res);
 
 			expect(api.getBrew).toHaveBeenCalled();
+			expect(markModifiedFunc).toHaveBeenCalled();
 			expect(model.findOne).toHaveBeenCalled();
 			expect(removeFunc).not.toHaveBeenCalled();
 			expect(saveFunc).toHaveBeenCalled();
@@ -712,6 +721,7 @@ brew`);
 			await api.deleteBrew(req, res);
 
 			expect(api.getBrew).toHaveBeenCalled();
+			expect(markModifiedFunc).toHaveBeenCalled();
 			expect(model.findOne).toHaveBeenCalled();
 			expect(removeFunc).not.toHaveBeenCalled();
 			expect(api.deleteGoogleBrew).toHaveBeenCalled();

shared/naturalcrit/splitPane/splitPane.less

@@ -22,7 +22,7 @@
 			vertical-align : middle;
 			text-align     : center;
 			i{
-				display   : block;
+				display   : block !important;
 				margin    : 10px 0px;
 				font-size : 6px;
 				color     : #666;

themes/Legacy/5ePHB/style.less

@@ -1,497 +1,499 @@
-@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{
+@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(){
 		font-family : ScalySans;
-		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;
+		em{
+			font-family : ScalySans;
+			font-style  : italic;
+		}
+		strong{
+			font-family    : ScalySans;
+			font-weight    : 800;
+			letter-spacing : -0.02em;
 		}
 	}
-	ul{
-		margin-bottom       : 0.8em;
-		padding-left        : 1.4em;
-		line-height         : 1.269em;
-		list-style-position : outside;
-		list-style-type     : disc;
+	.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;
 	}
-	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;
-				}
-			}
-		}
-	}
-	//*****************************
-	// *            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;
+	.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{
-				padding-bottom : 0px;
+				margin-top : -0.8em;
 			}
 		}
-		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;
+			margin-bottom       : 0.8em;
+			padding-left        : 1.4em;
+			line-height         : 1.269em;
+			list-style-position : outside;
+			list-style-type     : disc;
 		}
-		// Monster Ability table
-		hr+table{
-			margin              : 0;
-			background-color    : transparent;
-			border-style        : none;
-			border-image        : none;
+		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:nth-child(odd), tr:nth-child(even){
-					background-color : transparent;
+				tr{
+					td{
+						padding : 0.3em 0.1em;
+					}
+					&:nth-child(odd){
+						background-color : @noteGreen;
+					}
 				}
 			}
 		}
-		table{
-			color : @headerText;
+		//*****************************
+		// *            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;
+			}
 		}
-		p+p{
-			margin-top     : 0em;
-			padding-bottom : 0.5em;
-			text-indent    : 0em;
+		//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;
 		}
-		//Triangle dividers
-		hr{
-			visibility       : visible;
-			height           : 6px;
-			margin           : 4px 0px;
-			background-image : @redTriangleImage;
-			background-size  : 100% 100%;
-			border           : none;
+		//*****************************
+		// *    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){
+		//Full Width
+		hr+hr+blockquote{
+			.useColumns(0.96);
+		}
+		//*****************************
+		// *           FOOTER
+		// *****************************/
 		&:after{
-			transform : scaleX(-1);
+			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{
-			left : 2px;
+			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{
-			left       : 80px;
-			text-align : left;
+			position   : absolute;
+			right      : 80px;
+			bottom     : 32px;
+			z-index    : 150;
+			width      : 200px;
+			font-size  : 0.8em;
+			color      : #c9ad6a;
+			text-align : right;
 		}
-	}
-	.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);
+		//*****************************
+		// *          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;
 		}
-	}
-	.footnote{
-		position   : absolute;
-		right      : 80px;
-		bottom     : 32px;
-		z-index    : 150;
-		width      : 200px;
-		font-size  : 0.8em;
-		color      : #c9ad6a;
-		text-align : right;
 	}
 	//*****************************
-	// *          EXTRAS
+	// *         SPELL LIST
 	// *****************************/
-	hr{
-		visibility : hidden;
-		margin     : 0px;
+	.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;
+		}
 	}
-	//Modified unorder list, used in spells
-	hr+ul{
-		margin-bottom   : 0.5em;
-		padding-left    : 1em;
-		text-indent     : -1em;
-		list-style-type : none;
+	//*****************************
+	// *         WIDE
+	// *****************************/
+	.phb .wide{
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
 	}
-	//Column Break
-	pre, code{
-		visibility                 : hidden;
-		-webkit-column-break-after : always;
-		break-after                : always;
-		-moz-column-break-after    : always;
+	//*****************************
+	// *       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;
+		}
 	}
-	//Avoid breaking up
-	p,blockquote,table{
-		z-index                     : 15;
-		-webkit-column-break-inside : avoid;
-		page-break-inside           : avoid;
-		break-inside                : avoid;
+	//************************************
+	// *       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;
+		}
 	}
-	//Better spacing for spell blocks
-	h4+p+hr+ul{
-		margin-top : -0.5em
+	.phb pre+.descriptive{
+		margin-top : 8px;
 	}
-	//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;
+	//*****************************
+	// *    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;
+				}
+			}
 		}
+	}
+	//*****************************
+	// *      TABLE OF CONTENTS
+	// *****************************/
+	.phb .toc{
+		-webkit-column-break-inside : avoid;
+		page-break-inside           : avoid;
+		break-inside                : avoid;
 		a{
-			color           : inherit;
-			text-decoration : unset;
-			&:hover {
+			color           : black;
+			text-decoration : none;
+			&:hover{
 				text-decoration : underline;
 			}
 		}
-	}
-}
-//*****************************
-// *      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;
 		}
 	}
-	ul{
-		padding-left    : 0;
-		list-style-type : none;
-	}
-	&>ul>li{
-		margin-bottom : 10px;
-	}
 }

themes/V3/5eDMG/style.less

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

themes/V3/Blank/style.less

@@ -1,276 +1,278 @@
-@import (less) './themes/fonts/5e/fonts.less';
-@import (less) './themes/assets/assets.less';
+@layer V3_Blank {
+	@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
-}
-
-@page { margin: 0; }
-body {
-	counter-reset : phb-page-numbers;
-}
-*{
-	-webkit-print-color-adjust : exact;
-}
-
-.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;
+	:root {
+		//Colors
+		--HB_Color_Background            : #FFFFFF; // White
+		--HB_Color_WatercolorStain       : #000000; // Black
 	}
 
-	//*****************************
-	// *           HEADERS
-	// *****************************/
-	h1,h2,h3,h4,h5,h6{
-		font-weight  : bold;
-		line-height  : 1.2em;
+	@page { margin: 0; }
+	body {
+		counter-reset : phb-page-numbers;
 	}
-	h1{
-		font-size : 2em;
+	*{
+		-webkit-print-color-adjust : exact;
 	}
-	h2{
-		font-size : 1.5em;
+
+	.useColumns(@multiplier : 1, @fillMode: balance){
+		column-fill          : @fillMode;
+		column-count         : 2;
 	}
-	h3{
-		font-size : 1.17em;
+	.columnWrapper{
+		max-height        : 100%;
+		column-span       : all;
+		columns           : inherit;
+		column-gap        : inherit;
 	}
-	h4{
-		font-size : 1em;
+	.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;
 	}
-	h5{
-		font-size : 0.83em;
-	}
-	//*****************************
-	// *          TABLE
-	// *****************************/
-	table{
-		width : 100%;
-		thead{
-			display     : table-row-group;
+		//*****************************
+		// *            BASE
+		// *****************************/
+	.page{
+		p{
+			overflow-wrap : break-word;
+			display       : block;
+		}
+		strong{
 			font-weight : bold;
 		}
-	}
-	div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
-		margin-top : 0;	                        // have vertical spacing.
-	}
+		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;
+		}
 
-	/* 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;
+		//*****************************
+		// *           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;
 		}
 	}
 
-	/* 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
+	// *    MUSTACHE DIVS/SPANS
 	// *****************************/
-	.columnSplit {
-		visibility                 : hidden;
-		-webkit-column-break-after : always;
-		break-after                : always;
-		-moz-column-break-after    : always;
-		margin-top                 : 0;
-		& + * {
-			margin-top : 0;
+	.page {
+		.block {
+			break-inside      : avoid;
+			display           : inline-block;
+			width             : 100%;
+		}
+		.inline-block {
+			display     : inline-block;
+			text-indent : initial;
 		}
 	}
-	//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%;
+	//*****************************
+	// *    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;
+	  }
 	}
-	.inline-block {
-		display     : inline-block;
-		text-indent : initial;
-	}
-}
 
-//*****************************
-// *    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;
-		&+* {
+	//*****************************
+	// *    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/fonts/5e/fonts.less

@@ -81,28 +81,28 @@
 /* Cover Page */
 @font-face {
 	font-family: NodestoCapsCondensed;
-	src: url('../fonts/5e/Nodesto Caps Condensed.woff2');
+	src: url('../../../fonts/5e/Nodesto Caps Condensed.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: NodestoCapsCondensed;
-	src: url('../fonts/5e/Nodesto Caps Condensed Bold.woff2');
+	src: url('../../../fonts/5e/Nodesto Caps Condensed Bold.woff2');
 	font-weight: bold;
 	font-style: normal;
 }
 
 @font-face {
 	font-family: NodestoCapsCondensed;
-	src: url('../fonts/5e/Nodesto Caps Condensed Italic.woff2');
+	src: url('../../../fonts/5e/Nodesto Caps Condensed Italic.woff2');
 	font-weight: normal;
 	font-style: italic;
 }
 
 @font-face {
 	font-family: NodestoCapsCondensed;
-	src: url('../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
+	src: url('../../../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
 	font-weight: bold;
 	font-style: italic;
-}
+}