Themes are now compiled into separate css files and can be hot-swapped in the renderer as needed

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -176,7 +176,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 }}>
@@ -189,6 +192,7 @@ const BrewRenderer = createClass({
 
 						<div className='pages' ref='pages'>
 							{/* Apply CSS from Style tab */}
+
 							<div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />
 
 							{/* Render pages from Markdown tab */}

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{
+		&>.page{
-			margin-right  : auto;
-			margin-bottom : 30px;
-			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000;
-		}
-		&>.phb3{
 			margin-right  : auto;
 			margin-bottom : 30px;
 			margin-left   : auto;

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');

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,

themes/5ePhb.style.less

@@ -1,5 +1,5 @@
-@import (less) './client/homebrew/phbStyle/phb.fonts.less';
+@import (less) './themes/fonts/5e/fonts.less';
-@import (less) './client/homebrew/phbStyle/phb.assets.less';
+@import (less) './themes/assets/assets.less';
 
 //Colors
 @background            : #EEE5CE;
@@ -42,7 +42,7 @@ body {
 	-webkit-column-gap   : 0.9cm;
 	-moz-column-gap      : 0.9cm;
 }
-.phb3{
+.page{
 	.useColumns();
 	counter-increment : phb-page-numbers;
 	position          : relative;
@@ -414,7 +414,7 @@ body {
 //*****************************
 // *         SPELL LIST
 // *****************************/
-.phb3 .spellList{
+.page .spellList{
 	.useSansSerif();
 	column-count        : 4;
 	column-span         : all;
@@ -440,7 +440,7 @@ body {
 //*****************************
 // *         WIDE
 // *****************************/
-.phb3 .wide{
+.page .wide{
 	column-span         : all;
 	-webkit-column-span : all;
 	-moz-column-span    : all;
@@ -448,7 +448,7 @@ body {
 //*****************************
 // *       CLASS TABLE
 // *****************************/
-.phb3 .classTable{
+.page .classTable{
 	margin-top          : 25px;
 	margin-bottom       : 40px;
 	border-collapse     : separate;
@@ -467,7 +467,7 @@ body {
 //************************************
 // *       DESCRIPTIVE TEXT BOX
 // ************************************/
-.phb3 .descriptive{
+.page .descriptive{
 	display             : block-inline;
 	margin-bottom       : 1em;
 	background-color    : #faf7ea;
@@ -495,13 +495,13 @@ body {
 		letter-spacing : -0.02em;
 	}
 }
-.phb3 pre+.descriptive{
+.page pre+.descriptive{
 	margin-top : 8px;
 }
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/
-.phb3 .toc{
+.page .toc{
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;
@@ -565,7 +565,7 @@ body {
 //*****************************
 // *    MUSTACHE DIVS/SPANS
 // *****************************/
-.phb3 {
+.page {
 	.block {
 		break-inside : avoid;
 	}
@@ -580,7 +580,7 @@ body {
 //*****************************
 // *    DEFINITION LISTS
 // *****************************/
-.phb3 {
+.page {
 	// dl {
   // 	margin-top: 10px;
   // }
@@ -597,7 +597,7 @@ body {
 //*****************************
 // *    BLANK LINE
 // *****************************/
-.phb3 {
+.page {
 	.blank {
 		height: 0.75em;
 	}

themes/5ePhbLegacy.style.less

@@ -1,6 +1,6 @@
-@import (less) './client/homebrew/phbStyle/phb.fontsLegacy.less';
+@import (less) './themes/fonts/5e legacy/fonts.less';
-@import (less) './client/homebrew/phbStyle/phb.assets.less';
+@import (less) './themes/assets/assets.less';
-@import (less) './client/homebrew/phbStyle/phb.depricated.less';
+@import (less) './themes/phb.depricated.less';
 //Colors
 @background            : #EEE5CE;
 @noteGreen             : #e0e5c1;

themes/assets/assets.less

@@ -0,0 +1,9 @@
+@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');

themes/fonts/5e legacy/fonts.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;
 }

themes/fonts/5e/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
+	font-family: SolberaImitationRemake; //Tweaked 5e version
-	src: url('../fonts/v3/Solbera Imitation Tweak.woff2');
+	src: url('../fonts/5e/Solbera Imitation Tweak.woff2');
 	font-weight: normal;
 	font-style: normal;
 }