Moving phb styling to be stand alone, removed all unneeded assets

.gitignore

@@ -10,4 +10,5 @@ architecture.json
 /config/*
 !/config/default.json
 
-node_modules
+node_modules
+storage

client/homebrew/architecture (T440s-002's conflicted copy 2016-01-03).json

@@ -1,51 +0,0 @@
-{
-	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\editPage\\editPage.jsx": [
-		"react",
-		"lodash",
-		"classnames",
-		"superagent",
-		"../phb/phb.jsx",
-		"../editor/editor.jsx"
-	],
-	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\sharePage\\sharePage.jsx": [
-		"react",
-		"lodash",
-		"classnames",
-		"../phb/phb.jsx"
-	],
-	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\statusbar\\statusbar.jsx": [
-		"react",
-		"lodash",
-		"classnames"
-	],
-	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\phb\\phb.jsx": [
-		"react",
-		"lodash",
-		"classnames",
-		"marked"
-	],
-	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\editor\\snippets.js": [],
-	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\editor\\editor.jsx": [
-		"react",
-		"lodash",
-		"classnames",
-		"./snippets.js"
-	],
-	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\homePage\\homePage.jsx": [
-		"react",
-		"lodash",
-		"classnames",
-		"../statusbar/statusbar.jsx",
-		"../phb/phb.jsx",
-		"../editor/editor.jsx"
-	],
-	"C:\\Dropbox\\root\\Programming\\Javascript\\NaturalCrit\\client\\homebrew\\homebrew.jsx": [
-		"react",
-		"lodash",
-		"classnames",
-		"pico-router",
-		"./editPage/editPage.jsx",
-		"./sharePage/sharePage.jsx",
-		"./homePage/homePage.jsx"
-	]
-}

client/homebrew/editPage/editPage.jsx

@@ -3,7 +3,7 @@ var _ = require('lodash');
 var cx = require('classnames');
 
 var Statusbar = require('../statusbar/statusbar.jsx');
-var PHB = require('../phb/phb.jsx');
+var PageContainer = require('../pageContainer/pageContainer.jsx');
 var Editor = require('../editor/editor.jsx');
 
 var FullClassGen = require('../editor/snippets/fullclass.gen.js');
@@ -75,7 +75,7 @@ var EditPage = React.createClass({
 					<Editor text={this.state.text} onChange={this.handleTextChange} />
 				</div>
 				<div className='rightPane'>
-					<PHB text={this.state.text} />
+					<PageContainer text={this.state.text} />
 				</div>
 			</div>
 		</div>

client/homebrew/homePage/homePage.jsx

@@ -3,7 +3,7 @@ var _ = require('lodash');
 var cx = require('classnames');
 
 var Statusbar = require('../statusbar/statusbar.jsx');
-var PHB = require('../phb/phb.jsx');
+var PageContainer = require('../pageContainer/pageContainer.jsx');
 var Editor = require('../editor/editor.jsx');
 
 var WelcomeText = require('./welcomeMessage.js');
@@ -50,7 +50,7 @@ var HomePage = React.createClass({
 						<Editor text={this.state.text} onChange={this.handleTextChange} />
 					</div>
 					<div className='rightPane'>
-						<PHB text={this.state.text} />
+						<PageContainer text={this.state.text} />
 					</div>
 				</div>
 

client/homebrew/pageContainer/pageContainer.jsx

@@ -4,7 +4,7 @@ var cx = require('classnames');
 
 var Markdown = require('marked');
 
-var Phb = React.createClass({
+var PageContainer = React.createClass({
 	getDefaultProps: function() {
 		return {
 			text : ""
@@ -19,10 +19,10 @@ var Phb = React.createClass({
 
 	render : function(){
 		var self = this;
-		return <div className="pbhPages">
+		return <div className="pageContainer">
 			{this.renderPages()}
 		</div>;
 	}
 });
 
-module.exports = Phb;
+module.exports = PageContainer;

client/homebrew/pageContainer/pageContainer.less

@@ -0,0 +1,12 @@
+@import (less) './client/homebrew/phb/phb.style.less';
+
+.pageContainer{
+	padding          : 30px 0px;
+	background-color : @steel;
+	&>.phb{
+		margin-right  : auto;
+		margin-bottom : 30px;
+		margin-left   : auto;
+		box-shadow    : 1px 4px 14px #000;
+	}
+}

client/homebrew/phb/phb.style.less

@@ -0,0 +1,400 @@
+@import (less) './client/homebrew/phb/phb.fonts.css';
+@import (less) './client/homebrew/phb/phb.assets.less';
+
+
+//Colors
+@background          : #EEE5CE;
+@noteGreen               : #e0e5c1;
+@headerUnderline     : #c9ad6a;
+@horizontalRule      : #9c2b1b;
+@headerText              : #58180D;
+
+
+.phb{
+	font-family          : BookSanity;
+	box-sizing           : border-box;
+	height               : 27.5cm;
+	width                : 21cm;
+	padding              : 1.0cm 1.7cm;
+	column-count         : 2;
+	column-fill          : auto;
+	column-gap           : 1cm;
+	column-width         : 8cm;
+	background-color: @background;
+	background-image     : @backgroundImage;
+
+	-webkit-column-count : 2;
+	-moz-column-count    : 2;
+	-webkit-column-width : 8cm;
+	-moz-column-width    : 8cm;
+	-webkit-column-gap   : 1cm;
+	text-rendering       : optimizeLegibility;
+	position : relative;
+	overflow: hidden;
+	z-index : 15;
+
+
+	img{
+		z-index : -1;
+	}
+
+	//Page Accents
+	&:after{
+		content : "";
+		position: absolute;
+		height: 50px;
+		bottom : 0px;
+		left: 0px;
+		background-size: cover;
+		width : 100%;
+		background-image: @footerAccentImage;
+
+	}
+	&:nth-child(even){
+		&:after{
+			transform: scaleX(-1);
+		}
+
+		.pageNumber{
+			left : 2px;
+		}
+
+		.footnote{
+			left : 80px;
+			text-align: left;
+		}
+	}
+
+	//Avoid breaking up
+	p,ul,blockquote,table{
+		-webkit-column-break-inside : avoid;
+		-moz-column-break-inside    : avoid;
+		-o-column-break-inside      : avoid;
+		-ms-column-break-inside     : avoid;
+		column-break-inside         : avoid;
+		z-index : 15;
+	}
+
+	strong{
+		font-weight: bold;
+	}
+	em{
+		font-style: italic;
+	}
+
+	p,ul{
+		strong{
+			//font-family : BookSanityBold;
+			em{
+			//	font-family : BookSanityBoldItalic;
+			}
+		}
+		em{
+			//font-family : BookSanityItalic;
+		}
+	}
+	p {
+		padding-bottom : 0.8em;
+		font-family    : BookSanity;
+		font-size      : 9pt;
+		line-height    : 1.3em;
+		&+p{
+			margin-top  : -0.8em;
+			text-indent : 1em;
+		}
+	}
+	ul{
+		margin-bottom       : 0.8em;
+		font-family         : BookSanity;
+		font-size           : 9pt;
+		line-height         : 1.3em;
+		list-style-position : inside;
+		list-style-type     : disc;
+	}
+
+
+	//Full Spell casting table
+	h5+hr+table{
+		-webkit-column-span : all;
+		column-span : all;
+		background-color: white;
+		border-image-source: @frameBorderImage;
+		border-image-slice: 150 200 150 200;
+		border-image-width: 47px;
+		border-image-outset: 37px 17px;
+		border-image-repeat: round;
+		margin-bottom: 50px;
+		border-collapse: separate;
+		border: initial;
+		padding-top: 10px;
+		margin-top: -5px;
+
+	}
+
+
+	table{
+		width         : 100%;
+		margin-bottom : 1em;
+		font-family   : ScalySans;
+		font-size     : 10pt;
+		em{
+			font-family : ScalySans;
+			font-style  : italic;
+		}
+		strong{
+			font-weight : 800;
+			font-family : ScalySans;
+			em{
+				font-style  : italic;
+				font-weight : 800;
+			}
+		}
+		thead{
+			font-weight : 800;
+			th{
+				padding-bottom : 0.3em;
+				padding-right: 0.1em;
+				padding-left: 0.1em;
+				vertical-align: bottom;
+			}
+		}
+		tbody{
+			tr{
+				td{
+					padding : 0.2em 0em;
+				}
+				&:nth-child(odd){
+					background-color : @noteGreen;
+				}
+			}
+		}
+	}
+	hr{
+		visibility: hidden;
+		//border : none;
+		margin: 0px;
+	}
+
+	//Fancy List of things
+	hr+ul{
+		list-style-type: none;
+		text-indent: -1em;
+		padding-left: 1em;
+
+		//margin-top: -0.5em;
+		margin-bottom: 0.5em;
+	}
+
+	//Column Break
+	pre{
+		visibility: hidden;
+		-webkit-column-break-after: always;
+	}
+
+	//Monster Stat block
+	hr+blockquote{
+		position : relative;
+		background-color: #FDF1DC;
+		border : none;
+
+		h2{
+			margin-bottom: 0px;
+			&+p{
+				padding-bottom: 0px;
+			}
+		}
+		h3{
+			font-family: ScalySans;
+			font-weight: 400;
+			border-bottom: 1px solid @headerText;
+		}
+
+		ul{
+			list-style-type: none;
+			font-family: ScalySans;
+			color : @headerText;
+			font-size: 10pt;
+			text-indent: -1em;
+			padding-left: 1em;
+			strong{
+				font-family: ScalySans;
+				font-weight: 800;
+			}
+		}
+
+		// Monster Ability table
+		hr+table{
+			-webkit-column-span : 1;
+			column-span : 1;
+			background-color: transparent;
+			border-image: none;
+			margin: 0;
+			thead{
+				tr{
+					//background-color: transparent;
+				}
+			}
+			tbody{
+				tr:nth-child(odd), tr:nth-child(even){
+					background-color: transparent;
+				}
+			}
+		}
+		table{
+			color : @headerText;
+		}
+
+		p+p{
+			margin-top  : 0em;
+			text-indent : 0em;
+			padding-bottom: 0.5em;
+		}
+
+
+
+		//Maybe move this to be built in
+		hr{
+			visibility: visible;
+			margin: 8px 0px;
+
+			border-color : transparent;
+			position: relative;
+			@height : 3px;
+			&:after, &:before{
+				content : "";
+				position: absolute;
+				width: 100%;
+				height: @height;
+				left: 0px;
+			}
+			&:before{
+				top : -@height;
+				background: linear-gradient(to right top, @horizontalRule 40%, transparent 50%)
+			}
+			&:after{
+				top: 0px;
+				background: linear-gradient(to right bottom, @horizontalRule 40%, transparent 50%)
+			}
+
+		}
+
+		//Borders
+		&:after, &:before{
+			content : "";
+			position: absolute;
+			background-color : #E69A28;
+			border: 1px solid black;
+			height : 4px;
+			width : 100%;
+			padding : 0px 3px;
+		}
+		&:before{
+			top : 0px;
+			left : -3px;
+		}
+		&:after{
+			bottom : 0px;
+			left : -3px;
+		}
+	}
+
+
+	//Note
+	blockquote{
+		box-sizing       : border-box;
+		margin-bottom    : 1em;
+		padding          : 5px 10px;
+		background-color : @noteGreen;
+		font-family      : ScalySans;
+		border-top       : 2px black solid;
+		border-bottom    : 2px black solid;
+		box-shadow       : 1px 4px 14px #888;
+
+		p, ul{
+			font-family : ScalySans;
+			font-size   : 10pt;
+			line-height : 1.1em;
+			em{
+				font-family : ScalySans;
+				font-style  : italic;
+			}
+			strong{
+				font-weight : 800;
+				font-family : ScalySans;
+				em{
+					font-style  : italic;
+					font-weight : 800;
+				}
+			}
+		}
+	}
+	pre{
+	}
+	h1,h2,h3,h4{
+		margin-top    : 0.2em;
+		margin-bottom : 0.2em;
+		font-family   : MrJeeves;
+		font-weight   : 800;
+		color         : @headerText;
+	}
+	h1{
+		column-span         : all;
+		font-size           : 28pt;
+		-webkit-column-span : all;
+		&+p{
+			&::first-letter{
+				float: left;
+				margin-top: 0.4em;
+				margin-bottom: 0.4em;
+				font-family: Solberry;
+				font-size: 10em;
+				color : #222;
+			}
+		}
+	}
+	h2{
+		font-size : 20pt;
+	}
+	h3{
+		font-size     : 15pt;
+		border-bottom : 2px solid @headerUnderline;
+	}
+	h4{
+		margin-bottom : 0.00em;
+		font-size     : 12pt;
+	}
+	h5{
+		margin-bottom : 0.2em;
+		font-family   : ScalySansSmallCaps;
+		font-size     : 13pt;
+		font-weight   : 900;
+	}
+
+
+
+
+
+
+	//Page Numbers
+	.pageNumber{
+		font-family         : BookSanity;
+			position: absolute;
+			bottom: 22px;
+			right: 2px;
+			font-size: 0.8em;
+			color: #c9ad6a;
+			text-align: center;
+			width : 50px;
+	}
+
+	.footnote{
+		position: absolute;
+		bottom: 32px;
+		right: 80px;
+		width : 200px;
+		font-size: 0.6em;
+		color: #c9ad6a;
+		text-align: right;
+	}
+
+}

client/homebrew/sharePage/sharePage.jsx

@@ -4,7 +4,7 @@ var cx = require('classnames');
 
 var Statusbar = require('../statusbar/statusbar.jsx');
 
-var PHB = require('../phb/phb.jsx');
+var PageContainer = require('../pageContainer/pageContainer.jsx');
 
 var SharePage = React.createClass({
 	getDefaultProps: function() {
@@ -29,7 +29,7 @@ var SharePage = React.createClass({
 					views={this.props.entry.views}
 				/>
 
-				<PHB text={this.props.entry.text} />
+				<PageContainer text={this.props.entry.text} />
 			</div>
 		);
 	}

test.css

@@ -0,0 +1,4 @@
+
+.phb{
+	background-color: red !important;
+}