Merge branch 'master' into fixUndefinedCSS

2026-01-17 21:02:49 +00:00 · 2021-07-30 18:05:02 -04:00
parent 577a434e17 d02d51717d
commit 21223cbcd4
61 changed files with 962 additions and 446 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -181,7 +181,10 @@ const BrewRenderer = createClass({
 					</div>
 	        : null}

-				<Frame initialContent={this.state.initialContent} style={{ width: '100%', height: '100%', visibility: this.state.visibility }} contentDidMount={this.frameDidMount}>
+				<Frame initialContent={this.state.initialContent}
+					head = <link href={`${this.props.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
+					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
+					contentDidMount={this.frameDidMount}>
 					<div className={'brewRenderer'}
 						onScroll={this.handleScroll}
 						style={{ height: this.state.height }}>
@@ -193,7 +196,7 @@ const BrewRenderer = createClass({
 						</div>

 						<div className='pages' ref='pages'>
-							{/* Apply CSS and render pages from Markdown tab */}
+							{/* Apply CSS from Style tab and render pages from Markdown tab */}
 							{this.state.isMounted
 								&&
 								<>
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -1,19 +1,11 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
-& {@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';} //&{} keeps internal variables locally-scoped
-& {@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';}

 .brewRenderer{
 	will-change : transform;
 	overflow-y  : scroll;
 	.pages{
 		margin : 30px 0px;
-		&>.phb{
-			margin-right  : auto;
-			margin-bottom : 30px;
-			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000;
-		}
-		&>.phb3{
+		&>.page{
 			margin-right  : auto;
 			margin-bottom : 30px;
 			margin-left   : auto;
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -131,7 +131,7 @@ const Editor = createClass({

 					// Highlight inline spans {{content}}
 					if(line.includes('{{') && line.includes('}}')){
-						const regex = /{{(?:="[\w,\-. ]*"|[^"'\s])*\s*|}}/g;
+						const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
 						let match;
 						let blockCount = 0;
 						while ((match = regex.exec(line)) != null) {
@@ -150,7 +150,7 @@ const Editor = createClass({
 						// Highlight block divs {{\n Content \n}}
 						let endCh = line.length+1;

-						const match = line.match(/^ *{{(?:="[\w,\-. ]*"|[^"'\s])*$|^ *}}$/);
+						const match = line.match(/^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/);
 						if(match)
 							endCh = match.index+match[0].length;
 						codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -18,10 +18,11 @@
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
-			flex-grow      : 0;
+			flex           : 0 0 auto;
 		}
 		&>.value{
-			flex-grow : 1;
+			flex           : 1 1 auto;
+			min-width      : 200px;
 		}
 	}
 	.description.field textarea.value{
@@ -38,15 +39,22 @@
 			font-size      : 0.7em;
 			font-weight    : 800;
 			user-select    : none;
+			white-space    : nowrap;
+			display        : inline-flex;
+			align-items    : center;
 		}
 		input{
 			vertical-align : middle;
 			cursor         : pointer;
+			margin         : 3px;
 		}
 	}
 	.publish.field .value{
 		position : relative;
 		margin-bottom: 15px;
+		button{
+			width:100%;
+		}
 		button.publish{
 			.button(@blueLight);
 		}
@@ -76,4 +84,4 @@
 		font-size: 0.8em;
 		line-height    : 1.5em;
 	}
-}
+}
--- a/client/homebrew/editor/snippetbar/snippets/magic.gen.js
+++ b/client/homebrew/editor/snippetbar/snippets/magic.gen.js
@@ -57,7 +57,7 @@ const itemNames = [
 module.exports = {

 	spellList : function(){
-		const levels = ['Cantrips (0 Level)', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];
+		const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];

 		const content = _.map(levels, (level)=>{
 			const spells = _.map(_.sampleSize(spellNames, _.random(5, 15)), (spell)=>{
@@ -66,7 +66,7 @@ module.exports = {
 			return `##### ${level} \n${spells} \n`;
 		}).join('\n');

-		return `<div class='spellList'>\n${content}\n</div>`;
+		return `{{spellList\n${content}\n}}`;
 	},

 	spell : function(){
@@ -82,11 +82,11 @@ module.exports = {
 		return [
 			`#### ${_.sample(spellNames)}`,
 			`*${_.sample(level)}-level ${_.sample(spellSchools)}*`,
-			'___',
-			'- **Casting Time:** 1 action',
-			`- **Range:** ${_.sample(['Self', 'Touch', '30 feet', '60 feet'])}`,
-			`- **Components:** ${components}`,
-			`- **Duration:** ${_.sample(['Until dispelled', '1 round', 'Instantaneous', 'Concentration, up to 10 minutes', '1 hour'])}`,
+			'',
+			'**Casting Time:** :: 1 action',
+			`**Range:**        :: ${_.sample(['Self', 'Touch', '30 feet', '60 feet'])}`,
+			`**Components:**   :: ${components}`,
+			`**Duration:**     :: ${_.sample(['Until dispelled', '1 round', 'Instantaneous', 'Concentration, up to 10 minutes', '1 hour'])}`,
 			'',
 			'A flame, equivalent in brightness to a torch, springs from an object that you touch. ',
 			'The effect look like a regular flame, but it creates no heat and doesn\'t use oxygen. ',
--- a/client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js
+++ b/client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js
@@ -146,18 +146,18 @@ module.exports = {
 			## ${getMonsterName()}
 			*${getType()}, ${getAlignment()}*
 			___
-			: **Armor Class** : ${_.random(10, 20)} (chain mail, shield)
-			: **Hit Points**  : ${_.random(1, 150)}(1d4 + 5)
-			: **Speed**       : ${_.random(0, 50)}ft.
+			**Armor Class** :: ${_.random(10, 20)} (chain mail, shield)
+			**Hit Points**  :: ${_.random(1, 150)}(1d4 + 5)
+			**Speed**       :: ${_.random(0, 50)}ft.
 			___
 			|  STR  |  DEX  |  CON  |  INT  |  WIS  |  CHA  |
 			|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|
 			${getStats()}
 			___
-			: **Condition Immunities** : ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
-			: **Senses**               : darkvision 60 ft., passive Perception ${_.random(3, 20)}
-			: **Languages**            : ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
-			: **Challenge**            : ${_.random(0, 15)} (${_.random(10, 10000)} XP)
+			**Condition Immunities** :: ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
+			**Senses**               :: darkvision 60 ft., passive Perception ${_.random(3, 20)}
+			**Languages**            :: ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
+			**Challenge**            :: ${_.random(0, 15)} (${_.random(10, 10000)} XP)
 			___
 			:
 			${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n\t\t\t\n\t\t\t')}
--- a/client/homebrew/editor/snippetbar/snippets/snippets.js
+++ b/client/homebrew/editor/snippetbar/snippets/snippets.js
@@ -27,34 +27,46 @@ module.exports = [
 			},
 			{
 				name : 'Vertical Spacing',
-				icon : 'fas fa-times-circle',
-				gen  : ''
+				icon : 'fas fa-arrows-alt-v',
+				gen  : '\n::::\n'
+			},
+			{
+				name : 'Horizontal Spacing',
+				icon : 'fas fa-arrows-alt-h',
+				gen  : ' {{width:100px}} '
 			},
 			{
 				name : 'Wide Block',
-				icon : 'fas fa-times-circle',
-				gen  : ''
+				icon : 'fas fa-window-maximize',
+				gen  : dedent`\n
+					{{wide
+					Everything in here will be extra wide. Tables, text, everything!
+					Beware though, CSS columns can behave a bit weird sometimes. You may
+					have to rely on the automatic column-break rather than \`\column\` if
+					you mix columns and wide blocks on the same page.
+					}}
+					\n`
 			},
 			{
 				name : 'Image',
-				icon : 'fas fa-times-circle',
-				gen  : ''
+				icon : 'fas fa-image',
+				gen  : dedent`
+					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px}
+					Credit: Kyounghwan Kim`
 			},
 			{
 				name : 'Background Image',
 				icon : 'fas fa-tree',
-				gen  : `<img src='http://i.imgur.com/hMna6G0.png' ` +
-							`style='position:absolute; top:50px; right:30px; width:280px'/>`
+				gen  : `![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}`
 			},
 			{
 				name : 'QR Code',
 				icon : 'fas fa-qrcode',
 				gen  : (brew)=>{
-					return `<img ` +
-							`src='https://api.qrserver.com/v1/create-qr-code/?data=` +
+					return `![]` +
+							`(https://api.qrserver.com/v1/create-qr-code/?data=` +
 							`https://homebrewery.naturalcrit.com/share/${brew.shareId}` +
-							`&amp;size=100x100' ` +
-							`style='width:100px;mix-blend-mode:multiply'/>`;
+							`&amp;size=100x100) {width:100px;mix-blend-mode:multiply}`;
 				}

 			},
@@ -130,26 +142,28 @@ module.exports = [
 				name : 'Note',
 				icon : 'fas fa-sticky-note',
 				gen  : function(){
-					return [
-						'> ##### Time to Drop Knowledge',
-						'> Use notes to point out some interesting information. ',
-						'> ',
-						'> **Tables and lists** both work within a note.'
-					].join('\n');
+					return dedent`
+						{{note
+						##### Time to Drop Knowledge
+						Use notes to point out some interesting information.
+
+						**Tables and lists** both work within a note.
+						}}
+						\n`;
 				},
 			},
 			{
 				name : 'Descriptive Text Box',
 				icon : 'fas fa-comment-alt',
 				gen  : function(){
-					return [
-						'<div class=\'descriptive\'>',
-						'##### Time to Drop Knowledge',
-						'Use notes to point out some interesting information. ',
-						'',
-						'**Tables and lists** both work within a note.',
-						'</div>'
-					].join('\n');
+					return dedent`
+						{{descriptive
+						##### Time to Drop Knowledge
+						Use descriptive boxes to highlight text that should be read aloud.
+
+						**Tables and lists** both work within a descriptive box.
+						}}
+						\n`;
 				},
 			},
 			{
@@ -242,7 +256,7 @@ module.exports = [
 				gen  : function(){
 					return dedent`
 						##### Typical Difficulty Classes
-						{{column-count="2"
+						{{column-count:2
 						| Task Difficulty | DC |
 						|:----------------|:--:|
 						| Very easy       | 5  |
--- a/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
+++ b/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
@@ -1,4 +1,5 @@
 const _ = require('lodash');
+const dedent = require('dedent-tabs').default;

 const getTOC = (pages)=>{
 	const add1 = (title, page)=>{
@@ -9,7 +10,7 @@ const getTOC = (pages)=>{
 		});
 	};
 	const add2 = (title, page)=>{
-		if(!_.last(res)) add1('', page);
+		if(!_.last(res)) add1(null, page);
 		_.last(res).children.push({
 			title    : title,
 			page     : page + 1,
@@ -17,8 +18,8 @@ const getTOC = (pages)=>{
 		});
 	};
 	const add3 = (title, page)=>{
-		if(!_.last(res)) add1('', page);
-		if(!_.last(_.last(res).children)) add2('', page);
+		if(!_.last(res)) add1(null, page);
+		if(!_.last(_.last(res).children)) add2(null, page);
 		_.last(_.last(res).children).children.push({
 			title    : title,
 			page     : page + 1,
@@ -51,13 +52,21 @@ module.exports = function(brew){
 	const pages = brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
-		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);
+		if(g1.title !== null) {
+			r.push(`\t\t- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
+		}
 		if(g1.children.length){
 			_.each(g1.children, (g2, idx2)=>{
-				r.push(`  - [${idx1 + 1}.${idx2 + 1} ${g2.title}](#p${g2.page})`);
+				if(g2.title !== null) {
+					r.push(`\t\t  - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
+				}
 				if(g2.children.length){
 					_.each(g2.children, (g3, idx3)=>{
-						r.push(`    - [${idx1 + 1}.${idx2 + 1}.${idx3 + 1} ${g3.title}](#p${g3.page})`);
+						if(g2.title !== null) {
+							r.push(`\t\t    - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+						} else { // Don't over-indent if no level-2 parent entry
+							r.push(`\t\t  - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+						}
 					});
 				}
 			});
@@ -65,8 +74,11 @@ module.exports = function(brew){
 		return r;
 	}, []).join('\n');

-	return `<div class='toc'>
-##### Table Of Contents
+	return dedent`
+		{{toc,wide
+		# Table Of Contents
+
 ${markdown}
-</div>\n`;
+		}}
+		\n`;
 };
--- a/client/homebrew/homebrew.jsx
+++ b/client/homebrew/homebrew.jsx
@@ -44,12 +44,12 @@ const Homebrew = createClass({
 						<Route path='/edit/:id' component={(routeProps)=><EditPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/share/:id' component={(routeProps)=><SharePage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/new/:id' component={(routeProps)=><NewPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
-						<Route path='/new' exact component={(routeProps)=><NewPage/>}/>
+						<Route path='/new' exact component={(routeProps)=><NewPage />}/>
 						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} />}/>
-						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} /> } />
-						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} /> } />
-						<Route path='/changelog' exact component={()=><SharePage brew={{ title: 'Changelog', text: this.props.changelog }} />}/>
-						<Route path='/' component={()=><HomePage welcomeText={this.props.welcomeText}/>}/>
+						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} />}/>
+						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} />}/>
+						<Route path='/changelog' exact component={()=><SharePage brew={this.props.brew} />}/>
+						<Route path='/' component={()=><HomePage brew={this.props.brew} />}/>
 					</Switch>
 				</div>
 			</Router>
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -23,19 +23,15 @@ const HomePage = createClass({
 	getDefaultProps : function() {
 		return {
 			brew : {
-				text : ''
+				text : '',
 			},
-			welcomeText : '',
-			ver         : '0.0.0'
+			ver : '0.0.0'
 		};
-
-
 	},
 	getInitialState : function() {
 		return {
-			brew : {
-				text : this.props.welcomeText
-			}
+			brew        : this.props.brew,
+			welcomeText : this.props.brew.text
 		};
 	},
 	handleSave : function(){
@@ -89,7 +85,7 @@ const HomePage = createClass({
 				</SplitPane>
 			</div>

-			<div className={cx('floatingSaveButton', { show: this.props.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
+			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
 				Save current <i className='fas fa-save' />
 			</div>

--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -26,6 +26,7 @@ const NewPage = createClass({
 		return {
 			brew : {
 				text      : '',
+				style     : undefined,
 				shareId   : null,
 				editId    : null,
 				createdAt : null,
@@ -46,6 +47,7 @@ const NewPage = createClass({
 		return {
 			brew : {
 				text        : this.props.brew.text || '',
+				style       : this.props.brew.style || undefined,
 				gDrive      : false,
 				title       : this.props.brew.title || '',
 				description : this.props.brew.description || '',
@@ -67,16 +69,15 @@ const NewPage = createClass({
 		const brewStorage  = localStorage.getItem(BREWKEY);
 		const styleStorage = localStorage.getItem(STYLEKEY);

+		const brew = this.state.brew;
+
 		if(!this.props.brew.text || !this.props.brew.style){
-			this.setState({
-				brew : {
-					text  : this.props.brew.text  || (brewStorage  ?? ''),
-					style : this.props.brew.style || (styleStorage ?? undefined)
-				}
-			});
+			brew.text = this.props.brew.text  || (brewStorage  ?? '');
+			brew.style = this.props.brew.style || (styleStorage ?? undefined);
 		}

 		this.setState((prevState)=>({
+			brew       : brew,
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));

--- a/client/homebrew/pages/printPage/printPage.jsx
+++ b/client/homebrew/pages/printPage/printPage.jsx
@@ -59,6 +59,7 @@ const PrintPage = createClass({
 	render : function(){
 		return <div>
 			<Meta name='robots' content='noindex, nofollow' />
+			<link href={`${this.props.brew.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
 			{/* Apply CSS from Style tab */}
 			<div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.brew.style} </style>` }} />
 			{this.renderPages()}
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -88,13 +88,15 @@ const SharePage = createClass({
 				</Nav.section>

 				<Nav.section>
-					<PrintLink shareId={this.processShareId()} />
-					<Nav.item icon='fas fa-code' color='red' className='source'
-						onMouseEnter={()=>this.handleDropdown(true)}
-						onMouseLeave={()=>this.handleDropdown(false)}>
-						source
-						{this.renderDropdown()}
-					</Nav.item>
+					{this.props.brew.shareId && <>
+						<PrintLink shareId={this.processShareId()} />
+						<Nav.item icon='fas fa-code' color='red' className='source'
+							onMouseEnter={()=>this.handleDropdown(true)}
+							onMouseLeave={()=>this.handleDropdown(false)}>
+							source
+							{this.renderDropdown()}
+						</Nav.item>
+					</>}
 					<RecentNavItem brew={this.props.brew} storageKey='view' />
 					<Account />
 				</Nav.section>
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -24,7 +24,13 @@ const UserPage = createClass({
 	getDefaultProps : function() {
 		return {
 			username : '',
-			brews    : []
+			brews    : [],
+		};
+	},
+	getInitialState : function() {
+		return {
+			sortType : 'alpha',
+			sortDir  : 'asc'
 		};
 	},
 	getUsernameWithS : function() {
@@ -36,13 +42,82 @@ const UserPage = createClass({
 	renderBrews : function(brews){
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;

-		const sortedBrews = _.sortBy(brews, (brew)=>{ return brew.title; });
+		const sortedBrews = this.sortBrews(brews, this.state.sortType);

 		return _.map(sortedBrews, (brew, idx)=>{
 			return <BrewItem brew={brew} key={idx}/>;
 		});
 	},

+	sortBrewOrder : function(brew){
+		const mapping = {
+			'alpha'   : _.deburr(brew.title.toLowerCase()),
+			'created' : brew.createdAt,
+			'updated' : brew.updatedAt,
+			'views'   : brew.views,
+			'latest'  : brew.lastViewed
+		};
+		return mapping[this.state.sortType];
+	},
+
+	sortBrews : function(brews){
+		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
+	},
+
+	handleSortOptionChange : function(event){
+		this.setState({
+			sortType : event.target.value
+		});
+	},
+
+	handleSortDirChange : function(event){
+		this.setState({
+			sortDir : `${(this.state.sortDir == 'asc' ? 'desc' : 'asc')}`
+		});
+	},
+
+	renderSortOption : function(sortTitle, sortValue){
+		return <td>
+				  <button
+					  value={`${sortValue}`}
+					  onClick={this.handleSortOptionChange}
+					  className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
+				  >
+  					{`${sortTitle}`}
+		 		  </button>
+		  </td>;
+	},
+
+	renderSortOptions : function(){
+		return <div className='sort-container'>
+			<table>
+				<tbody>
+					<tr>
+						<td>
+							<h6>Sort by :</h6>
+						</td>
+						{this.renderSortOption('Title', 'alpha')}
+						{this.renderSortOption('Created Date', 'created')}
+						{this.renderSortOption('Updated Date', 'updated')}
+						{this.renderSortOption('Views', 'views')}
+						{/* {this.renderSortOption('Latest', 'latest')} */}
+				    	<td>
+							<h6>Direction :</h6>
+						</td>
+						<td>
+							<button
+								onClick={this.handleSortDirChange}
+								className='sortDir'
+							>
+								{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
+							</button>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>;
+	},
+
 	getSortedBrews : function(){
 		return _.groupBy(this.props.brews, (brew)=>{
 			return (brew.published ? 'published' : 'private');
@@ -53,6 +128,7 @@ const UserPage = createClass({
 		const brews = this.getSortedBrews();

 		return <div className='userPage sitePage'>
+			<link href='/themes/5ePhbLegacy.style.css' rel='stylesheet'/>
 			<Navbar>
 				<Nav.section>
 					<NewBrew />
@@ -63,6 +139,7 @@ const UserPage = createClass({

 			<div className='content V3'>
 				<div className='phb'>
+					{this.renderSortOptions()}
 					<div>
 						<h1>{this.getUsernameWithS()} brews</h1>
 						{this.renderBrews(brews.published)}
--- a/client/homebrew/pages/userPage/userPage.less
+++ b/client/homebrew/pages/userPage/userPage.less
@@ -30,4 +30,44 @@

 		}
 	}
+	.sort-container{
+		font-family        : 'Open Sans', sans-serif;
+		position           : fixed;
+		top                : 35px;
+		border             : 2px solid #58180D;
+		width              : 675px;
+		background-color   : #EEE5CE;
+		padding            : 2px;
+		text-align         : center;
+		z-index            : 15;
+		h6{
+			text-transform : uppercase;
+			font-family    : 'Open Sans', sans-serif;
+			font-size      : 11px;
+			font-weight    : bold;
+			color          : #58180D;
+		}
+		table{
+			margin : 0px;
+			vertical-align : middle;
+			tbody tr{
+				background-color: transparent !important;
+			button{
+					background-color : transparent;
+					color            : #58180D;
+					font-family    : 'Open Sans', sans-serif;
+					font-size      : 11px;
+					text-transform : uppercase;
+					font-weight      : normal;
+					&.active{
+						font-weight : bold;
+						border      : 2px solid #58180D;
+					}
+					&.sortDir{
+						width : 75px;
+					}
+				}
+			}
+		}
+	}
 }
--- a/client/homebrew/phbStyle/border.png
+++ b/client/homebrew/phbStyle/border.png
--- a/client/homebrew/phbStyle/note_border.png
+++ b/client/homebrew/phbStyle/note_border.png
--- a/client/homebrew/phbStyle/phb.assets.less
+++ b/client/homebrew/phbStyle/phb.assets.less
@@ -1,9 +0,0 @@
-@footerAccentImage        : data-uri('./client/homebrew/phbStyle/images/footerAccent.png');
-@frameBorderImage         : data-uri('./client/homebrew/phbStyle/images/frameBorder.png');
-@backgroundImage          : data-uri('./client/homebrew/phbStyle/images/parchmentBackground.jpg');
-@redTriangleImage         : data-uri('./client/homebrew/phbStyle/images/redTriangle.png');
-@monsterBorderImageLegacy : data-uri('./client/homebrew/phbStyle/images/monsterBorderLegacy.png');
-@noteBorderImage          : data-uri('./client/homebrew/phbStyle/images/noteBorder.png');
-@descriptiveBoxImage      : data-uri('./client/homebrew/phbStyle/images/descriptiveBorder.png');
-@monsterBlockBackground   : data-uri('./client/homebrew/phbStyle/images/parchmentBackgroundGrayscale.jpg');
-@monsterBorderImage       : data-uri('./client/homebrew/phbStyle/images/monsterBorderFancy.png');
--- a/client/homebrew/phbStyle/red.png
+++ b/client/homebrew/phbStyle/red.png
--- a/client/template.js
+++ b/client/template.js
@@ -5,15 +5,15 @@ module.exports = async(name, title = '', props = {})=>{
 	<head>
 		<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
 		<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-		<link href=${`/${name}/bundle.css`} rel='stylesheet'></link>
+		<link href=${`/${name}/bundle.css`} rel='stylesheet' />
 		<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
 		<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
 	</head>
 	<body>
 		<main id="reactRoot">${require(`../build/${name}/ssr.js`)(props)}</main>
+		<script src=${`/${name}/bundle.js`}></script>
+		<script>start_app(${JSON.stringify(props)})</script>
 	</body>
-	<script src=${`/${name}/bundle.js`}></script>
-	<script>start_app(${JSON.stringify(props)})</script>
 </html>
 `;
 };
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,13 +9,13 @@
      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/core": "^7.14.6",
+        "@babel/core": "^7.14.8",
        "@babel/plugin-transform-runtime": "^7.14.5",
-        "@babel/preset-env": "^7.14.7",
+        "@babel/preset-env": "^7.14.8",
        "@babel/preset-react": "^7.14.5",
        "body-parser": "^1.19.0",
        "classnames": "^2.3.1",
-        "codemirror": "^5.62.0",
+        "codemirror": "^5.62.2",
        "cookie-parser": "^1.4.5",
        "create-react-class": "^15.7.0",
        "dedent-tabs": "^0.9.0",
@@ -23,14 +23,14 @@
        "express-async-handler": "^1.1.4",
        "express-static-gzip": "2.1.1",
        "fs-extra": "10.0.0",
-        "googleapis": "79.0.0",
+        "googleapis": "82.0.0",
        "jwt-simple": "^0.5.6",
        "less": "^3.13.1",
        "lodash": "^4.17.21",
        "marked": "2.1.3",
        "markedLegacy": "npm:marked@^0.3.19",
        "moment": "^2.29.1",
-        "mongoose": "^5.13.0",
+        "mongoose": "^5.13.4",
        "nanoid": "3.1.23",
        "nconf": "^0.11.3",
        "prop-types": "15.7.2",
@@ -44,7 +44,7 @@
        "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
      },
      "devDependencies": {
-        "eslint": "^7.29.0",
+        "eslint": "^7.31.0",
        "eslint-plugin-react": "^7.24.0",
        "pico-check": "^2.1.3"
      },
@@ -72,19 +72,19 @@
      }
    },
    "node_modules/@babel/core": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
-      "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.8.tgz",
+      "integrity": "sha512-/AtaeEhT6ErpDhInbXmjHcUQXH0L0TEgscfcxk1qbOvLuKCa5aZT0SOOtDKFY96/CLROwbLSKyFor6idgNaU4Q==",
      "dependencies": {
        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
+        "@babel/generator": "^7.14.8",
        "@babel/helper-compilation-targets": "^7.14.5",
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helpers": "^7.14.6",
-        "@babel/parser": "^7.14.6",
+        "@babel/helper-module-transforms": "^7.14.8",
+        "@babel/helpers": "^7.14.8",
+        "@babel/parser": "^7.14.8",
        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5",
+        "@babel/traverse": "^7.14.8",
+        "@babel/types": "^7.14.8",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
        "gensync": "^1.0.0-beta.2",
@@ -146,11 +146,11 @@
      }
    },
    "node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.8.tgz",
+      "integrity": "sha512-cYDUpvIzhBVnMzRoY1fkSEhK/HmwEVwlyULYgn/tMQYd6Obag3ylCjONle3gdErfXBW61SVTlR9QR7uWlgeIkg==",
      "dependencies": {
-        "@babel/types": "^7.14.5",
+        "@babel/types": "^7.14.8",
        "jsesc": "^2.5.1",
        "source-map": "^0.5.0"
      },
@@ -356,18 +356,18 @@
      }
    },
    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.8.tgz",
+      "integrity": "sha512-RyE+NFOjXn5A9YU1dkpeBaduagTlZ0+fccnIcAGbv1KGUlReBj7utF7oEth8IdIBQPcux0DDgW5MFBH2xu9KcA==",
      "dependencies": {
        "@babel/helper-module-imports": "^7.14.5",
        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
+        "@babel/helper-simple-access": "^7.14.8",
        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.8",
        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/traverse": "^7.14.8",
+        "@babel/types": "^7.14.8"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -420,11 +420,11 @@
      }
    },
    "node_modules/@babel/helper-simple-access": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz",
+      "integrity": "sha512-TrFN4RHh9gnWEU+s7JloIho2T76GPwRHhdzOWLqTrMnlas8T9O7ec+oEDNsRXndOmru9ymH9DFrEOxpzPoSbdg==",
      "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.14.8"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -453,9 +453,9 @@
      }
    },
    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz",
+      "integrity": "sha512-ZGy6/XQjllhYQrNw/3zfWRwZCTVSiBLZ9DHVZxn9n2gip/7ab8mv2TWlKPIBk26RwedCBoWdjLmn+t9na2Gcow==",
      "engines": {
        "node": ">=6.9.0"
      }
@@ -483,13 +483,13 @@
      }
    },
    "node_modules/@babel/helpers": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
-      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.8.tgz",
+      "integrity": "sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==",
      "dependencies": {
        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/traverse": "^7.14.8",
+        "@babel/types": "^7.14.8"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -538,9 +538,9 @@
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
    },
    "node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.8.tgz",
+      "integrity": "sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA==",
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@@ -1595,9 +1595,9 @@
      }
    },
    "node_modules/@babel/preset-env": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.14.7.tgz",
-      "integrity": "sha512-itOGqCKLsSUl0Y+1nSfhbuuOlTs0MJk2Iv7iSH+XT/mR8U1zRLO7NjWlYXB47yhK4J/7j+HYty/EhFZDYKa/VA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.14.8.tgz",
+      "integrity": "sha512-a9aOppDU93oArQ51H+B8M1vH+tayZbuBqzjOhntGetZVa+4tTu5jp+XTwqHGG2lxslqomPYVSjIxQkFwXzgnxg==",
      "dependencies": {
        "@babel/compat-data": "^7.14.7",
        "@babel/helper-compilation-targets": "^7.14.5",
@@ -1666,7 +1666,7 @@
        "@babel/plugin-transform-unicode-escapes": "^7.14.5",
        "@babel/plugin-transform-unicode-regex": "^7.14.5",
        "@babel/preset-modules": "^0.1.4",
-        "@babel/types": "^7.14.5",
+        "@babel/types": "^7.14.8",
        "babel-plugin-polyfill-corejs2": "^0.2.2",
        "babel-plugin-polyfill-corejs3": "^0.2.2",
        "babel-plugin-polyfill-regenerator": "^0.2.2",
@@ -1746,17 +1746,17 @@
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.8.tgz",
+      "integrity": "sha512-kexHhzCljJcFNn1KYAQ6A5wxMRzq9ebYpEDV4+WdNyr3i7O44tanbDOR/xjiG2F3sllan+LgwK+7OMk0EmydHg==",
      "dependencies": {
        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
+        "@babel/generator": "^7.14.8",
        "@babel/helper-function-name": "^7.14.5",
        "@babel/helper-hoist-variables": "^7.14.5",
        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
+        "@babel/parser": "^7.14.8",
+        "@babel/types": "^7.14.8",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      },
@@ -1789,11 +1789,11 @@
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
    "node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.8.tgz",
+      "integrity": "sha512-iob4soQa7dZw8nodR/KlOQkPh9S4I8RwCxwRIFuiMRYjOzH/KJzdUfDgz6cGi5dDaclXF4P2PAhCdrBJNIg68Q==",
      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.8",
        "to-fast-properties": "^2.0.0"
      },
      "engines": {
@@ -1801,9 +1801,9 @@
      }
    },
    "node_modules/@eslint/eslintrc": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
-      "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
+      "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==",
      "dev": true,
      "dependencies": {
        "ajv": "^6.12.4",
@@ -1821,9 +1821,9 @@
      }
    },
    "node_modules/@eslint/eslintrc/node_modules/debug": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
      "dev": true,
      "dependencies": {
        "ms": "2.1.2"
@@ -1855,6 +1855,49 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
+      "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.0",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz",
+      "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
+      "dev": true
+    },
    "node_modules/@sindresorhus/is": {
      "version": "0.14.0",
      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -1960,9 +2003,9 @@
      }
    },
    "node_modules/acorn-jsx": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
-      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
      "dev": true,
      "peerDependencies": {
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -3138,9 +3181,9 @@
      }
    },
    "node_modules/codemirror": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz",
-      "integrity": "sha512-Xnl3304iCc8nyVZuRkzDVVwc794uc9QNX0UcPGeNic1fbzkSrO4l4GVXho9tRNKBgPYZXgocUqXyfIv3BILhCQ=="
+      "version": "5.62.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.2.tgz",
+      "integrity": "sha512-tVFMUa4J3Q8JUd1KL9yQzQB0/BJt7ZYZujZmTPgo/54Lpuq3ez4C8x/ATUY/wv7b7X3AUq8o3Xd+2C5ZrCGWHw=="
    },
    "node_modules/collection-visit": {
      "version": "1.0.0",
@@ -3811,13 +3854,14 @@
      }
    },
    "node_modules/eslint": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.29.0.tgz",
-      "integrity": "sha512-82G/JToB9qIy/ArBzIWG9xvvwL3R86AlCjtGw+A29OMZDqhTybz/MByORSukGxeI+YPCR4coYyITKk8BFH9nDA==",
+      "version": "7.31.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.31.0.tgz",
+      "integrity": "sha512-vafgJpSh2ia8tnTkNUkwxGmnumgckLh5aAbLa1xRmIn9+owi8qBNGKL+B881kNKNTy7FFqTEkpNkUvmw0n6PkA==",
      "dev": true,
      "dependencies": {
        "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.2",
+        "@eslint/eslintrc": "^0.4.3",
+        "@humanwhocodes/config-array": "^0.5.0",
        "ajv": "^6.10.0",
        "chalk": "^4.0.0",
        "cross-spawn": "^7.0.2",
@@ -4732,9 +4776,9 @@
      }
    },
    "node_modules/globals": {
-      "version": "13.9.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
-      "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+      "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
      "dev": true,
      "dependencies": {
        "type-fest": "^0.20.2"
@@ -4753,6 +4797,9 @@
      "dev": true,
      "engines": {
        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/google-auth-library": {
@@ -4789,9 +4836,9 @@
      }
    },
    "node_modules/googleapis": {
-      "version": "79.0.0",
-      "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-79.0.0.tgz",
-      "integrity": "sha512-yHY0fmcuSQyU3zYUort/gOENCkrEpVLN4ziWdXvSIRG4n1BS9A8ajwzgDKsf68FYpzYRjtMzeh11IKN45cwbOQ==",
+      "version": "82.0.0",
+      "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-82.0.0.tgz",
+      "integrity": "sha512-TytL2h+Cl82RP8ZZ4hgiqOz/ZKWJ5nqn2ZaQ1bNIsIp6z4xuasXyJsgPaZzHADyRx/zNQfRfJGwzRInYJy7X4A==",
      "dependencies": {
        "google-auth-library": "^7.0.2",
        "googleapis-common": "^5.0.2"
@@ -6291,9 +6338,9 @@
      }
    },
    "node_modules/mongodb": {
-      "version": "3.6.8",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.8.tgz",
-      "integrity": "sha512-sDjJvI73WjON1vapcbyBD3Ao9/VN3TKYY8/QX9EPbs22KaCSrQ5rXo5ZZd44tWJ3wl3FlnrFZ+KyUtNH6+1ZPQ==",
+      "version": "3.6.10",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.10.tgz",
+      "integrity": "sha512-fvIBQBF7KwCJnDZUnFFy4WqEFP8ibdXeFANnylW19+vOwdjOAvqIzPdsNCEMT6VKTHnYu4K64AWRih0mkFms6Q==",
      "dependencies": {
        "bl": "^2.2.1",
        "bson": "^1.1.4",
@@ -6306,21 +6353,43 @@
      },
      "optionalDependencies": {
        "saslprep": "^1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "aws4": {
+          "optional": true
+        },
+        "bson-ext": {
+          "optional": true
+        },
+        "kerberos": {
+          "optional": true
+        },
+        "mongodb-client-encryption": {
+          "optional": true
+        },
+        "mongodb-extjson": {
+          "optional": true
+        },
+        "snappy": {
+          "optional": true
+        }
      }
    },
    "node_modules/mongoose": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.13.0.tgz",
-      "integrity": "sha512-8dvu7vxmDzlupj4I9T0g33GPf4HzSZmIOKQfG9RJQ5Nxk/Ztx1b8zlYp+blvaCfWwtBpiAJuKYOBU17Wq1RVFQ==",
+      "version": "5.13.4",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.13.4.tgz",
+      "integrity": "sha512-D1yVHAOa+G8iQZsC/nNzZe+CI1FCYu6Qk384s1vSyaSfKCu/alKeyL78BA73SsxeRKT9zmswSIueLbGBURjrKg==",
      "dependencies": {
        "@types/mongodb": "^3.5.27",
+        "@types/node": "14.x || 15.x",
        "bson": "^1.1.4",
        "kareem": "2.3.2",
-        "mongodb": "3.6.8",
+        "mongodb": "3.6.10",
        "mongoose-legacy-pluralize": "1.0.2",
        "mpath": "0.8.3",
        "mquery": "3.2.5",
        "ms": "2.1.2",
+        "optional-require": "1.0.x",
        "regexp-clone": "1.0.0",
        "safe-buffer": "5.2.1",
        "sift": "13.5.2",
@@ -9516,19 +9585,19 @@
      "integrity": "sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw=="
    },
    "@babel/core": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
-      "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.8.tgz",
+      "integrity": "sha512-/AtaeEhT6ErpDhInbXmjHcUQXH0L0TEgscfcxk1qbOvLuKCa5aZT0SOOtDKFY96/CLROwbLSKyFor6idgNaU4Q==",
      "requires": {
        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
+        "@babel/generator": "^7.14.8",
        "@babel/helper-compilation-targets": "^7.14.5",
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helpers": "^7.14.6",
-        "@babel/parser": "^7.14.6",
+        "@babel/helper-module-transforms": "^7.14.8",
+        "@babel/helpers": "^7.14.8",
+        "@babel/parser": "^7.14.8",
        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5",
+        "@babel/traverse": "^7.14.8",
+        "@babel/types": "^7.14.8",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
        "gensync": "^1.0.0-beta.2",
@@ -9571,11 +9640,11 @@
      }
    },
    "@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.8.tgz",
+      "integrity": "sha512-cYDUpvIzhBVnMzRoY1fkSEhK/HmwEVwlyULYgn/tMQYd6Obag3ylCjONle3gdErfXBW61SVTlR9QR7uWlgeIkg==",
      "requires": {
-        "@babel/types": "^7.14.5",
+        "@babel/types": "^7.14.8",
        "jsesc": "^2.5.1",
        "source-map": "^0.5.0"
      },
@@ -9730,18 +9799,18 @@
      }
    },
    "@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.8.tgz",
+      "integrity": "sha512-RyE+NFOjXn5A9YU1dkpeBaduagTlZ0+fccnIcAGbv1KGUlReBj7utF7oEth8IdIBQPcux0DDgW5MFBH2xu9KcA==",
      "requires": {
        "@babel/helper-module-imports": "^7.14.5",
        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
+        "@babel/helper-simple-access": "^7.14.8",
        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.8",
        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/traverse": "^7.14.8",
+        "@babel/types": "^7.14.8"
      }
    },
    "@babel/helper-optimise-call-expression": {
@@ -9779,11 +9848,11 @@
      }
    },
    "@babel/helper-simple-access": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz",
+      "integrity": "sha512-TrFN4RHh9gnWEU+s7JloIho2T76GPwRHhdzOWLqTrMnlas8T9O7ec+oEDNsRXndOmru9ymH9DFrEOxpzPoSbdg==",
      "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.14.8"
      }
    },
    "@babel/helper-skip-transparent-expression-wrappers": {
@@ -9803,9 +9872,9 @@
      }
    },
    "@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz",
+      "integrity": "sha512-ZGy6/XQjllhYQrNw/3zfWRwZCTVSiBLZ9DHVZxn9n2gip/7ab8mv2TWlKPIBk26RwedCBoWdjLmn+t9na2Gcow=="
    },
    "@babel/helper-validator-option": {
      "version": "7.14.5",
@@ -9824,13 +9893,13 @@
      }
    },
    "@babel/helpers": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
-      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.8.tgz",
+      "integrity": "sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==",
      "requires": {
        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/traverse": "^7.14.8",
+        "@babel/types": "^7.14.8"
      }
    },
    "@babel/highlight": {
@@ -9869,9 +9938,9 @@
      }
    },
    "@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA=="
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.8.tgz",
+      "integrity": "sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA=="
    },
    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
      "version": "7.14.5",
@@ -10546,9 +10615,9 @@
      }
    },
    "@babel/preset-env": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.14.7.tgz",
-      "integrity": "sha512-itOGqCKLsSUl0Y+1nSfhbuuOlTs0MJk2Iv7iSH+XT/mR8U1zRLO7NjWlYXB47yhK4J/7j+HYty/EhFZDYKa/VA==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.14.8.tgz",
+      "integrity": "sha512-a9aOppDU93oArQ51H+B8M1vH+tayZbuBqzjOhntGetZVa+4tTu5jp+XTwqHGG2lxslqomPYVSjIxQkFwXzgnxg==",
      "requires": {
        "@babel/compat-data": "^7.14.7",
        "@babel/helper-compilation-targets": "^7.14.5",
@@ -10617,7 +10686,7 @@
        "@babel/plugin-transform-unicode-escapes": "^7.14.5",
        "@babel/plugin-transform-unicode-regex": "^7.14.5",
        "@babel/preset-modules": "^0.1.4",
-        "@babel/types": "^7.14.5",
+        "@babel/types": "^7.14.8",
        "babel-plugin-polyfill-corejs2": "^0.2.2",
        "babel-plugin-polyfill-corejs3": "^0.2.2",
        "babel-plugin-polyfill-regenerator": "^0.2.2",
@@ -10683,17 +10752,17 @@
      }
    },
    "@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.8.tgz",
+      "integrity": "sha512-kexHhzCljJcFNn1KYAQ6A5wxMRzq9ebYpEDV4+WdNyr3i7O44tanbDOR/xjiG2F3sllan+LgwK+7OMk0EmydHg==",
      "requires": {
        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
+        "@babel/generator": "^7.14.8",
        "@babel/helper-function-name": "^7.14.5",
        "@babel/helper-hoist-variables": "^7.14.5",
        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
+        "@babel/parser": "^7.14.8",
+        "@babel/types": "^7.14.8",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      },
@@ -10719,18 +10788,18 @@
      }
    },
    "@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "version": "7.14.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.8.tgz",
+      "integrity": "sha512-iob4soQa7dZw8nodR/KlOQkPh9S4I8RwCxwRIFuiMRYjOzH/KJzdUfDgz6cGi5dDaclXF4P2PAhCdrBJNIg68Q==",
      "requires": {
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.8",
        "to-fast-properties": "^2.0.0"
      }
    },
    "@eslint/eslintrc": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
-      "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
+      "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==",
      "dev": true,
      "requires": {
        "ajv": "^6.12.4",
@@ -10745,9 +10814,9 @@
      },
      "dependencies": {
        "debug": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
          "dev": true,
          "requires": {
            "ms": "2.1.2"
@@ -10767,6 +10836,40 @@
        }
      }
    },
+    "@humanwhocodes/config-array": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
+      "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.0",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz",
+      "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
+      "dev": true
+    },
    "@sindresorhus/is": {
      "version": "0.14.0",
      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -10850,9 +10953,9 @@
      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
    },
    "acorn-jsx": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
-      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
      "dev": true,
      "requires": {}
    },
@@ -11836,9 +11939,9 @@
      }
    },
    "codemirror": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz",
-      "integrity": "sha512-Xnl3304iCc8nyVZuRkzDVVwc794uc9QNX0UcPGeNic1fbzkSrO4l4GVXho9tRNKBgPYZXgocUqXyfIv3BILhCQ=="
+      "version": "5.62.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.2.tgz",
+      "integrity": "sha512-tVFMUa4J3Q8JUd1KL9yQzQB0/BJt7ZYZujZmTPgo/54Lpuq3ez4C8x/ATUY/wv7b7X3AUq8o3Xd+2C5ZrCGWHw=="
    },
    "collection-visit": {
      "version": "1.0.0",
@@ -12405,13 +12508,14 @@
      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
    "eslint": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.29.0.tgz",
-      "integrity": "sha512-82G/JToB9qIy/ArBzIWG9xvvwL3R86AlCjtGw+A29OMZDqhTybz/MByORSukGxeI+YPCR4coYyITKk8BFH9nDA==",
+      "version": "7.31.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.31.0.tgz",
+      "integrity": "sha512-vafgJpSh2ia8tnTkNUkwxGmnumgckLh5aAbLa1xRmIn9+owi8qBNGKL+B881kNKNTy7FFqTEkpNkUvmw0n6PkA==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.2",
+        "@eslint/eslintrc": "^0.4.3",
+        "@humanwhocodes/config-array": "^0.5.0",
        "ajv": "^6.10.0",
        "chalk": "^4.0.0",
        "cross-spawn": "^7.0.2",
@@ -13133,9 +13237,9 @@
      }
    },
    "globals": {
-      "version": "13.9.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
-      "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+      "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
      "dev": true,
      "requires": {
        "type-fest": "^0.20.2"
@@ -13174,9 +13278,9 @@
      }
    },
    "googleapis": {
-      "version": "79.0.0",
-      "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-79.0.0.tgz",
-      "integrity": "sha512-yHY0fmcuSQyU3zYUort/gOENCkrEpVLN4ziWdXvSIRG4n1BS9A8ajwzgDKsf68FYpzYRjtMzeh11IKN45cwbOQ==",
+      "version": "82.0.0",
+      "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-82.0.0.tgz",
+      "integrity": "sha512-TytL2h+Cl82RP8ZZ4hgiqOz/ZKWJ5nqn2ZaQ1bNIsIp6z4xuasXyJsgPaZzHADyRx/zNQfRfJGwzRInYJy7X4A==",
      "requires": {
        "google-auth-library": "^7.0.2",
        "googleapis-common": "^5.0.2"
@@ -14339,9 +14443,9 @@
      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
    },
    "mongodb": {
-      "version": "3.6.8",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.8.tgz",
-      "integrity": "sha512-sDjJvI73WjON1vapcbyBD3Ao9/VN3TKYY8/QX9EPbs22KaCSrQ5rXo5ZZd44tWJ3wl3FlnrFZ+KyUtNH6+1ZPQ==",
+      "version": "3.6.10",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.10.tgz",
+      "integrity": "sha512-fvIBQBF7KwCJnDZUnFFy4WqEFP8ibdXeFANnylW19+vOwdjOAvqIzPdsNCEMT6VKTHnYu4K64AWRih0mkFms6Q==",
      "requires": {
        "bl": "^2.2.1",
        "bson": "^1.1.4",
@@ -14352,18 +14456,20 @@
      }
    },
    "mongoose": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.13.0.tgz",
-      "integrity": "sha512-8dvu7vxmDzlupj4I9T0g33GPf4HzSZmIOKQfG9RJQ5Nxk/Ztx1b8zlYp+blvaCfWwtBpiAJuKYOBU17Wq1RVFQ==",
+      "version": "5.13.4",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.13.4.tgz",
+      "integrity": "sha512-D1yVHAOa+G8iQZsC/nNzZe+CI1FCYu6Qk384s1vSyaSfKCu/alKeyL78BA73SsxeRKT9zmswSIueLbGBURjrKg==",
      "requires": {
        "@types/mongodb": "^3.5.27",
+        "@types/node": "14.x || 15.x",
        "bson": "^1.1.4",
        "kareem": "2.3.2",
-        "mongodb": "3.6.8",
+        "mongodb": "3.6.10",
        "mongoose-legacy-pluralize": "1.0.2",
        "mpath": "0.8.3",
        "mquery": "3.2.5",
        "ms": "2.1.2",
+        "optional-require": "1.0.x",
        "regexp-clone": "1.0.0",
        "safe-buffer": "5.2.1",
        "sift": "13.5.2",
--- a/package.json
+++ b/package.json
@@ -40,13 +40,13 @@
    ]
  },
  "dependencies": {
-    "@babel/core": "^7.14.6",
+    "@babel/core": "^7.14.8",
    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-env": "^7.14.8",
    "@babel/preset-react": "^7.14.5",
    "body-parser": "^1.19.0",
    "classnames": "^2.3.1",
-    "codemirror": "^5.62.0",
+    "codemirror": "^5.62.2",
    "cookie-parser": "^1.4.5",
    "create-react-class": "^15.7.0",
    "dedent-tabs": "^0.9.0",
@@ -54,14 +54,14 @@
    "express-async-handler": "^1.1.4",
    "express-static-gzip": "2.1.1",
    "fs-extra": "10.0.0",
-    "googleapis": "79.0.0",
+    "googleapis": "82.0.0",
    "jwt-simple": "^0.5.6",
    "less": "^3.13.1",
    "lodash": "^4.17.21",
    "marked": "2.1.3",
    "markedLegacy": "npm:marked@^0.3.19",
    "moment": "^2.29.1",
-    "mongoose": "^5.13.0",
+    "mongoose": "^5.13.4",
    "nanoid": "3.1.23",
    "nconf": "^0.11.3",
    "prop-types": "15.7.2",
@@ -75,7 +75,7 @@
    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
  },
  "devDependencies": {
-    "eslint": "^7.29.0",
+    "eslint": "^7.31.0",
    "eslint-plugin-react": "^7.24.0",
    "pico-check": "^2.1.3"
  }
--- a/scripts/buildHomebrew.js
+++ b/scripts/buildHomebrew.js
@@ -8,6 +8,7 @@ const isDev = !!process.argv.find((arg)=>arg=='--dev');
 const lessTransform  = require('vitreum/transforms/less.js');
 const assetTransform = require('vitreum/transforms/asset.js');
 const babel          = require('@babel/core');
+const less           = require('less');

 const babelify = async (code)=>(await babel.transformAsync(code, { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code;

@@ -23,7 +24,27 @@ const build = async ({ bundle, render, ssr })=>{
 	await fs.outputFile('./build/homebrew/bundle.css', css);
 	await fs.outputFile('./build/homebrew/bundle.js', bundle);
 	await fs.outputFile('./build/homebrew/ssr.js', ssr);
-	await fs.copy('./client/homebrew/phbStyle/fonts', './build/fonts');
+	await fs.copy('./themes/fonts', './build/fonts');
+	let src = './themes/5ePhbLegacy.style.less';
+	//Parse brew theme files
+	less.render(fs.readFileSync(src).toString(), {
+		compress : !isDev
+	}, function(e, output) {
+		fs.outputFile('./build/themes/5ePhbLegacy.style.css', output.css);
+	});
+	src = './themes/5ePhb.style.less';
+	less.render(fs.readFileSync(src).toString(), {
+		compress : !isDev
+	}, function(e, output) {
+		fs.outputFile('./build/themes/5ePhb.style.css', output.css);
+	});
+	// await less.render(lessCode, {
+	// 	compress  : !dev,
+	// 	sourceMap : (dev ? {
+	// 		sourceMapFileInline: true,
+	// 		outputSourceFiles: true
+	// 	} : false),
+	// })

 	//compress files in production
 	if(!isDev){
@@ -37,7 +58,7 @@ const build = async ({ bundle, render, ssr })=>{
 	}
 };

-fs.emptyDirSync('./build/homebrew');
+fs.emptyDirSync('./build');
 pack('./client/homebrew/homebrew.jsx', {
 	paths : ['./shared'],
 	libs  : Proj.libs,
--- a/server.js
+++ b/server.js
@@ -105,6 +105,25 @@ app.get('/robots.txt', (req, res)=>{
 	return res.sendFile(`${__dirname}/robots.txt`);
 });

+//Home page
+app.get('/', async (req, res, next)=>{
+	const brew = {
+		text : welcomeText
+	};
+	req.brew = brew;
+	return next();
+});
+
+//Changelog page
+app.get('/changelog', async (req, res, next)=>{
+	const brew = {
+		title : 'Changelog',
+		text  : changelogText
+	};
+	req.brew = brew;
+	return next();
+});
+
 //Source page
 app.get('/source/:id', asyncHandler(async (req, res)=>{
 	const brew = await getBrewFromId(req.params.id, 'raw');
@@ -170,6 +189,7 @@ app.get('/edit/:id', asyncHandler(async (req, res, next)=>{
 //New Page
 app.get('/new/:id', asyncHandler(async (req, res, next)=>{
 	const brew = await getBrewFromId(req.params.id, 'share');
+	brew.title = `CLONE - ${brew.title}`;
 	req.brew = brew;
 	return next();
 }));
@@ -204,8 +224,6 @@ app.use((req, res)=>{
 	const props = {
 		version     : require('./package.json').version,
 		url         : req.originalUrl,
-		welcomeText : welcomeText,
-		changelog   : changelogText,
 		brew        : req.brew,
 		brews       : req.brews,
 		googleBrews : req.googleBrews,
--- a/shared/naturalcrit/markdown.js
+++ b/shared/naturalcrit/markdown.js
@@ -19,74 +19,217 @@ renderer.paragraph = function(text){
 	let match;
 	if(text.startsWith('<div') || text.startsWith('</div'))
 		return `${text}`;
-	else if(match = text.match(/(^|^.*?\n)<span class="inline([^>]*><\/span>)$/))
-		return `<p>${match[1]}</p><span class="inline-block"${match[2]}`;
-	else
+	else if(match = text.match(/(^|^.*?\n)<span class="inline(.*?<\/span>)$/)) {
+		return `${match[1].trim() ? `<p>${match[1]}</p>` : ''}<span class="inline-block${match[2]}`;
+	} else
 		return `<p>${text}</p>\n`;
 };

-// Mustache-style Divs {{class \n content ... \n}}
-let blockCount = 0;
-const blockRegex = /^ *{{(?:="[\w,\-. ]*"|[^"'\s])*$|^ *}}$/gm;
-const inlineFullRegex = /{{[^\n]*}}/g;
-const inlineRegex = /{{(?:="[\w,\-. ]*"|[^"'{}}\s])*\s*|}}/g;
-
-renderer.text = function(text){
-	const newText = text.replaceAll('&quot;', '"');
-	let matches;
-
-	if(matches = newText.match(inlineFullRegex)) {
-
-		//SPAN - INLINE
-		matches = newText.match(inlineRegex);
-		let matchIndex = 0;
-		const res =  _.reduce(newText.split(inlineRegex), (r, splitText)=>{
-
-			if(splitText) r.push(Markdown.parseInline(splitText, { renderer: renderer }));
-
-			const block = matches[matchIndex] ? matches[matchIndex].trimLeft() : '';
-			if(block && block.startsWith('{{')) {
-				const values = processStyleTags(block.substring(2));
-				r.push(`<span class="inline ${values}>`);
-				blockCount++;
-			} else if(block == '}}' && blockCount !== 0){
-				r.push('</span>');
-				blockCount--;
+const mustacheSpans = {
+	name  : 'mustacheSpans',
+	level : 'inline',                                   // Is this a block-level or inline-level tokenizer?
+	start(src) { return src.match(/{{[^{]/)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const completeSpan = /^{{[^\n]*}}/;               // Regex for the complete token
+		const inlineRegex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
+		const match = completeSpan.exec(src);
+		if(match) {
+			//Find closing delimiter
+			let blockCount = 0;
+			let tags = '';
+			let endIndex = 0;
+			let delim;
+			while (delim = inlineRegex.exec(match[0])) {
+				if(delim[0].startsWith('{{')) {
+					tags = tags || ` ${processStyleTags(delim[0].substring(2))}`;
+					blockCount++;
+				} else if(delim[0] == '}}' && blockCount !== 0) {
+					blockCount--;
+					if(blockCount == 0) {
+						endIndex = inlineRegex.lastIndex;
+						break;
+					}
+				}
 			}

-			matchIndex++;
+			if(endIndex) {
+				const raw = src.slice(0, endIndex);
+				const text = raw.slice((raw.indexOf(' ')+1) || -2, -2);

-			return r;
-		}, []).join('');
-		return `${res}`;
-	} else if(matches = newText.match(blockRegex)) {
-		//DIV - BLOCK-LEVEL
- 		let matchIndex = 0;
- 		const res =  _.reduce(newText.split(blockRegex), (r, splitText)=>{
- 			if(splitText) r.push(Markdown.parseInline(splitText, { renderer: renderer }));
+				return {                              // Token to generate
+					type   : 'mustacheSpans',           // Should match "name" above
+					raw    : raw,                       // Text to consume from the source
+					text   : text,                      // Additional custom properties
+					tags   : tags,
+					tokens : this.inlineTokens(text)    // inlineTokens to process **bold**, *italics*, etc.
+				};
+			}
+		}
+	},
+	renderer(token) {
+		return `<span class="inline${token.tags}>${this.parseInline(token.tokens)}</span>`; // parseInline to turn child tokens into HTML
+	}
+};

- 			const block = matches[matchIndex] ? matches[matchIndex].trimLeft() : '';
- 			if(block && block.startsWith('{')) {
- 				const values = processStyleTags(block.substring(2));
- 				r.push(`<div class="block ${values}">`);
- 				blockCount++;
- 			} else if(block == '}}' && blockCount !== 0){
- 				r.push('</div>');
- 				blockCount--;
- 			}
+const mustacheDivs = {
+	name  : 'mustacheDivs',
+	level : 'block',
+	start(src) { return src.match(/\n *{{[^{]/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const completeBlock = /^ *{{[^\s}]* *\n.*\n *}}/s;                // Regex for the complete token
+		const blockRegex = /^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/gm;
+		const match = completeBlock.exec(src);
+		if(match) {
+			//Find closing delimiter
+			let blockCount = 0;
+			let tags = '';
+			let endIndex = 0;
+			let delim;
+			while (delim = blockRegex.exec(match[0])?.[0].trim()) {
+				if(delim.startsWith('{{')) {
+					tags = tags || ` ${processStyleTags(delim.substring(2))}`;
+					blockCount++;
+				} else if(delim == '}}' && blockCount !== 0) {
+					blockCount--;
+					if(blockCount == 0) {
+						endIndex = blockRegex.lastIndex;
+						break;
+					}
+				}
+			}

- 			matchIndex++;
+			if(endIndex) {
+				const raw = src.slice(0, endIndex);
+				const text = raw.slice((raw.indexOf('\n')+1) || -2, -2);
+				return {                                        // Token to generate
+					type   : 'mustacheDivs',                      // Should match "name" above
+					raw    : raw,                                 // Text to consume from the source
+					text   : text,                                // Additional custom properties
+					tags   : tags,
+					tokens : this.inline(this.blockTokens(text))
+				};
+			}
+		}
+	},
+	renderer(token) {
+		return `<div class="block${token.tags}>${this.parse(token.tokens)}</div>`; // parseInline to turn child tokens into HTML
+	}
+};

- 			return r;
- 		}, []).join('');
- 		return res;
- 	} else {
-		if(!matches) {
-			return `${text}`;
+const mustacheInjectInline = {
+	name  : 'mustacheInjectInline',
+	level : 'inline',
+	start(src) { return src.match(/ *{[^{\n]/)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const inlineRegex = /^ *{((?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*)}/g;
+		const match = inlineRegex.exec(src);
+		if(match) {
+			const lastToken = tokens[tokens.length - 1];
+			if(!lastToken)
+				return false;
+
+			const tags = ` ${processStyleTags(match[1])}`;
+			lastToken.originalType = lastToken.type;
+			lastToken.type         = 'mustacheInjectInline';
+			lastToken.tags         = tags;
+			return {
+				type : 'text',            // Should match "name" above
+				raw  : match[0],          // Text to consume from the source
+				text : ''
+			};
+		}
+	},
+	renderer(token) {
+		token.type = token.originalType;
+		const text = this.parseInline([token]);
+		const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);
+		if(openingTag) {
+			return `${openingTag[1]} class="${token.tags}${openingTag[2]}`;
+		}
+		return text;
+	}
+};
+
+const mustacheInjectBlock = {
+	extensions : [{
+		name  : 'mustacheInjectBlock',
+		level : 'block',
+		start(src) { return src.match(/\n *{[^{\n]/m)?.index; },  // Hint to Marked.js to stop and check for a match
+		tokenizer(src, tokens) {
+			const inlineRegex = /^ *{((?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*)}/ym;
+			const match = inlineRegex.exec(src);
+			if(match) {
+				const lastToken = tokens[tokens.length - 1];
+				if(!lastToken)
+					return false;
+
+				lastToken.originalType = 'mustacheInjectBlock';
+				lastToken.tags         = ` ${processStyleTags(match[1])}`;
+				return {
+					type : 'text',            // Should match "name" above
+					raw  : match[0],          // Text to consume from the source
+					text : ''
+				};
+			}
+		},
+		renderer(token) {
+			token.type = token.originalType;
+			const text = this.parse([token]);
+			const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);
+			if(openingTag) {
+				return `${openingTag[1]} class="${token.tags}${openingTag[2]}`;
+			}
+			return text;
+		}
+	}],
+	walkTokens(token) {
+		// After token tree is finished, tag tokens to apply styles to so Renderer can find them
+		// Does not work with tables since Marked.js tables generate invalid "tokens", and changing "type" ruins Marked handling that edge-case
+		if(token.originalType == 'mustacheInjectBlock' && token.type !== 'table') {
+			token.originalType = token.type;
+			token.type         = 'mustacheInjectBlock';
 		}
 	}
 };

+const definitionLists = {
+	name  : 'definitionLists',
+	level : 'block',
+	start(src) { return src.match(/^.*?::.*/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const regex = /^([^\n]*?)::([^\n]*)/ym;
+		let match;
+		let endIndex = 0;
+		const definitions = [];
+		while (match = regex.exec(src)) {
+			definitions.push({
+				dt : this.inlineTokens(match[1].trim()),
+				dd : this.inlineTokens(match[2].trim())
+			});
+			endIndex = regex.lastIndex;
+		}
+		if(definitions.length) {
+			return {
+				type : 'definitionLists',
+				raw  : src.slice(0, endIndex),
+				definitions
+			};
+		}
+	},
+	renderer(token) {
+		return `<dl>
+						${token.definitions.reduce((html, def)=>{
+		return `${html}<dt>${this.parseInline(def.dt)}</dt>`
+									 + `<dd>${this.parseInline(def.dd)}</dd>\n`;
+	}, '')}
+		 				</dl>`;
+	}
+};
+
+Markdown.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
+Markdown.use(mustacheInjectBlock);
+Markdown.use({ smartypants: true });
+
 //Fix local links in the Preview iFrame to link inside the frame
 renderer.link = function (href, title, text) {
 	let self = false;
@@ -170,26 +313,23 @@ const tagRegex = new RegExp(`(${
 	}).join('|')})`, 'g');

 const processStyleTags = (string)=>{
-	const tags = string.match(/(?:[^, "=]+|="[^"]*")+/g);
+	//split tags up. quotes can only occur right after colons.
+	//TODO: can we simplify to just split on commas?
+	const tags = string.match(/(?:[^, ":]+|:(?:"[^"]*"|))+/g);

 	if(!tags)	return '"';

 	const id      = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
-	const classes = _.remove(tags, (tag)=>!tag.includes('"'));
-	const styles  = tags.map((tag)=>tag.replace(/="(.*)"/g, ':$1;'));
-	return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles ? `style="${styles.join(' ')}"` : ''}`;
+	const classes = _.remove(tags, (tag)=>!tag.includes(':'));
+	const styles  = tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;'));
+	return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles.length ? `style="${styles.join(' ')}"` : ''}`;
 };

 module.exports = {
 	marked : Markdown,
 	render : (rawBrewText)=>{
-		blockCount = 0;
 		rawBrewText = rawBrewText.replace(/^\\column$/gm, `<div class='columnSplit'></div>`)
-														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`)
-														 .replace(/(?:^|>) *:([^:\n]*):([^\n]*)\n/gm, (match, term, def)=>`<dt>${Markdown.parseInline(term)}</dt><dd>${def}</dd>`)
-														 .replace(/(<dt>.*<\/dt><dd>.*<\/dd>\n?)+/gm, `<dl>$1</dl>\n\n`)
-		                         .replace(/^}}/gm, '\n}}')
-		                         .replace(/^({{[^\n]*)$/gm, '$1\n');
+														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
 		return Markdown(
 			sanatizeScriptTags(rawBrewText),
 			{ renderer: renderer }
--- a/client/homebrew/phbStyle/phb.style.less
+++ b/client/homebrew/phbStyle/phb.style.less
@@ -1,5 +1,5 @@
-@import (less) './client/homebrew/phbStyle/phb.fonts.less';
-@import (less) './client/homebrew/phbStyle/phb.assets.less';
+@import (less) './themes/fonts/5e/fonts.less';
+@import (less) './themes/assets/assets.less';

 //Colors
@background            : #EEE5CE;
@@ -19,9 +19,12 @@ body {
 	font-family : ScalySansRemake;
 	font-size   : 0.325cm;
 	line-height : 1.2em;
-	p,dl,ul {
+	p,dl,ul,ol {
 		line-height : 1.2em;
 	}
+	ul, ol {
+		padding-left : 1em;
+	}
 	em{
 		font-style  : italic;
 	}
@@ -42,7 +45,7 @@ body {
 	-webkit-column-gap   : 0.9cm;
 	-moz-column-gap      : 0.9cm;
 }
-.phb3{
+.page{
 	.useColumns();
 	counter-increment : phb-page-numbers;
 	position          : relative;
@@ -64,10 +67,10 @@ body {
 	// *****************************/
 	p{
 		overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
-		margin-bottom : 1em;
+		margin-bottom : 0.8em;
 		line-height   : 1.3em;
 		&+p{
-			margin-top  : -1em;
+			margin-top  : -0.8em;
 		}
 	}
 	ul{
@@ -194,31 +197,75 @@ body {
 	//*****************************
 	// *            NOTE
 	// *****************************/
-	blockquote{
+	.note{
+		&::before{
+			content             : "";
+			box-sizing          : border-box;
+			border-style        : solid;
+			border-width        : 11px;
+			border-image        : @noteBorderImage 12;
+			border-image-outset : 9px 0px;
+			box-shadow          : 1px 4px 14px #888;
+			position            : absolute;
+			width               : 100%;
+			height              : 100%;
+			top                 : 0;
+			left                : 0;
+		}
 		.useSansSerif();
-		box-sizing          : border-box;
-		margin-bottom       : 1em;
-		padding             : 5px 10px;
+		position            : relative;
+		margin-top          : 1.3em;
+		margin-left         : -0.1em;
+		margin-right        : -0.1em;
 		background-color    : @noteGreen;
-		border-style        : solid;
-		border-width        : 11px;
-		border-image        : @noteBorderImage 11;
-		border-image-outset : 9px 0px;
-		box-shadow          : 1px 4px 14px #888;
-		-webkit-transform   : translateZ(0); //Prevents shadows from breaking across columns
-		p, ul{
-			font-size   : 0.352cm;
-			line-height : 1.1em;
+		padding             : 0.5em 0.6em;
+		& + * {
+			margin-top : 1.3em;
+		}
+		p{
+			display        : block;
+			padding-bottom : 0px;
+		}
+		p + p {
+			padding-top : .8em;
+		}
+		:last-child {
+			margin-bottom : 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;
+	//************************************
+	// *       DESCRIPTIVE TEXT BOX
+	// ************************************/
+	.descriptive{
+		.useSansSerif();
+		display             : block-inline;
+		margin-top          : 1.4em;
+		background-color    : #faf7ea;
+		font-family         : ScalySansRemake;
+		border-style        : solid;
+		border-width        : 7px;
+		border-image        : @descriptiveBoxImage 12 stretch;
+		border-image-outset : 4px;
+		box-shadow          : 0px 0px 6px #faf7ea;
+		padding             : 0.1em;
+		& + * {
+			margin-top : 1.4em;
+		}
+		p{
+			display        : block;
+			padding-bottom : 0px;
+			line-height    : 1.5em;
+		}
+		p + p {
+			padding-top : .8em;
+		}
+		:last-child {
+			margin-bottom : 0em;
+		}
 	}
 	//*****************************
 	// *    MONSTER STAT BLOCK
 	// *****************************/
-
 	.monster {
 		&.frame {
 			border-style          : solid;
@@ -283,11 +330,6 @@ body {
 		dl {
 			.useSansSerif();
 			color        : @headerText;
-			padding-left :1.3em;
-			text-indent  :-1.3em;
-		}
-		dd {
-			text-indent  : 0px;
 		}

 		// Monster Ability table
@@ -364,6 +406,27 @@ body {
 		color      : #c9ad6a;
 		text-align : right;
 	}
+	//************************************
+	// *           CODE BLOCKS
+	// ************************************/
+	code{
+    font-family: "Courier New", Courier, monospace;
+    font-size: 0.325;
+    padding: 2px 4px;
+    color: #58180d;
+    background-color: #faf7ea;
+    border-radius: 4px;
+	}
+
+	pre code{
+		width               : 100%;
+		display             : block;
+		border              : 4px solid;
+		border-image        : @codeBorderImage 26 stretch;
+		border-image-width  : 10px;
+		border-image-outset : 2px;
+		border-radius       : 12px;
+	}
 	//*****************************
 	// *          EXTRAS
 	// *****************************/
@@ -414,7 +477,7 @@ body {
 //*****************************
 // *         SPELL LIST
 // *****************************/
-.phb3 .spellList{
+.page .spellList{
 	.useSansSerif();
 	column-count        : 4;
 	column-span         : all;
@@ -440,7 +503,7 @@ body {
 //*****************************
 // *         WIDE
 // *****************************/
-.phb3 .wide{
+.page .wide{
 	column-span         : all;
 	-webkit-column-span : all;
 	-moz-column-span    : all;
@@ -448,7 +511,7 @@ body {
 //*****************************
 // *       CLASS TABLE
 // *****************************/
-.phb3 .classTable{
+.page .classTable{
 	margin-top          : 25px;
 	margin-bottom       : 40px;
 	border-collapse     : separate;
@@ -464,72 +527,84 @@ body {
 		margin-bottom : 10px;
 	}
 }
-//************************************
-// *       DESCRIPTIVE TEXT BOX
-// ************************************/
-.phb3 .descriptive{
-	display             : block-inline;
-	margin-bottom       : 1em;
-	background-color    : #faf7ea;
-	font-family         : ScalySansRemake;
-	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.5em;
-	}
-	p + p {
-		padding-top : .8em;
-	}
-	em {
-		font-family : ScalySansRemake;
-		font-style  : italic;
-	}
-	strong {
-		font-family    : ScalySansRemake;
-		font-weight    : 800;
-		letter-spacing : -0.02em;
-	}
-}
-.phb3 pre+.descriptive{
-	margin-top : 8px;
-}
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/
-.phb3 .toc{
+.page .toc{
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;
+	h1 {
+		text-align    : center;
+		margin-bottom : 0.1cm;
+	}
 	a{
-		color           : black;
+		display         : table;
+		color           : inherit;
 		text-decoration : none;
 		&:hover{
 			text-decoration : underline;
 		}
 	}
+	h4 {
+		margin-top : 0.1cm;
+	}
 	ul{
 		padding-left    : 0;
 		list-style-type : none;
+		li + li h3 {
+			margin-top  : 0.26cm;
+			line-height : 1em
+		}
+		h3 span:first-child::after {
+			border : none;
+		}
+		span {
+			display : table-cell;
+			&:first-child {
+				position   :       relative;
+				overflow   :       hidden;
+				&::after {
+					content       : "";
+					position      : absolute;
+					bottom        : 0.08cm;        /* Set as you want */
+					margin-left   : 0.06cm;        /* Spacing before dot leaders */
+					width         : 100%;
+					border-bottom : 0.05cm dotted #000;
+				}
+			}
+			&:last-child {
+				font-family		 : BookInsanityRemake;
+				font-size   	 : 0.34cm;
+				font-weight		 : normal;
+				color		       : black;
+				text-align     : right;
+				vertical-align : bottom;       /* Keep Price text bottom-aligned */
+				width          : 1%;
+				padding-left   : 0.06cm;       /* Spacing after dot leaders */
+				/*white-space: nowrap;         /* Uncomment if needed */
+			}
+		}
+		ul { /*List indent*/
+			margin-left : 1em;
+		}
 	}
-	&>ul>li{
-		margin-bottom : 10px;
+	&.wide{
+		.useColumns(0.96);
 	}
 }

 //*****************************
 // *    MUSTACHE DIVS/SPANS
 // *****************************/
-.phb3 {
+.page {
 	.block {
 		break-inside : avoid;
+		-webkit-transform   : translateZ(0); //Prevents shadows from breaking across columns
 	}
 	.inline-block {
-		display : block;
+		display : inline-block;
+		text-indent : initial;
 	}
 	div {
 		column-gap : 0.5cm; //Default spacing if a div uses multicolumns
@@ -539,24 +614,33 @@ body {
 //*****************************
 // *    DEFINITION LISTS
 // *****************************/
-.phb3 {
-	// dl {
-  // 	margin-top: 10px;
-  // }
+.page {
+	dl {
+		line-height  : 1.3em;
+		padding-left : 1em;
+		text-indent  : -1em;
+	}
+	dl + p {
+  	margin-top: 0.5em;
+  }
+	p + dl {
+		margin-top: -0.5em;
+	}
  dt {
    float: left;
    //clear: left;  //Doesn't seem necessary
    margin-right: 5px;
  }
-  // dd {
-  //   margin-left: 0px;
-  // }
+  dd {
+		margin-left : 0px;
+		text-indent : 0px;
+  }
 }

 //*****************************
 // *    BLANK LINE
 // *****************************/
-.phb3 {
+.page {
 	.blank {
 		height: 0.75em;
 	}
--- a/client/homebrew/phbStyle/phb.styleLegacy.less
+++ b/client/homebrew/phbStyle/phb.styleLegacy.less
@@ -1,6 +1,6 @@
-@import (less) './client/homebrew/phbStyle/phb.fontsLegacy.less';
-@import (less) './client/homebrew/phbStyle/phb.assets.less';
-@import (less) './client/homebrew/phbStyle/phb.depricated.less';
+@import (less) './themes/fonts/5e legacy/fonts.less';
+@import (less) './themes/assets/assets.less';
+@import (less) './themes/phb.depricated.less';
 //Colors
@background            : #EEE5CE;
@noteGreen             : #e0e5c1;
--- a/themes/assets/assets.less
+++ b/themes/assets/assets.less
@@ -0,0 +1,10 @@
+@footerAccentImage        : data-uri('./themes/assets/footerAccent.png');
+@frameBorderImage         : data-uri('./themes/assets/frameBorder.png');
+@backgroundImage          : data-uri('./themes/assets/parchmentBackground.jpg');
+@redTriangleImage         : data-uri('./themes/assets/redTriangle.png');
+@monsterBorderImageLegacy : data-uri('./themes/assets/monsterBorderLegacy.png');
+@noteBorderImage          : data-uri('./themes/assets/noteBorder.png');
+@descriptiveBoxImage      : data-uri('./themes/assets/descriptiveBorder.png');
+@monsterBlockBackground   : data-uri('./themes/assets/parchmentBackgroundGrayscale.jpg');
+@monsterBorderImage       : data-uri('./themes/assets/monsterBorderFancy.png');
+@codeBorderImage          : data-uri('./themes/assets/codeBorder.png');
--- a/themes/assets/codeBorder.png
+++ b/themes/assets/codeBorder.png
--- a/client/homebrew/phbStyle/images/descriptiveBorder.png
+++ b/client/homebrew/phbStyle/images/descriptiveBorder.png
--- a/client/homebrew/phbStyle/images/footerAccent.png
+++ b/client/homebrew/phbStyle/images/footerAccent.png
--- a/client/homebrew/phbStyle/images/frameBorder.png
+++ b/client/homebrew/phbStyle/images/frameBorder.png
--- a/client/homebrew/phbStyle/images/monsterBorderFancy.png
+++ b/client/homebrew/phbStyle/images/monsterBorderFancy.png
--- a/client/homebrew/phbStyle/images/monsterBorderLegacy.png
+++ b/client/homebrew/phbStyle/images/monsterBorderLegacy.png
--- a/client/homebrew/phbStyle/images/noteBorder.png
+++ b/client/homebrew/phbStyle/images/noteBorder.png
--- a/client/homebrew/phbStyle/images/parchmentBackground.jpg
+++ b/client/homebrew/phbStyle/images/parchmentBackground.jpg
--- a/client/homebrew/phbStyle/images/parchmentBackgroundGrayscale.jpg
+++ b/client/homebrew/phbStyle/images/parchmentBackgroundGrayscale.jpg
--- a/client/homebrew/phbStyle/images/redTriangle.png
+++ b/client/homebrew/phbStyle/images/redTriangle.png
--- a/client/homebrew/phbStyle/fonts/legacy/Bookinsanity
+++ b/client/homebrew/phbStyle/fonts/legacy/Bookinsanity
--- a/client/homebrew/phbStyle/fonts/legacy/Bookinsanity
+++ b/client/homebrew/phbStyle/fonts/legacy/Bookinsanity
--- a/client/homebrew/phbStyle/fonts/legacy/Bookinsanity
+++ b/client/homebrew/phbStyle/fonts/legacy/Bookinsanity
--- a/client/homebrew/phbStyle/fonts/legacy/Bookinsanity.woff2
+++ b/client/homebrew/phbStyle/fonts/legacy/Bookinsanity.woff2
--- a/client/homebrew/phbStyle/fonts/legacy/Mr
+++ b/client/homebrew/phbStyle/fonts/legacy/Mr
--- a/client/homebrew/phbStyle/fonts/legacy/Scaly
+++ b/client/homebrew/phbStyle/fonts/legacy/Scaly
--- a/client/homebrew/phbStyle/fonts/legacy/Scaly
+++ b/client/homebrew/phbStyle/fonts/legacy/Scaly
--- a/client/homebrew/phbStyle/fonts/legacy/Solbera
+++ b/client/homebrew/phbStyle/fonts/legacy/Solbera
--- a/client/homebrew/phbStyle/phb.fontsLegacy.less
+++ b/client/homebrew/phbStyle/phb.fontsLegacy.less
@@ -1,25 +1,25 @@
 /* Main Font, serif */
@font-face {
 	font-family: BookSanity;
-	src: url('../fonts/legacy/Bookinsanity.woff2');
+	src: url('../fonts/5e legacy/Bookinsanity.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
@font-face {
 	font-family: BookSanity;
-	src: url('../fonts/legacy/Bookinsanity Bold.woff2');
+	src: url('../fonts/5e legacy/Bookinsanity Bold.woff2');
 	font-weight: bold;
 	font-style: normal;
 }
@font-face {
 	font-family: BookSanity;
-	src: url('../fonts/legacy/Bookinsanity Italic.woff2');
+	src: url('../fonts/5e legacy/Bookinsanity Italic.woff2');
 	font-weight: normal;
 	font-style: italic;
 }
@font-face {
 	font-family: BookSanity;
-	src: url('../fonts/legacy/Bookinsanity Bold Italic.woff2');
+	src: url('../fonts/5e legacy/Bookinsanity Bold Italic.woff2');
 	font-weight: bold;
 	font-style: italic;
 }
@@ -27,13 +27,13 @@
 /* Notes and Tables, sans-serif */
@font-face {
 	font-family: ScalySans;
-	src: url('../fonts/legacy/Scaly Sans.woff2');
+	src: url('../fonts/5e legacy/Scaly Sans.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
@font-face {
 	font-family: ScalySansSmallCaps;
-	src: url('../fonts/legacy/Scaly Sans Caps.woff2');
+	src: url('../fonts/5e legacy/Scaly Sans Caps.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -41,7 +41,7 @@
 /* Headers */
@font-face {
 	font-family: MrJeeves;
-	src: url('../fonts/legacy/Mr Eaves Small Caps.woff2');
+	src: url('../fonts/5e legacy/Mr Eaves Small Caps.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -49,7 +49,7 @@
 /* Fancy Drop Cap */
@font-face {
 	font-family: Solberry;
-	src: url('../fonts/legacy/Solbera Imitation.woff2');
+	src: url('../fonts/5e legacy/Solbera Imitation.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
--- a/client/homebrew/phbStyle/fonts/v3/Bookinsanity
+++ b/client/homebrew/phbStyle/fonts/v3/Bookinsanity
--- a/client/homebrew/phbStyle/fonts/v3/Bookinsanity
+++ b/client/homebrew/phbStyle/fonts/v3/Bookinsanity
--- a/client/homebrew/phbStyle/fonts/v3/Bookinsanity
+++ b/client/homebrew/phbStyle/fonts/v3/Bookinsanity
--- a/client/homebrew/phbStyle/fonts/v3/Bookinsanity
+++ b/client/homebrew/phbStyle/fonts/v3/Bookinsanity
--- a/client/homebrew/phbStyle/fonts/v3/Bookinsanity.woff2
+++ b/client/homebrew/phbStyle/fonts/v3/Bookinsanity.woff2
--- a/client/homebrew/phbStyle/fonts/v3/Mr
+++ b/client/homebrew/phbStyle/fonts/v3/Mr
--- a/client/homebrew/phbStyle/fonts/v3/Scaly
+++ b/client/homebrew/phbStyle/fonts/v3/Scaly
--- a/client/homebrew/phbStyle/fonts/v3/Scaly
+++ b/client/homebrew/phbStyle/fonts/v3/Scaly
--- a/client/homebrew/phbStyle/fonts/v3/Scaly
+++ b/client/homebrew/phbStyle/fonts/v3/Scaly
--- a/client/homebrew/phbStyle/fonts/v3/Scaly
+++ b/client/homebrew/phbStyle/fonts/v3/Scaly
--- a/client/homebrew/phbStyle/fonts/v3/Scaly
+++ b/client/homebrew/phbStyle/fonts/v3/Scaly
--- a/client/homebrew/phbStyle/fonts/v3/Solbera
+++ b/client/homebrew/phbStyle/fonts/v3/Solbera
--- a/client/homebrew/phbStyle/phb.fonts.less
+++ b/client/homebrew/phbStyle/phb.fonts.less
@@ -1,25 +1,25 @@
 /* Main Font, serif */
@font-face {
 	font-family: BookInsanityRemake;
-	src: url('../fonts/v3/Bookinsanity.woff2');
+	src: url('../fonts/5e/Bookinsanity.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
@font-face {
 	font-family: BookInsanityRemake;
-	src: url('../fonts/v3/Bookinsanity Bold.woff2');
+	src: url('../fonts/5e/Bookinsanity Bold.woff2');
 	font-weight: bold;
 	font-style: normal;
 }
@font-face {
 	font-family: BookInsanityRemake;
-	src: url('../fonts/v3/Bookinsanity Italic.woff2');
+	src: url('../fonts/5e/Bookinsanity Italic.woff2');
 	font-weight: normal;
 	font-style: italic;
 }
@font-face {
 	font-family: BookInsanityRemake;
-	src: url('../fonts/v3/Bookinsanity Bold Italic.woff2');
+	src: url('../fonts/5e/Bookinsanity Bold Italic.woff2');
 	font-weight: bold;
 	font-style: italic;
 }
@@ -27,31 +27,31 @@
 /* Notes and Tables, sans-serif */
@font-face {
 	font-family: ScalySansRemake;
-	src: url('../fonts/v3/Scaly Sans.woff2');
+	src: url('../fonts/5e/Scaly Sans.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
@font-face {
 	font-family: ScalySansRemake;
-	src: url('../fonts/v3/Scaly Sans Bold.woff2');
+	src: url('../fonts/5e/Scaly Sans Bold.woff2');
 	font-weight: bold;
 	font-style: normal;
 }
@font-face {
 	font-family: ScalySansRemake;
-	src: url('../fonts/v3/Scaly Sans Italic.woff2');
+	src: url('../fonts/5e/Scaly Sans Italic.woff2');
 	font-weight: normal;
 	font-style: italic;
 }
@font-face {
 	font-family: ScalySansRemake;
-	src: url('../fonts/v3/Scaly Sans Bold Italic.woff2');
+	src: url('../fonts/5e/Scaly Sans Bold Italic.woff2');
 	font-weight: bold;
 	font-style: italic;
 }
@font-face {
 	font-family: ScalySansSmallCapsRemake;
-	src: url('../fonts/v3/Scaly Sans Caps.woff2');
+	src: url('../fonts/5e/Scaly Sans Caps.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -59,15 +59,15 @@
 /* Headers */
@font-face {
 	font-family: MrEavesRemake;
-	src: url('../fonts/v3/Mr Eaves Small Caps.woff2');
+	src: url('../fonts/5e/Mr Eaves Small Caps.woff2');
 	font-weight: normal;
 	font-style: normal;
 }

 /* Fancy Drop Cap */
@font-face {
-	font-family: SolberaImitationRemake; //Tweaked v3 version
-	src: url('../fonts/v3/Solbera Imitation Tweak.woff2');
+	font-family: SolberaImitationRemake; //Tweaked 5e version
+	src: url('../fonts/5e/Solbera Imitation Tweak.woff2');
 	font-weight: normal;
 	font-style: normal;
 }
--- a/client/homebrew/phbStyle/phb.depricated.less
+++ b/client/homebrew/phbStyle/phb.depricated.less