Moved imgs and fonts into the new style folder

client/template.js

@@ -7,7 +7,6 @@ module.exports = function(vitreum){
 		<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 		<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
 
-		<link href="/assets/depricated/phb.old.css" rel="stylesheet" />
 		<title>The Homebrewery - NaturalCrit</title>
 		${vitreum.head}
 	</head>

scripts/project.json

@@ -1,7 +1,6 @@
 {
-	"assets": ["*.png","*.otf", "*.ico"],
+	"assets": ["*.png","*.otf", "*.ico", "*.jpg"],
-	"shared":[
+	"shared":["./shared"],
-	],
 	"libs" : [
 		"react",
 		"react-dom",

shared/depricated/phb_style_v1/phb.v1.less

@@ -7,8 +7,8 @@
 }
 
 .phb.v1{
-	@import (less) './phb.fonts.css';
+	@import (less) './phb.fonts.v1.css';
-	@import (less) './phb.assets.less';
+	@import (less) './phb.assets.v1.less';
 
 
 	//Colors

shared/homebrewery/brewEditor/brewEditor.jsx

@@ -35,7 +35,7 @@ const BrewEditor = React.createClass({
 
 	componentDidMount: function() {
 		this.updateEditorSize();
-		//this.highlightPageLines();
+		this.highlightPageLines();
 		window.addEventListener("resize", this.updateEditorSize);
 	},
 	componentWillUnmount: function() {
@@ -89,11 +89,15 @@ const BrewEditor = React.createClass({
 		if(!this.refs.codeEditor) return;
 		const codeMirror = this.refs.codeEditor.codeMirror;
 
-		const lineNumbers = _.reduce(this.props.value.split('\n'), (r, line, lineNumber)=>{
+		const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
 			if(line.indexOf('\\page') !== -1){
 				codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
 				r.push(lineNumber);
 			}
+
+			if(_.startsWith(line, '{{') || _.startsWith(line, '}}')){
+				codeMirror.addLineClass(lineNumber, 'text', 'block');
+			}
 			return r;
 		}, []);
 		return lineNumbers
@@ -134,6 +138,7 @@ const BrewEditor = React.createClass({
 	},
 
 	render : function(){
+		this.highlightPageLines();
 		return <div className='brewEditor' ref='main'>
 			{/*
 			<SnippetBar

shared/homebrewery/brewEditor/brewEditor.less

@@ -8,6 +8,10 @@
 			background-color : fade(#333, 15%);
 			border-bottom    : #333 solid 1px;
 		}
+		.block{
+			color : blue;
+			//font-style: italic;
+		}
 	}
 
 	.brewJump{

shared/homebrewery/markdown.js

@@ -10,7 +10,7 @@ renderer.paragraph = function(text){
 	if(!matches) return `\n<p>${text}</p>\n`;
 	let matchIndex = 0;
 	const res =  _.reduce(text.split(blockReg), (r, text) => {
-		if(text) r.push(`\n<p>${text}</p>\n`);
+		if(text) r.push(Markdown(text, {renderer : renderer, sanitize: true}));
 		const block = matches[matchIndex];
 		if(block && _.startsWith(block, '{{')){
 			r.push(`\n\n<div class="${block.substring(2).split(',').join(' ')}">`);

shared/homebrewery/phb_style/phb.colors.less

@@ -1,6 +1,24 @@
+//TODO: come up with fun color names
+
 @background            : #EEE5CE;
 @noteGreen             : #e0e5c1;
 @headerUnderline       : #c9ad6a;
 @horizontalRule        : #9c2b1b;
 @headerText            : #58180D;
-@monsterStatBackground : #FDF1DC;
+@monsterStatBackground : #FDF1DC;
+
+
+@teal : blue;
+
+
+.colorElements(@color){
+	table tbody{
+		tr:nth-child(odd){
+			background-color : @color;
+		}
+	}
+}
+
+
+//TODO make a color mixin generator
+.teal{ .colorElements(@teal); }

shared/homebrewery/phb_style/phb.fonts.less

@@ -0,0 +1,70 @@
+/* Main Font */
+@font-face {
+	font-family: BookInsanity;
+	src: url('/assets/homebrewery/phb_style/fonts/Bookinsanity.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: BookInsanity;
+	src: url('/assets/homebrewery/phb_style/fonts/Bookinsanity Bold.otf');
+	font-weight: bold;
+	font-style: normal;
+}
+@font-face {
+	font-family: BookInsanity;
+	src: url('/assets/homebrewery/phb_style/fonts/Bookinsanity Italic.otf');
+	font-weight: normal;
+	font-style: italic;
+}
+@font-face {
+	font-family: BookInsanity;
+	src: url('/assets/homebrewery/phb_style/fonts/Bookinsanity Bold Italic.otf');
+	font-weight: bold;
+	font-style: italic;
+}
+
+/* Notes and Tables */
+@font-face {
+	font-family: ScalySans;
+	src: url('/assets/homebrewery/phb_style/fonts/Scaly Sans.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: ScalySansSmallCaps;
+	src: url('/assets/homebrewery/phb_style/fonts/Scaly Sans Caps.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+/* Fancy First Letter */
+@font-face {
+	font-family: Solbera;
+	src: url('/assets/homebrewery/phb_style/fonts/Solbera Imitation.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+/* Headers */
+@font-face {
+	font-family: MrEaves;
+	src: url('/assets/homebrewery/phb_style/fonts/Mr Eaves Small Caps.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+//TODO: move the useSansSerif into here
+
+.useSansSerif(){
+	font-family : ScalySans;
+	em{
+		font-family : ScalySans;
+		font-style  : italic;
+	}
+	strong{
+		font-family    : ScalySans;
+		font-weight    : 800;
+		letter-spacing : -0.02em;
+	}
+}

shared/homebrewery/phb_style/phb.less

@@ -1,4 +1,3 @@
-
 @media print {
 	.phb.v2{
 		.descriptive, blockquote{
@@ -7,27 +6,17 @@
 	}
 }
 
+
+
 .phb.v2{
-	@import (less) './phb.fonts.css';
+	@import './phb.fonts.less';
 	@import './phb.colors.less';
-	@import (less) './phb.img.less';
+	@import './phb.img.less';
 
 
 	@page { margin: 0; }
 
 
-	.useSansSerif(){
-		font-family : ScalySans;
-		em{
-			font-family : ScalySans;
-			font-style  : italic;
-		}
-		strong{
-			font-family    : ScalySans;
-			font-weight    : 800;
-			letter-spacing : -0.02em;
-		}
-	}
 	.useColumns(@multiplier : 1){
 		column-count         : 2;
 		column-fill          : auto;
@@ -54,8 +43,8 @@
 	padding           : 1.0cm 1.7cm;
 	padding-bottom    : 1.5cm;
 	background-color  : @background;
-	background-image  : @backgroundImage;
+	background-image  : @phbBG;
-	font-family       : BookSanity;
+	font-family       : BookInsanity;
 	font-size         : 0.317cm;
 	text-rendering    : optimizeLegibility;
 	page-break-before : always;
@@ -116,7 +105,7 @@
 	h1,h2,h3,h4{
 		margin-top    : 0.2em;
 		margin-bottom : 0.2em;
-		font-family   : MrJeeves;
+		font-family   : MrEaves;
 		font-weight   : 800;
 		color         : @headerText;
 	}
@@ -127,7 +116,7 @@
 		-moz-column-span    : all;
 		&+p::first-letter{
 			float       : left;
-			font-family : Solberry;
+			font-family : Solbera;
 			font-size   : 10em;
 			color       : #222;
 			line-height : 0.8em;
@@ -189,7 +178,7 @@
 		background-color    : @noteGreen;
 		border-style        : solid;
 		border-width        : 11px;
-		border-image        : @noteBorderImage 11;
+		border-image        : @noteBorder 11;
 		border-image-outset : 9px 0px;
 		box-shadow          : 1px 4px 14px #888;
 		p, ul{
@@ -210,7 +199,7 @@
 		background-color : @monsterStatBackground;
 		border-style     : solid;
 		border-width     : 10px;
-		border-image     : @monsterBorderImage 10;
+		border-image     : @monsterBorder 10;
 		h2{
 			margin-top    : -8px;
 			margin-bottom : 0px;
@@ -258,7 +247,7 @@
 			visibility       : visible;
 			height           : 6px;
 			margin           : 4px 0px;
-			background-image : @redTriangleImage;
+			background-image : @dividerImg;
 			background-size  : 100% 100%;
 			border           : none;
 		}
@@ -278,7 +267,7 @@
 		z-index          : 100;
 		height           : 50px;
 		width            : 100%;
-		background-image : @footerAccentImage;
+		background-image : @footerImg;
 		background-size  : cover;
 	}
 	&:nth-child(even){
@@ -416,7 +405,7 @@
 		border-image-outset : 25px 17px;
 		border-image-repeat : round;
 		border-image-slice  : 150 200 150 200;
-		border-image-source : @frameBorderImage;
+		border-image-source : @frameBorder;
 		border-image-width  : 47px;
 		h5{
 			margin-bottom : 10px;
@@ -432,7 +421,7 @@
 		font-family         : ScalySans;
 		border-style        : solid;
 		border-width        : 7px;
-		border-image        : @descriptiveBoxImage 12 round;
+		border-image        : @descriptiveBorder 12 round;
 		border-image-outset : 4px;
 		box-shadow          : 0px 0px 6px #faf7ea;
 		p{
@@ -505,7 +494,7 @@
 		border-image-outset : 37px 17px;
 		border-image-repeat : round;
 		border-image-slice  : 150 200 150 200;
-		border-image-source : @frameBorderImage;
+		border-image-source : @frameBorder;
 		border-image-width  : 47px;
 	}
 	h5+hr+table{