0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-09 22:22:41 +00:00

Finished the monster stat block, using hr's as element modifiers, kinda weird.

This commit is contained in:
Scott Tolksdorf
2015-12-19 18:26:35 -05:00
parent 11b2f9dd53
commit ad569f04d8
8 changed files with 3610 additions and 53 deletions

View File

@@ -12,8 +12,8 @@ var Phb = React.createClass({
},
renderPages : function(){
return _.map(this.props.text.split('\page'), (pageText, index) => {
return <div className='phb' dangerouslySetInnerHTML={{__html:Markdown(this.props.text)}} key={index} />
return _.map(this.props.text.split('\\page'), (pageText, index) => {
return <div className='phb' dangerouslySetInnerHTML={{__html:Markdown(pageText)}} key={index} />
})
},

View File

@@ -25,10 +25,12 @@
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');
@@ -54,21 +56,26 @@
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;
column-gap : 1cm;
-webkit-column-gap : 1cm;
-webkit-column-gap : 1cm;
text-rendering : optimizeLegibility;
p,ul{
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{
@@ -97,6 +104,12 @@
list-style-position : inside;
list-style-type : disc;
}
hr+table{
-webkit-column-span : all;
column-span : all;
}
table{
width : 100%;
margin-bottom : 1em;
@@ -117,38 +130,152 @@
}
}
}
blockquote{
background-color : @green;
font-family : ScalaSans;
box-sizing: border-box;
padding : 5px 10px;
border-top : 2px black solid;
border-bottom : 2px black solid;
box-shadow: 1px 4px 14px #888;
margin-bottom: 1em;
p{
font-family : ScalaSans;
font-size: 10pt;
line-height: 1.1em;
em{
font-family : ScalaSans;
font-style: italic;
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;
em{
font-weight: 800;
font-style: italic;
}
}
}
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;
@@ -166,7 +293,7 @@
margin-top : 20px;
margin-bottom : 10px;
font-family : Solbera;
font-size : 5em;
font-size : 4.5em;
}
}
}
@@ -178,8 +305,8 @@
border-bottom : 2px solid @headerUnderline;
}
h4{
font-size : 12pt;
margin-bottom: 0.00em;
margin-bottom : 0.00em;
font-size : 12pt;
}
h5{
margin-bottom : 0.2em;