ADding in stlying and snippet for a descriptive text box

changelog.md

@@ -1,5 +1,8 @@
 # changelog
 
+### Friday, 29/07/2016
+- Adding in descriptive note blocks. (Thanks calculuschild!)
+
 ### Thursday, 07/07/2016 - v2.2.6
 - Added a new nav item on the homepage for accessing both recently viewed and edited brews (thanks [ChosenSeraph!](https://github.com/stolksdorf/homebrewery/issues/147))
 

client/homebrew/editor/snippets/snippets.js

@@ -107,6 +107,20 @@ module.exports = [
 					].join('\n');
 				},
 			},
+			{
+				name : 'Descriptive Text Box',
+				icon : 'fa-sticky-note-o',
+				gen : function(){
+					return [
+						"<div class='descriptive'>",
+						"##### Time to Drop Knowledge",
+						"Use notes to point out some interesting information. ",
+						"",
+						"**Tables and lists** both work within a note.",
+						"</div>"
+					].join('\n');
+				},
+			},
 			{
 				name : 'Monster Stat Block',
 				icon : 'fa-bug',

client/homebrew/navbar/navbar.jsx

@@ -34,7 +34,7 @@ var Navbar = React.createClass({
 				<Nav.item href='/' className='homebrewLogo'>
 					<div>The Homebrewery</div>
 				</Nav.item>
-				<Nav.item>v2.2.6</Nav.item>
+				<Nav.item>v2.2.7</Nav.item>
 
 				{this.renderChromeWarning()}
 			</Nav.section>

client/homebrew/phbStyle/phb.assets.less

@@ -4,3 +4,4 @@
 @redTriangleImage: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAeCAYAAACR82geAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4zjOaXUAAAAt5JREFUaEPtWTtoVEEUHf8iaEjMZt/ME6Jx3X1zlwgavyAICoL4aRWFIFYWAUURLZQo+GkUTGHc92Y2q2AKI0oKLbQIKRS0UPxCilgEFIKCTYIfyBrPi4NImGKJyWZ3Xw4cpth9b84c7ty59w3TaXdAS3FXEz8VkLtNp5YuZjNgoTGj/1KRGNEkXoEqkM4RmLamlbG55u/RwXhj7BRDMKw3kPyKkmKflk69ebxyYTeiAJL4CLO6AynOaI/v8Buqq8wrKwPWRU+Ef7bgOy3dm4p4i0456/wmNs9MU36wLnKySO4wzHqCyLoGsw4EyfiKUcZmmalLG9YFTSVJDMKkB0ryc1np7OxsrKo2UkoLVvHFJLl5GNWHpH5bS35UUXxDWyKxwMibPljFTjdJfMP2ewbDrgee06xWxhIoGWYbycWBVViJMQvCqM/go4D4Be25u/wkr4X8qctXNiFlwjwiqx9RdQfj8ZznbvI5X2SW9f+wTFi+JPEdfIHaysd4SKdEqnXrBKt26wQVQrMFv+IE7MlKcakjLfbkKOYUVDLYXljhzOMEHEBU3UMfeDJLfIu1cbY8GDmqtPiJyHoDaph1OJOqa5wxBgyNCUi8DY3pgDEqWbc6csaotPsLUTEAE+7rdES30t/kS7wHJlzGSbU349Xy6CVfEj9gwksk1yDKxzV6LPEBlXAXxhPaE5v9pogVeOGWQAR8AR/DhIuBJ3ZnE04M8iPWEqCJRIJ8jmhohynNimKJLsbmGMnFgVVYMTn22cHtgxGdgcePZWR8Y66+fqGRN32wip1KkhgEHwaSnw8/VClaVmOklBas4ieL5A7jlHiK4qlNEz/YvqquIXqfNkmMoIJ8j+R4C2a0+ElnfSux+Waa8oN1kQUwS+ITzOhWnjir05G9PhFDMKEX7ftV1Av7b6Tiy83jlYvxJmArhPdDrzHq8Io24/G1Ub2iHbvURzN1GuP2tkTNEvNThMHYbySiA8IawOrpAAAAAElFTkSuQmCC);
 @monsterBorderImage: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAMAAADG+c2+AAAACVBMVEX///8AAADmmihtJc8lAAAAAXRSTlMAQObYZgAAACxJREFUeAHt2EEBACAAwkCwf2hL8NK7AAuwdCw9U5Og4FgeAAAAAK7IBxPjAl3qBs+hfAnLAAAAAElFTkSuQmCC);
 @noteBorderImage:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAMAAADG+c2+AAAANlBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABHL6OuAAAAEXRSTlMABAwYJDRIXHSLo7fL2+fz+6go4VUAAAB6SURBVHgB7dg5DsJQAANRZ9+Xuf9lQUKKEHT5LlL4HWB6W5d61m1zrT/dhm5j6/RjPCkJco761ixQFoSl0aXfKQ+y9/qoJnAEYar01q64gqytNBz4ghyDMPMHnyYiIiIiIgIzYeYfj/Z56x3g7ovAf2L4bxb/EWS/ql7LZCDx/Ry3RwAAAABJRU5ErkJggg==);
+@descriptiveBoxImage : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAMAAADG+c2+AAAAM1BMVEUAAAAAAAAAAAAkAAA1GwA0GgA5GgA5GwA4HgA7HgA5HgA7HgA7HwA7HgA8HgA7HgA8HwDn6RpAAAAAEHRSTlMAAQcHMDExQ1ZW1dXY3t7+02zZCAAAAKNJREFUWMPt2LEOwyAMBNCkSXGpKfb/f20G3AGUiWOJdNlueYrt6di2J3xHrmZF9mVCdnd3T/NgCO+ItUWdB0P4RrQWfR4chOVggUcu/cgCH0X6o+ynuivg3QjIAm8FggQJEiRIkCBBggQJEoTApO56An15EFIrVgJ4vaAtlnlwEKKbGrLATlgOxg9XeORfv9IMH+Xzb7tSzGo+gL7chNcjXpUulIwXVrjWS+0AAAAASUVORK5CYII=");

client/homebrew/phbStyle/phb.style.less

@@ -12,7 +12,7 @@
 @monsterStatBackground : #FDF1DC;
 @page { margin: 0; }
 body {
-	counter-reset: phb-page-numbers;
+	counter-reset : phb-page-numbers;
 }
 .useSansSerif(){
 	font-family : ScalySans;
@@ -40,7 +40,7 @@ body {
 }
 .phb{
 	.useColumns();
-	counter-increment: phb-page-numbers;
+	counter-increment : phb-page-numbers;
 	position          : relative;
 	z-index           : 15;
 	box-sizing        : border-box;
@@ -63,7 +63,7 @@ body {
 		padding-bottom : 0.8em;
 		line-height    : 1.3em;
 		&+p{
-			margin-top  : -0.8em;
+			margin-top : -0.8em;
 		}
 	}
 	ul{
@@ -218,12 +218,12 @@ body {
 			border-bottom : 1px solid @headerText;
 		}
 		hr+ul{
-			color           : @headerText;
+			color : @headerText;
 		}
 		ul{
 			.useSansSerif();
-			padding-left    : 1em;
+			padding-left : 1em;
-			font-size       : 0.352cm;
+			font-size    : 0.352cm;
 		}
 		// Monster Ability table
 		hr+table{
@@ -261,7 +261,6 @@ body {
 	hr+hr+blockquote{
 		.useColumns(0.96);
 	}
-
 	//*****************************
 	// *           FOOTER
 	// *****************************/
@@ -295,10 +294,8 @@ body {
 		font-size  : 0.9em;
 		color      : #c9ad6a;
 		text-align : center;
-
 		&.auto::after {
-
+			content : counter(phb-page-numbers);
-			content: counter(phb-page-numbers);
 		}
 	}
 	.footnote{
@@ -324,7 +321,6 @@ body {
 		text-indent     : -1em;
 		list-style-type : none;
 	}
-
 	//Column Break
 	pre, code{
 		visibility                 : hidden;
@@ -386,8 +382,6 @@ body {
 		box-shadow : none;
 	}
 }
-
-
 //*****************************
 // *         WIDE
 // *****************************/
@@ -396,14 +390,11 @@ body {
 	-webkit-column-span : all;
 	-moz-column-span    : all;
 }
-
-
 //*****************************
 // *       CLASS TABLE
 // *****************************/
-
 .phb .classTable{
-	margin-top       : 25px;
+	margin-top          : 25px;
 	margin-bottom       : 40px;
 	border-collapse     : separate;
 	background-color    : white;
@@ -415,6 +406,40 @@ body {
 	border-image-source : @frameBorderImage;
 	border-image-width  : 47px;
 	h5{
-		margin-bottom: 10px;
+		margin-bottom : 10px;
 	}
 }
+//*****************************
+// *       CLASS TABLE
+// *****************************/
+.phb .descriptive{
+	display             : block-inline;
+	margin-bottom       : 1em;
+	background-color    : #faf7ea;
+	font-family         : ScalySans;
+	border-style        : solid;
+	border-width        : 7px;
+	border-image        : @descriptiveBoxImage 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;
+	}
+}
+.phb pre+.descriptive{
+	margin-top : 8px;
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "scripts": {
     "postinstall": "gulp prod",
     "start": "node server.js"

phb.standalone.css

@@ -589,3 +589,34 @@ body {
 .phb .classTable h5 {
   margin-bottom: 10px;
 }
+.phb .descriptive {
+  display: block-inline;
+  margin-bottom: 1em;
+  background-color: #faf7ea;
+  font-family: ScalySans;
+  border-style: solid;
+  border-width: 7px;
+  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAMAAADG+c2+AAAAM1BMVEUAAAAAAAAAAAAkAAA1GwA0GgA5GgA5GwA4HgA7HgA5HgA7HgA7HwA7HgA8HgA7HgA8HwDn6RpAAAAAEHRSTlMAAQcHMDExQ1ZW1dXY3t7+02zZCAAAAKNJREFUWMPt2LEOwyAMBNCkSXGpKfb/f20G3AGUiWOJdNlueYrt6di2J3xHrmZF9mVCdnd3T/NgCO+ItUWdB0P4RrQWfR4chOVggUcu/cgCH0X6o+ynuivg3QjIAm8FggQJEiRIkCBBggQJEoTApO56An15EFIrVgJ4vaAtlnlwEKKbGrLATlgOxg9XeORfv9IMH+Xzb7tSzGo+gL7chNcjXpUulIwXVrjWS+0AAAAASUVORK5CYII=") 12 round;
+  border-image-outset: 4px;
+  box-shadow: 0px 0px 6px #faf7ea;
+}
+.phb .descriptive p {
+  display: block;
+  padding-bottom: 0px;
+  line-height: 1.5em;
+}
+.phb .descriptive p + p {
+  padding-top: .8em;
+}
+.phb .descriptive em {
+  font-family: ScalySans;
+  font-style: italic;
+}
+.phb .descriptive strong {
+  font-family: ScalySans;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+.phb pre + .descriptive {
+  margin-top: 8px;
+}