homebrewery/client/naturalCrit/homebrew/phb/phb.less

.pbhPages{
	&>.phb{
		margin-bottom : 40px;
		margin-left   : 400px;
	}
}
@font-face {
	font-family : BookInsanity;
	src         : url('/assets/naturalCrit/homebrew/assets/Bookinsanity.otf');
}
@font-face {
	font-family : BookInsanityBold;
	src         : url('/assets/naturalCrit/homebrew/assets/Bookinsanity Bold.otf');
}
@font-face {
	font-family : BookInsanityItalic;
	src         : url('/assets/naturalCrit/homebrew/assets/Bookinsanity Italic.otf');
}
@font-face {
	font-family : BookInsanityBoldItalic;
	src         : url('/assets/naturalCrit/homebrew/assets/Bookinsanity Bold Italic.otf');
}
@font-face {
	font-family : ScalaSans;
	src         : url('/assets/naturalCrit/homebrew/assets/Scaly Sans.otf');
}
/*
@font-face {
	font-family : ScalaSansBold;
	src         : url('/assets/naturalCrit/homebrew/assets/Scala Sans Bold.ttf');
}
*/
@font-face {
	font-family : ScalaSansSmallCaps;
	src         : url('/assets/naturalCrit/homebrew/assets/Scala Sans SmallCaps.ttf');
}
@font-face {
	font-family : Solbera;
	src         : url('/assets/naturalCrit/homebrew/assets/Solbera Imitation.otf');
}
@font-face {
	font-family : MrEaves;
	src         : url('/assets/naturalCrit/homebrew/assets/MrsEavesSmallCaps_Regular.ttf') format('truetype'),
	url('/assets/naturalCrit/homebrew/assets/Mr Eaves Small Caps.otf') format('otf');
}
.phb{
	@background          : #f2ece4;
	@green               : #e0e5c1;
	@headerUnderline     : #c9ad6a;
	@horizontalRule      : #9c2b1b;
	@header              : #58180D;
	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-image     : url('/assets/naturalCrit/homebrew/assets/PHB-background.png');
	-webkit-column-count : 2;
	-moz-column-count    : 2;
	-webkit-column-width : 8cm;
	-moz-column-width    : 8cm;
	-webkit-column-gap   : 1cm;
	text-rendering       : optimizeLegibility;


	p,ul,blockquote{
		-webkit-column-break-inside : avoid;
		-moz-column-break-inside    : avoid;
		-o-column-break-inside      : avoid;
		-ms-column-break-inside     : avoid;
		column-break-inside         : avoid;
	}

	p,ul{
		strong{
			font-family : BookInsanityBold;
			em{
				font-family : BookInsanityBoldItalic;
			}
		}
		em{
			font-family : BookInsanityItalic;
		}
	}
	p {
		padding-bottom : 1em;
		font-family    : BookInsanity;
		font-size      : 9pt;
		line-height    : 1.3em;
		&+p{
			margin-top  : -1em;
			text-indent : 1em;
		}
	}
	ul{
		margin-bottom       : 1em;
		font-family         : BookInsanity;
		font-size           : 9pt;
		line-height         : 1.3em;
		list-style-position : inside;
		list-style-type     : disc;
	}


	hr+table{
		-webkit-column-span : all;
		column-span : all;
	}
	table{
		width         : 100%;
		margin-bottom : 1em;
		font-family   : ScalaSans;
		font-size     : 10pt;
		thead{
			font-weight : 800;
			th{
				padding-bottom : 0.3em;
			}
		}
		tr{
			td{
				padding : 0.2em 0em;
			}
			&:nth-child(even){
				background : @green;
			}
		}
	}
	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: ScalaSans;
			font-weight: 400;
			border-bottom: 1px solid @header;
		}

		ul{
			list-style-type: none;
			font-family: ScalaSans;
			color : @header;
			font-size: 10pt;
			text-indent: -1em;
			padding-left: 1em;
			strong{
				font-family: ScalaSans;
				font-weight: 800;
			}
		}

		hr+table{
			-webkit-column-span : 1;
			column-span : 1;
		}
		table{
			color : @header;
		}

		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 : @green;
		font-family      : ScalaSans;
		border-top       : 2px black solid;
		border-bottom    : 2px black solid;
		box-shadow       : 1px 4px 14px #888;
		p{
			font-family : ScalaSans;
			font-size   : 10pt;
			line-height : 1.1em;
			em{
				font-family : ScalaSans;
				font-style  : italic;
			}
			strong{
				font-weight : 800;
				font-family : ScalaSans;
				em{
					font-style  : italic;
					font-weight : 800;
				}
			}
		}
	}
	pre{
	}
	h1,h2,h3,h4{
		margin-top    : 0.2em;
		margin-bottom : 0.2em;
		font-family   : MrEaves;
		font-weight   : 800;
		color         : @header;
	}
	h1{
		column-span         : all;
		font-size           : 28pt;
		-webkit-column-span : all;
		&+p{
			&::first-letter{
				float         : left;
				margin-top    : 20px;
				margin-bottom : 10px;
				font-family   : Solbera;
				font-size     : 4.5em;
			}
		}
	}
	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   : ScalaSansSmallCaps;
		font-size     : 13pt;
		font-weight   : 900;
	}
}