Merge branch 'newStyle' into dualRenderer

client/homebrew/phbStyle/phb.depricated.less

@@ -1,33 +0,0 @@
-.brewRendererOld {
-	.phb_old{
-		//Double hr for full width elements
-		hr+hr+blockquote{
-			column-span         : all;
-			-webkit-column-span : all;
-			-moz-column-span    : all;
-		}
-
-		//*****************************
-		// *      CLASS TABLE
-		// *****************************/
-		hr+table{
-			margin-top          : -5px;
-			margin-bottom       : 50px;
-			padding-top         : 10px;
-			border-collapse     : separate;
-			background-color    : white;
-			border              : initial;
-			border-style        : solid;
-			border-image-outset : 37px 17px;
-			border-image-repeat : round;
-			border-image-slice  : 150 200 150 200;
-			border-image-source : @frameBorderImage;
-			border-image-width  : 47px;
-		}
-		h5+hr+table{
-			column-span         : all;
-			-webkit-column-span : all;
-			-moz-column-span    : all;
-		}
-	}
-}

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/phb.js

@@ -1,6 +1,12 @@
+//DEPRICATE
+
 const less = require('less');
 const fs = require('fs');
 
+
+console.log('you should not b using this');
+
+
 less.render(fs.readFileSync('./client/homebrew/phbStyle/phb.style.less', 'utf8'), {compress : true})
 	.then((output) => {
 		fs.writeFileSync('./phb.standalone.css', output.css);

scripts/project.json

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

server/homebrew.api.js

@@ -1,146 +0,0 @@
-const _ = require('lodash');
-const Moment = require('moment');
-const HomebrewModel = require('./homebrew.model.js').model;
-const router = require('express').Router();
-
-
-
-//TODO: Possiblity remove
-let homebrewTotal = 0;
-const refreshCount = ()=>{
-	HomebrewModel.count({}, (err, total)=>{
-		homebrewTotal = total;
-	});
-};
-refreshCount();
-
-
-
-const getTopBrews = (cb)=>{
-	HomebrewModel.find().sort({views: -1}).limit(5).exec(function(err, brews) {
-		cb(brews);
-	});
-}
-
-const getGoodBrewTitle = (text) => {
-	const titlePos = text.indexOf('# ');
-	if(titlePos !== -1){
-		const ending = text.indexOf('\n', titlePos);
-		return text.substring(titlePos + 2, ending);
-	}else{
-		return _.find(text.split('\n'), (line)=>{
-			return line;
-		});
-	}
-};
-
-
-
-
-
-router.post('/api', (req, res)=>{
-
-	let authors = [];
-	if(req.account) authors = [req.account.username];
-
-	const newHomebrew = new HomebrewModel(_.merge({},
-		req.body,
-		{authors : authors}
-	));
-	if(!newHomebrew.title){
-		newHomebrew.title = getGoodBrewTitle(newHomebrew.text);
-	}
-	newHomebrew.save((err, obj)=>{
-		if(err){
-			console.error(err, err.toString(), err.stack);
-			return res.status(500).send(`Error while creating new brew, ${err.toString()}`);
-		}
-		return res.json(obj);
-	})
-});
-
-router.put('/api/update/:id', (req, res)=>{
-	HomebrewModel.get({editId : req.params.id})
-		.then((brew)=>{
-			brew = _.merge(brew, req.body);
-			brew.updatedAt = new Date();
-			if(req.account) brew.authors = _.uniq(_.concat(brew.authors, req.account.username));
-
-			brew.markModified('authors');
-			brew.markModified('systems');
-
-			brew.save((err, obj)=>{
-				if(err) throw err;
-				return res.status(200).send(obj);
-			})
-		})
-		.catch((err)=>{
-			console.log(err);
-			return res.status(500).send("Error while saving");
-		});
-});
-
-router.get('/api/remove/:id', (req, res)=>{
-	HomebrewModel.find({editId : req.params.id}, (err, objs)=>{
-		if(!objs.length || err) return res.status(404).send("Can not find homebrew with that id");
-		var resEntry = objs[0];
-		resEntry.remove((err)=>{
-			if(err) return res.status(500).send("Error while removing");
-			return res.status(200).send();
-		})
-	});
-});
-
-
-module.exports = router;
-
-/*
-
-
-
-module.exports = function(app){
-
-	app;
-
-
-
-
-	app.get('/api/search', mw.adminOnly, function(req, res){
-
-		var page = req.query.page || 0;
-		var count = req.query.count || 20;
-
-		var query = {};
-		if(req.query && req.query.id){
-			query = {
-				"$or" : [{
-					editId : req.query.id
-				},{
-					shareId : req.query.id
-				}]
-			};
-		}
-
-		HomebrewModel.find(query, {
-			text : 0 //omit the text
-		}, {
-			skip: page*count,
-			limit: count*1
-		}, function(err, objs){
-			if(err) console.log(err);
-			return res.json({
-				page : page,
-				count : count,
-				total : homebrewTotal,
-				brews : objs
-			});
-
-		});
-	})
-
-
-
-
-	return app;
-}
-*/

server/homebrew.model.js

@@ -1,81 +0,0 @@
-var mongoose = require('mongoose');
-var shortid = require('shortid');
-var _ = require('lodash');
-
-var HomebrewSchema = mongoose.Schema({
-	shareId : {type : String, default: shortid.generate, index: { unique: true }},
-	editId : {type : String, default: shortid.generate, index: { unique: true }},
-	title : {type : String, default : ""},
-	text : {type : String, default : ""},
-
-	description : {type : String, default : ""},
-	tags : {type : String, default : ""},
-	systems : [String],
-	authors : [String],
-	published : {type : Boolean, default : false},
-
-	createdAt     : { type: Date, default: Date.now },
-	updatedAt   : { type: Date, default: Date.now},
-	lastViewed  : { type: Date, default: Date.now},
-	views       : {type:Number, default:0},
-	version : {type: Number, default:1}
-}, { versionKey: false });
-
-
-
-HomebrewSchema.methods.sanatize = function(full=false){
-	const brew = this.toJSON();
-	delete brew._id;
-	delete brew.__v;
-	if(full){
-		delete brew.editId;
-	}
-	return brew;
-};
-
-
-HomebrewSchema.methods.increaseView = function(){
-	return new Promise((resolve, reject) => {
-		this.lastViewed = new Date();
-		this.views = this.views + 1;
-		this.save((err) => {
-			if(err) return reject(err);
-			return resolve(this);
-		});
-	});
-};
-
-
-
-HomebrewSchema.statics.get = function(query){
-	return new Promise((resolve, reject) => {
-		Homebrew.find(query, (err, brews)=>{
-			if(err || !brews.length) return reject('Can not find brew');
-			return resolve(brews[0]);
-		});
-	});
-};
-
-HomebrewSchema.statics.getByUser = function(username, allowAccess=false){
-	return new Promise((resolve, reject) => {
-		let query = {authors : username, published : true};
-		if(allowAccess){
-			delete query.published;
-		}
-		Homebrew.find(query, (err, brews)=>{
-			if(err) return reject('Can not find brew');
-			return resolve(_.map(brews, (brew)=>{
-				return brew.sanatize(!allowAccess);
-			}));
-		});
-	});
-};
-
-
-
-var Homebrew = mongoose.model('Homebrew', HomebrewSchema);
-
-module.exports = {
-	schema : HomebrewSchema,
-	model : Homebrew,
-}

shared/depricated/brewRendererOld/brewRendererOld.jsx

@@ -100,13 +100,13 @@ const OLD_BrewRenderer = React.createClass({
 	},
 
 	renderDummyPage : function(index){
-		return <div className='phb old' id={`p${index + 1}`} key={index}>
+		return <div className='phb v1' id={`p${index + 1}`} key={index}>
 			<i className='fa fa-spinner fa-spin' />
 		</div>
 	},
 
 	renderPage : function(pageText, index){
-		return <div className='phb_old' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
+		return <div className='phb v1' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
 	},
 
 	renderPages : function(){

shared/depricated/brewRendererOld/brewRendererOld.less

@@ -1,4 +1,6 @@
 
+@import 'shared/depricated/phb_style_v1/phb.v1.less';
+
 .pane{
 	position : relative;
 }
@@ -28,7 +30,7 @@
 	}
 	.pages{
 		margin : 30px 0px;
-		&>.phb_old{
+		&>.phb{
 			margin-right  : auto;
 			margin-bottom : 30px;
 			margin-left   : auto;

shared/depricated/phb_style_v1/phb.v1.less

@@ -1,23 +1,28 @@
-
+@media print {
-@import (less) 'shared/naturalcrit/styles/reset.less';
+	.phb.v1{
-@import (less) './client/homebrew/phbStyle/phb.fonts.css';
+		.descriptive, blockquote{
-@import (less) './client/homebrew/phbStyle/phb.assets.less';
+			box-shadow : none;
-@import (less) './client/homebrew/phbStyle/phb.depricated.less';
+		}
-//Colors
+	}
-@background            : #EEE5CE;
-@noteGreen             : #e0e5c1;
-@headerUnderline       : #c9ad6a;
-@horizontalRule        : #9c2b1b;
-@headerText            : #58180D;
-@monsterStatBackground : #FDF1DC;
-
-@page { margin: 0; }
-
-//TODO: Change
-.brewRenderer {
-	counter-reset : phb-page-numbers;
 }
-.useSansSerif(){
+
+.phb.v1{
+	@import (less) './phb.fonts.v1.css';
+	@import (less) './phb.assets.v1.less';
+
+
+	//Colors
+	@background            : #EEE5CE;
+	@noteGreen             : #e0e5c1;
+	@headerUnderline       : #c9ad6a;
+	@horizontalRule        : #9c2b1b;
+	@headerText            : #58180D;
+	@monsterStatBackground : #FDF1DC;
+
+	@page { margin: 0; }
+
+
+	.useSansSerif(){
 		font-family : ScalySans;
 		em{
 			font-family : ScalySans;
@@ -28,8 +33,8 @@
 			font-weight    : 800;
 			letter-spacing : -0.02em;
 		}
-}
+	}
-.useColumns(@multiplier : 1){
+	.useColumns(@multiplier : 1){
 		column-count         : 2;
 		column-fill          : auto;
 		column-gap           : 1cm;
@@ -40,8 +45,7 @@
 		-moz-column-width    : 8cm * @multiplier;
 		-webkit-column-gap   : 1cm;
 		-moz-column-gap      : 1cm;
-}
+	}
-.phb{
 	& *{
 		-webkit-print-color-adjust : exact;
 	}
@@ -62,7 +66,7 @@
 	text-rendering    : optimizeLegibility;
 	page-break-before : always;
 	page-break-after  : always;
-	color : red;
+
 	//*****************************
 	// *            BASE
 	// *****************************/
@@ -361,11 +365,11 @@
 		-webkit-column-break-inside : avoid;
 		column-break-inside         : avoid;
 	}
-}
+
-//*****************************
+	//*****************************
-// *         SPELL LIST
+	// *         SPELL LIST
-// *****************************/
+	// *****************************/
-.phb .spellList{
+	.spellList{
 		.useSansSerif();
 		column-count        : 4;
 		column-span         : all;
@@ -386,32 +390,28 @@
 			-webkit-column-break-inside : auto;
 			column-break-inside         : auto;
 		}
-}
+	}
-//*****************************
+	//*****************************
-// *         PRINT
+	// *         PRINT
-// *****************************/
+	// *****************************/
-.phb.print{
+	&.print{
 		blockquote{
 			box-shadow : none;
 		}
-}
-@media print {
-	.phb .descriptive, .phb blockquote{
-		box-shadow : none;
 	}
-}
+
-//*****************************
+	//*****************************
-// *         WIDE
+	// *         WIDE
-// *****************************/
+	// *****************************/
-.phb .wide{
+	.wide{
 		column-span         : all;
 		-webkit-column-span : all;
 		-moz-column-span    : all;
-}
+	}
-//*****************************
+	//*****************************
-// *       CLASS TABLE
+	// *       CLASS TABLE
-// *****************************/
+	// *****************************/
-.phb .classTable{
+	.classTable{
 		margin-top          : 25px;
 		margin-bottom       : 40px;
 		border-collapse     : separate;
@@ -426,11 +426,11 @@
 		h5{
 			margin-bottom : 10px;
 		}
-}
+	}
-//*****************************
+	//*****************************
-// *       CLASS TABLE
+	// *       CLASS TABLE
-// *****************************/
+	// *****************************/
-.phb .descriptive{
+	.descriptive{
 		display             : block-inline;
 		margin-bottom       : 1em;
 		background-color    : #faf7ea;
@@ -457,14 +457,14 @@
 			font-weight    : 800;
 			letter-spacing : -0.02em;
 		}
-}
+	}
-.phb pre+.descriptive{
+	pre+.descriptive{
 		margin-top : 8px;
-}
+	}
-//*****************************
+	//*****************************
-// *      TABLE OF CONTENTS
+	// *      TABLE OF CONTENTS
-// *****************************/
+	// *****************************/
-.phb .toc{
+	.toc{
 		-webkit-column-break-inside : avoid;
 		column-break-inside         : avoid;
 		a{
@@ -481,4 +481,41 @@
 		&>ul>li{
 			margin-bottom : 10px;
 		}
+	}
+
+
+
+	//*****************************
+	// *      Old Stuff
+	// *****************************/
+
+	//Double hr for full width elements
+	hr+hr+blockquote{
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+	}
+
+	//*****************************
+	// *      CLASS TABLE
+	// *****************************/
+	hr+table{
+		margin-top          : -5px;
+		margin-bottom       : 50px;
+		padding-top         : 10px;
+		border-collapse     : separate;
+		background-color    : white;
+		border              : initial;
+		border-style        : solid;
+		border-image-outset : 37px 17px;
+		border-image-repeat : round;
+		border-image-slice  : 150 200 150 200;
+		border-image-source : @frameBorderImage;
+		border-image-width  : 47px;
+	}
+	h5+hr+table{
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+	}
 }

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/brewRenderer/brewRenderer.jsx

@@ -107,13 +107,13 @@ const BrewRenderer = React.createClass({
 	},
 
 	renderDummyPage : function(index){
-		return <div className='phb' id={`p${index + 1}`} key={index}>
+		return <div className='phb v2' id={`p${index + 1}`} key={index}>
 			<i className='fa fa-spinner fa-spin' />
 		</div>
 	},
 
 	renderPage : function(pageText, index){
-		return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
+		return <div className='phb v2' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
 	},
 
 	renderPages : function(){

shared/homebrewery/brewRenderer/brewRenderer.less

@@ -1,5 +1,5 @@
 
-@import (less) './client/homebrew/phbStyle/phb.style.less';
+@import (less) './shared/homebrewery/phb_style/phb.less';
 .pane{
 	position : relative;
 }

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

@@ -0,0 +1,24 @@
+//TODO: come up with fun color names
+
+@background            : #EEE5CE;
+@noteGreen             : #e0e5c1;
+@headerUnderline       : #c9ad6a;
+@horizontalRule        : #9c2b1b;
+@headerText            : #58180D;
+@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.img.less

@@ -0,0 +1,12 @@
+@footerImg         : url('/assets/homebrewery/phb_style/img/footer.png');
+@dividerImg        : url('/assets/homebrewery/phb_style/img/divider.png');
+
+@frameBorder       : url('/assets/homebrewery/phb_style/img/frame_border.png');
+@monsterBorder     : url('/assets/homebrewery/phb_style/img/monster_border.png');
+@noteBorder        : url('/assets/homebrewery/phb_style/img/note_border.png');
+@descriptiveBorder : url('/assets/homebrewery/phb_style/img/desc_border.png');
+
+@phbBG             : url('/assets/homebrewery/phb_style/img/phb_bg.jpg');
+@darkBG            : url('/assets/homebrewery/phb_style/img/phb_dark_bg.jpg');
+@dmgBG             : url('/assets/homebrewery/phb_style/img/dmg_bg.jpg');
+

shared/homebrewery/phb_style/phb.less

@@ -0,0 +1,505 @@
+@media print {
+	.phb.v2{
+		.descriptive, blockquote{
+			box-shadow : none;
+		}
+	}
+}
+
+
+
+.phb.v2{
+	@import './phb.fonts.less';
+	@import './phb.colors.less';
+	@import './phb.img.less';
+
+
+	@page { margin: 0; }
+
+
+	.useColumns(@multiplier : 1){
+		column-count         : 2;
+		column-fill          : auto;
+		column-gap           : 1cm;
+		column-width         : 8cm * @multiplier;
+		-webkit-column-count : 2;
+		-moz-column-count    : 2;
+		-webkit-column-width : 8cm * @multiplier;
+		-moz-column-width    : 8cm * @multiplier;
+		-webkit-column-gap   : 1cm;
+		-moz-column-gap      : 1cm;
+	}
+	& *{
+		-webkit-print-color-adjust : exact;
+	}
+	.useColumns();
+	counter-increment : phb-page-numbers;
+	position          : relative;
+	z-index           : 15;
+	box-sizing        : border-box;
+	overflow          : hidden;
+	height            : 279.4mm;
+	width             : 215.9mm;
+	padding           : 1.0cm 1.7cm;
+	padding-bottom    : 1.5cm;
+	background-color  : @background;
+	background-image  : @phbBG;
+	font-family       : BookInsanity;
+	font-size         : 0.317cm;
+	text-rendering    : optimizeLegibility;
+	page-break-before : always;
+	page-break-after  : always;
+
+
+	//*****************************
+	// *            BASE
+	// *****************************/
+	p{
+		padding-bottom : 0.8em;
+		line-height    : 1.3em;
+		&+p{
+			margin-top : -0.8em;
+		}
+	}
+	ul{
+		margin-bottom       : 0.8em;
+		padding-left        : 1.4em;
+		line-height         : 1.3em;
+		list-style-position : outside;
+		list-style-type     : disc;
+	}
+	ol{
+		margin-bottom       : 0.8em;
+		padding-left        : 1.4em;
+		line-height         : 1.3em;
+		list-style-position : outside;
+		list-style-type     : decimal;
+	}
+	//Indents after p or lists
+	p+p, ul+p, ol+p{
+		text-indent : 1em;
+	}
+	img{
+		z-index : -1;
+	}
+	strong{
+		font-weight    : bold;
+		letter-spacing : 0.03em;
+	}
+	em{
+		font-style : italic;
+	}
+	sup{
+		vertical-align : super;
+		font-size      : smaller;
+		line-height    : 0;
+	}
+	sub{
+		vertical-align : sub;
+		font-size      : smaller;
+		line-height    : 0;
+	}
+	//*****************************
+	// *           HEADERS
+	// *****************************/
+	h1,h2,h3,h4{
+		margin-top    : 0.2em;
+		margin-bottom : 0.2em;
+		font-family   : MrEaves;
+		font-weight   : 800;
+		color         : @headerText;
+	}
+	h1{
+		column-span         : all;
+		font-size           : 0.987cm;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+		&+p::first-letter{
+			float       : left;
+			font-family : Solbera;
+			font-size   : 10em;
+			color       : #222;
+			line-height : 0.8em;
+		}
+	}
+	h2{
+		font-size : 0.705cm;
+	}
+	h3{
+		font-size     : 0.529cm;
+		border-bottom : 2px solid @headerUnderline;
+	}
+	h4{
+		margin-bottom : 0.00em;
+		font-size     : 0.458cm;
+	}
+	h5{
+		margin-bottom : 0.2em;
+		font-family   : ScalySansSmallCaps;
+		font-size     : 0.423cm;
+		font-weight   : 900;
+	}
+	//*****************************
+	// *          TABLE
+	// *****************************/
+	table{
+		.useSansSerif();
+		width         : 100%;
+		margin-bottom : 1em;
+		font-size     : 10pt;
+		thead{
+			font-weight : 800;
+			th{
+				vertical-align : bottom;
+				padding-bottom : 0.3em;
+				padding-right  : 0.1em;
+				padding-left   : 0.1em;
+			}
+		}
+		tbody{
+			tr{
+				td{
+					padding : 0.3em 0.1em;
+				}
+				&:nth-child(odd){
+					background-color : @noteGreen;
+				}
+			}
+		}
+	}
+	//*****************************
+	// *            NOTE
+	// *****************************/
+	blockquote{
+		.useSansSerif();
+		box-sizing          : border-box;
+		margin-bottom       : 1em;
+		padding             : 5px 10px;
+		background-color    : @noteGreen;
+		border-style        : solid;
+		border-width        : 11px;
+		border-image        : @noteBorder 11;
+		border-image-outset : 9px 0px;
+		box-shadow          : 1px 4px 14px #888;
+		p, ul{
+			font-size   : 0.352cm;
+			line-height : 1.1em;
+		}
+	}
+	//If a note starts a column, give it space at the top to render border
+	pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
+		margin-top : 13px;
+	}
+	//*****************************
+	// *    MONSTER STAT BLOCK
+	// *****************************/
+	hr+blockquote{
+		position         : relative;
+		padding-top      : 15px;
+		background-color : @monsterStatBackground;
+		border-style     : solid;
+		border-width     : 10px;
+		border-image     : @monsterBorder 10;
+		h2{
+			margin-top    : -8px;
+			margin-bottom : 0px;
+			&+p{
+				padding-bottom : 0px;
+			}
+		}
+		h3{
+			font-family   : ScalySans;
+			font-weight   : 400;
+			border-bottom : 1px solid @headerText;
+		}
+		hr+ul{
+			color : @headerText;
+		}
+		ul{
+			.useSansSerif();
+			padding-left : 1em;
+			font-size    : 0.352cm;
+		}
+		// Monster Ability table
+		hr+table{
+			margin              : 0;
+			column-span         : 1;
+			background-color    : transparent;
+			border-style        : none;
+			border-image        : none;
+			-webkit-column-span : 1;
+			tbody{
+				tr:nth-child(odd), tr:nth-child(even){
+					background-color : transparent;
+				}
+			}
+		}
+		table{
+			color : @headerText;
+		}
+		p+p{
+			margin-top     : 0em;
+			padding-bottom : 0.5em;
+			text-indent    : 0em;
+		}
+		//Triangle dividers
+		hr{
+			visibility       : visible;
+			height           : 6px;
+			margin           : 4px 0px;
+			background-image : @dividerImg;
+			background-size  : 100% 100%;
+			border           : none;
+		}
+	}
+	//Full Width
+	hr+hr+blockquote{
+		.useColumns(0.96);
+	}
+	//*****************************
+	// *           FOOTER
+	// *****************************/
+	&:after{
+		content          : "";
+		position         : absolute;
+		bottom           : 0px;
+		left             : 0px;
+		z-index          : 100;
+		height           : 50px;
+		width            : 100%;
+		background-image : @footerImg;
+		background-size  : cover;
+	}
+	&:nth-child(even){
+		&:after{
+			transform : scaleX(-1);
+		}
+		.pageNumber{
+			left : 2px;
+		}
+		.footnote{
+			left       : 80px;
+			text-align : left;
+		}
+	}
+	.pageNumber{
+		position   : absolute;
+		right      : 2px;
+		bottom     : 22px;
+		width      : 50px;
+		font-size  : 0.9em;
+		color      : #c9ad6a;
+		text-align : center;
+		&.auto::after {
+			content : counter(phb-page-numbers);
+		}
+	}
+	.footnote{
+		position   : absolute;
+		right      : 80px;
+		bottom     : 32px;
+		z-index    : 150;
+		width      : 200px;
+		font-size  : 0.8em;
+		color      : #c9ad6a;
+		text-align : right;
+	}
+	//*****************************
+	// *          EXTRAS
+	// *****************************/
+	hr{
+		visibility : hidden;
+		margin     : 0px;
+	}
+	//Modified unorder list, used in spells
+	hr+ul{
+		margin-bottom   : 0.5em;
+		padding-left    : 1em;
+		text-indent     : -1em;
+		list-style-type : none;
+	}
+	//Column Break
+	pre, code{
+		visibility                 : hidden;
+		-webkit-column-break-after : always;
+		break-after                : always;
+		-moz-column-break-after    : always;
+	}
+	//Avoid breaking up
+	p,blockquote,table{
+		z-index                     : 15;
+		-webkit-column-break-inside : avoid;
+		column-break-inside         : avoid;
+		overflow: hidden; /* Firefox fix */
+	}
+	//Better spacing for spell blocks
+	h4+p+hr+ul{
+		margin-top : -0.5em
+	}
+	//Text indent right after table
+	table+p{
+		text-indent : 1em;
+	}
+	// Nested lists
+	ul ul,ol ol,ul ol,ol ul{
+		margin-bottom : 0px;
+		margin-left   : 1.5em;
+	}
+	li{
+		-webkit-column-break-inside : avoid;
+		column-break-inside         : avoid;
+	}
+
+	//*****************************
+	// *         SPELL LIST
+	// *****************************/
+	.spellList{
+		.useSansSerif();
+		column-count        : 4;
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+		ul+h5{
+			margin-top : 15px;
+		}
+		p, ul{
+			font-size   : 0.352cm;
+			line-height : 1.3em;
+		}
+		ul{
+			margin-bottom               : 0.5em;
+			padding-left                : 1em;
+			text-indent                 : -1em;
+			list-style-type             : none;
+			-webkit-column-break-inside : auto;
+			column-break-inside         : auto;
+		}
+	}
+	//*****************************
+	// *         PRINT
+	// *****************************/
+	&.print{
+		blockquote{
+			box-shadow : none;
+		}
+	}
+
+	//*****************************
+	// *         WIDE
+	// *****************************/
+	.wide{
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+	}
+	//*****************************
+	// *       CLASS TABLE
+	// *****************************/
+	.classTable{
+		margin-top          : 25px;
+		margin-bottom       : 40px;
+		border-collapse     : separate;
+		background-color    : white;
+		border              : initial;
+		border-style        : solid;
+		border-image-outset : 25px 17px;
+		border-image-repeat : round;
+		border-image-slice  : 150 200 150 200;
+		border-image-source : @frameBorder;
+		border-image-width  : 47px;
+		h5{
+			margin-bottom : 10px;
+		}
+	}
+	//*****************************
+	// *       CLASS TABLE
+	// *****************************/
+	.descriptive{
+		display             : block-inline;
+		margin-bottom       : 1em;
+		background-color    : #faf7ea;
+		font-family         : ScalySans;
+		border-style        : solid;
+		border-width        : 7px;
+		border-image        : @descriptiveBorder 12 round;
+		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 : ScalySans;
+			font-style  : italic;
+		}
+		strong {
+			font-family    : ScalySans;
+			font-weight    : 800;
+			letter-spacing : -0.02em;
+		}
+	}
+	pre+.descriptive{
+		margin-top : 8px;
+	}
+	//*****************************
+	// *      TABLE OF CONTENTS
+	// *****************************/
+	.toc{
+		-webkit-column-break-inside : avoid;
+		column-break-inside         : avoid;
+		a{
+			color           : black;
+			text-decoration : none;
+			&:hover{
+				text-decoration : underline;
+			}
+		}
+		ul{
+			padding-left    : 0;
+			list-style-type : none;
+		}
+		&>ul>li{
+			margin-bottom : 10px;
+		}
+	}
+
+
+
+	//*****************************
+	// *      Old Stuff
+	// *****************************/
+
+	//Double hr for full width elements
+	hr+hr+blockquote{
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+	}
+
+	//*****************************
+	// *      CLASS TABLE
+	// *****************************/
+	hr+table{
+		margin-top          : -5px;
+		margin-bottom       : 50px;
+		padding-top         : 10px;
+		border-collapse     : separate;
+		background-color    : white;
+		border              : initial;
+		border-style        : solid;
+		border-image-outset : 37px 17px;
+		border-image-repeat : round;
+		border-image-slice  : 150 200 150 200;
+		border-image-source : @frameBorder;
+		border-image-width  : 47px;
+	}
+	h5+hr+table{
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+	}
+}

statics/test.brew.md

@@ -1,6 +1,129 @@
+# The Homebrewery
+Welcome traveler from an antique land. Please sit and tell us of what you have seen. The unheard of monsters, who slither and bite. Tell us of the wondrous items and and artifacts you have found, their mysteries yet to be unlocked. Of the vexing vocations and surprising skills you have seen.
 
-# Test brew!
+### Homebrew D&D made easy
+The Homebrewery makes the creation and sharing of authentic looking Fifth-Edition homebrews easy. It uses [Markdown](https://help.github.com/articles/markdown-basics/) with a little CSS magic to make your brews come to life.
+
+**Try it! **Simply edit the text on the left and watch it *update live* on the right.
+
+
+
+### Editing and Sharing
+When you create your own homebrew you will be given a *edit url* and a *share url*.  Any changes you make will be automatically saved to the database within a few seconds. Anyone with the edit url will be able to make edits to your homebrew. So be careful about who you share it with.
+
+Anyone with the *share url* will be able to access a read-only version of your homebrew.
+
+## Helping out
+Like this tool? Want to buy me a beer? [Head here](https://www.patreon.com/stolksdorf) to help me keep the servers running.
+
+This tool will **always** be free, never have ads, and I will never offer any "premium" features or whatever.
+
+
+
+>##### PDF Exporting
+> PDF Printing works best in Chrome. If you are having quality/consistency issues, try using Chrome to print instead.
+>
+> After clicking the "Print" item in the navbar a new page will open and a print dialog will pop-up.
+> * Set the **Destination** to "Save as PDF"
+> * Set **Paper Size** to "Letter"
+> * If you are printing on A4 paper, make sure to have the "A4 page size snippet" in your brew
+> * In **Options** make sure "Background Images" is selected.
+> * Hit print and enjoy! You're done!
+>
+> If you want to save ink or have a monochrome printer, add the **Ink Friendly** snippet to your brew before you print
+
+
+```
+```
+
+## Big things coming in v3.0.0
+With the next major release of Homebrewery, v3.0.0, this tool *will no longer support raw HTML input for brew code*. All brews made previous to the release of v3.0.0 will still render normally.
+
+## New Things All The Time!
+What's new in the latest update? Check out the full changelog [here](/changelog)
+
+### Bugs, Issues, Suggestions?
+Have an idea of how to make The Homebrewery better? Or did you find something that wasn't quite right? Head [here](https://github.com/stolksdorf/homebrewery/issues/new) and let me know!.
+
+### Legal Junk
+The Homebrewery is licensed using the [MIT License](https://github.com/stolksdorf/homebrewery/blob/master/license). Which means you are free to use The Homebrewery is any way that you want, except for claiming that you made it yourself.
+
+If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
+
+### More Resources
+If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/comments/3uwxx9/resources_open_to_the_community/).
+
+
+
+<img src='http://i.imgur.com/hMna6G0.png' style='position:absolute;bottom:50px;right:30px;width:280px' />
+
+<div class='pageNumber'>1</div>
+<div class='footnote'>PART 1 | FANCINESS</div>
+
+
+
+
+\page
+
+
+{{classTable,wide
+##### The Archivist
+| Level | Proficiency Bonus | Features | Statistical Occultism|
+|:---:|:---:|:---|:---:|
+| 1st | +2 | Astrological Botany | +1 |
+| 2nd | +2 | Genetic Banishing | +1 |
+| 3rd | +2 | Genetic Banishing | +2 |
+| 4th | +2 | Ability Score Improvement, Statistical Occultism | +3 |
+| 5th | +3 | Demonic Anthropology | +4 |
+| 6th | +3 | Ability Score Improvement | +5 |
+| 7th | +3 | Astrological Chemistry | +5 |
+| 8th | +3 | Ability Score Improvement, Plasma Outlaw | +6 |
+| 9th | +4 | Consecrated Biochemistry | +7 |
+| 10th | +4 | Statistical Occultism | +8 |
+| 11th | +4 | Ritual Astronomy | +8 |
+| 12th | +4 | Ability Score Improvement | +8 |
+| 13th | +5 | Astrological Botany | +9 |
+| 14th | +5 | Ability Score Improvement | +10 |
+| 15th | +5 | Divinatory Mineralogy | +10 |
+| 16th | +5 | Ability Score Improvement, Gunpowder Torturer | +10 |
+| 17th | +6 | ─ | +11 |
+| 18th | +6 | Infernal Banker | +11 |
+| 19th | +6 | Ability Score Improvement | +12 |
+| 20th | +6 | Infernal Banker | +12 |
+}}
+
+
+
+# Appendix
+
+### Not quite Markdown
+Although the Homebrewery uses Markdown, to get all the styling features from the PHB, we had to get a little creative. Some base HTML elements are not used as expected and I've had to include a few new keywords.
+
+___
+* **Horizontal Rules** are generally used to *modify* existing elements into a different style. For example, a horizontal rule before a blockquote will give it the style of a Monster Stat Block instead of a note.
+* **New Pages** are controlled by the author. It's impossible for the site to detect when the end of a page is reached, so indicate you'd like to start a new page, use the new page snippet to get the syntax.
+* **Code Blocks** are used only to indicate column breaks. Since they don't allow for styling within them, they weren't that useful to use.
+* **HTML** can be used to get *just* the right look for your homebrew. I've included some examples in the snippet icons above the editor.
+
+
+
+```
+```
+
+
+### Images
+Images must be hosted online somewhere, like imgur. You use the address to that image to reference it in your brew. Images can be included 'inline' with the text using Markdown-style images. However for background images more control is needed.
+
+Background images should be included as HTML-style img tags. Using inline CSS you can precisely position your image where you'd like it to be. I have added both a inflow image snippet and a background image snippet to give you exmaples of how to do it.
+
+
+
+### Crediting Me
+If you'd like to credit The Homebrewery in your brew, I'd be flattered! Just reference that you made it with The Homebrewery.
+
+
+
+<div class='pageNumber'>2</div>
+<div class='footnote'>PART 2 | BORING STUFF</div>
 
-hwllo there???
 
-Can you even work?