Converted the monster block to use border iamges

client/homebrew/editor/editor.less

@@ -39,8 +39,6 @@
 					padding   : 10px;
 					cursor    : pointer;
 					font-size : 13px;
-					//font-weight: 800;
-					//text-transform: uppercase;
 					i{
 						margin-right: 8px;
 					}

client/homebrew/editor/snippets/classfeature.gen.js

@@ -24,13 +24,13 @@ module.exports = function(classname){
 		"",
 		"#### Proficiencies",
 		"___",
-		"- **Armor:** " + (_.sample(["Light armor", "Medium armor", "Heavy armor", "Shields"], _.random(0,3)).join(', ') || "None"),
+		"- **Armor:** " + (_.sampleSize(["Light armor", "Medium armor", "Heavy armor", "Shields"], _.random(0,3)).join(', ') || "None"),
-		"- **Weapons:** " + (_.sample(["Squeegee", "Rubber Chicken", "Simple weapons", "Martial weapons"], _.random(0,2)).join(', ') || "None"),
+		"- **Weapons:** " + (_.sampleSize(["Squeegee", "Rubber Chicken", "Simple weapons", "Martial weapons"], _.random(0,2)).join(', ') || "None"),
-		"- **Tools:** " + (_.sample(["Artian's tools", "one musical instrument", "Thieve's tools"], _.random(0,2)).join(', ') || "None"),
+		"- **Tools:** " + (_.sampleSize(["Artian's tools", "one musical instrument", "Thieve's tools"], _.random(0,2)).join(', ') || "None"),
 		"",
 		"___",
-		"- **Saving Throws:** " + (_.sample(abilityList, 2).join(', ')),
+		"- **Saving Throws:** " + (_.sampleSize(abilityList, 2).join(', ')),
-		"- **Skills:** Choose two from " + (_.sample(skillList, _.random(4, 6)).join(', ')),
+		"- **Skills:** Choose two from " + (_.sampleSize(skillList, _.random(4, 6)).join(', ')),
 		"",
 		"#### Equipment",
 		"You start with the following equipment, in addition to the equipment granted by your background:",

client/homebrew/editor/snippets/monsterblock.gen.js

@@ -1,7 +1,7 @@
 var _ = require('lodash');
 
 var genList = function(list, max){
-	return _.sample(list, _.random(0,max)).join(', ') || "None";
+	return _.sampleSize(list, _.random(0,max)).join(', ') || "None";
 }
 
 var getMonsterName = function(){

client/homebrew/homebrew.jsx

@@ -4,7 +4,7 @@ var cx = require('classnames');
 
 var CreateRouter = require('pico-router').createRouter;
 
-var HomePage = require('./pages/homePage/homePage.jsx');
+var MainPage = require('./pages/mainPage/mainPage.jsx');
 var EditPage = require('./pages/editPage/editPage.jsx');
 var SharePage = require('./pages/sharePage/sharePage.jsx');
 var NewPage = require('./pages/newPage/newPage.jsx');
@@ -41,7 +41,7 @@ var Homebrew = React.createClass({
 			'/homebrew/new' : (args) => {
 				return <NewPage />
 			},
-			'/homebrew*' : <HomePage welcomeText={this.props.welcomeText} />,
+			'/homebrew*' : <MainPage welcomeText={this.props.welcomeText} />,
 		});
 	},
 	render : function(){

client/homebrew/phbStyle/phb.style.less

@@ -186,8 +186,11 @@
 	hr+blockquote{
 		position         : relative;
 		background-color : @monsterStatBackground;
-		border           : none;
+		//border           : none;
 		padding-top: 15px;
+
+		border-image : @monsterBorderImage 10;
+		border-width : 10px;
 		h2{
 			margin-top: -8px;
 			margin-bottom : 0px;
@@ -231,27 +234,15 @@
 		}
 		//Triangle dividers
 		hr{
-			@height      : 3px;
+			visibility: visible;
-			position     : relative;
+			border: none;
-			visibility   : visible;
+			height: 6px;
-			margin       : 8px 0px;
+			margin: 4px 0px;
-			border-color : transparent;
+			background-image: @redTriangleImage;
-			&:after, &:before{
+			background-size: 100% 100%;
-				content  : "";
-				position : absolute;
-				left     : 0px;
-				height   : @height;
-				width    : 100%;
-			}
-			&: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%)
-			}
 		}
+
+		/*
 		//Top and Bottom Borders
 		&:after, &:before{
 			content          : "";
@@ -270,6 +261,7 @@
 			bottom : 0px;
 			left   : -3px;
 		}
+		*/
 	}
 	//Full Width
 	hr+hr+blockquote{