Spaces:
Sleeping
Sleeping
@import (less) './themes/fonts/5e legacy/fonts.less'; | |
@import (less) './themes/assets/assets.less'; | |
@import (less) './themes/phb.depricated.less'; | |
//Colors | |
@background : #EEE5CE; // Light parchment | |
@noteGreen : #e0e5c1; // Pastel green | |
@headerUnderline : #c9ad6a; // Gold | |
@horizontalRule : #9c2b1b; // Maroon | |
@headerText : #58180D; // Dark maroon | |
@monsterStatBackground : #FDF1DC; // Lighter parchment | |
@captionText : #766649; // Brown | |
@page { margin: 0; } | |
body { | |
counter-reset : phb-page-numbers; | |
} | |
*{ | |
-webkit-print-color-adjust : exact; | |
} | |
.useSansSerif(){ | |
font-family : ScalySans; | |
em{ | |
font-family : ScalySans; | |
font-style : italic; | |
} | |
strong{ | |
font-family : ScalySans; | |
font-weight : 800; | |
letter-spacing : -0.02em; | |
} | |
} | |
.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; | |
} | |
.phb, .page{ | |
.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 : @backgroundImage; | |
font-family : BookSanity; | |
font-size : 0.317cm; | |
text-rendering : optimizeLegibility; | |
page-break-before : always; | |
page-break-after : always; | |
contain : size; | |
} | |
.phb{ | |
//***************************** | |
// * BASE | |
// *****************************/ | |
p{ | |
padding-bottom : 0.8em; | |
line-height : 1.269em; | |
&+p{ | |
margin-top : -0.8em; | |
} | |
} | |
ul{ | |
margin-bottom : 0.8em; | |
padding-left : 1.4em; | |
line-height : 1.269em; | |
list-style-position : outside; | |
list-style-type : disc; | |
} | |
ol{ | |
margin-bottom : 0.8em; | |
padding-left : 1.4em; | |
line-height : 1.269em; | |
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 : MrJeeves; | |
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 : Solberry; | |
font-size : 10em; | |
color : #222; | |
line-height : 0.795em; | |
} | |
} | |
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{ | |
display: table-row-group; | |
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 : @noteBorderImage 11; | |
border-image-outset : 9px 0px; | |
box-shadow : 1px 4px 14px #888; | |
p, ul{ | |
font-size : 0.352cm; | |
line-height : 1.083em; | |
} | |
} | |
//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 : @monsterBorderImageLegacy 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; | |
background-color : transparent; | |
border-style : none; | |
border-image : none; | |
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 : @redTriangleImage; | |
background-size : 100% 100%; | |
border : none; | |
} | |
} | |
//Full Width | |
hr+hr+blockquote{ | |
.useColumns(0.96); | |
column-fill : balance; | |
} | |
//***************************** | |
// * FOOTER | |
// *****************************/ | |
&:after{ | |
content : ""; | |
position : absolute; | |
bottom : 0px; | |
left : 0px; | |
z-index : 100; | |
height : 50px; | |
width : 100%; | |
background-image : @footerAccentImage; | |
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; | |
page-break-inside : avoid; | |
break-inside : avoid; | |
} | |
//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; | |
page-break-inside : avoid; | |
break-inside : avoid; | |
} | |
} | |
//***************************** | |
// * SPELL LIST | |
// *****************************/ | |
.phb .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.263em; | |
} | |
ul{ | |
margin-bottom : 0.5em; | |
padding-left : 1em; | |
text-indent : -1em; | |
list-style-type : none; | |
-webkit-column-break-inside : auto; | |
page-break-inside : auto; | |
break-inside : auto; | |
} | |
} | |
//***************************** | |
// * WIDE | |
// *****************************/ | |
.phb .wide{ | |
column-span : all; | |
-webkit-column-span : all; | |
-moz-column-span : all; | |
} | |
//***************************** | |
// * CLASS TABLE | |
// *****************************/ | |
.phb .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 : stretch; | |
border-image-slice : 150 200 150 200; | |
border-image-source : @frameBorderImage; | |
border-image-width : 47px; | |
h5{ | |
margin-bottom : 10px; | |
} | |
} | |
//************************************ | |
// * DESCRIPTIVE TEXT BOX | |
// ************************************/ | |
.phb .descriptive{ | |
margin-bottom : 1em; | |
background-color : #faf7ea; | |
font-family : ScalySans; | |
border-style : solid; | |
border-width : 7px; | |
border-image : @descriptiveBoxImage 12 stretch; | |
border-image-outset : 4px; | |
box-shadow : 0px 0px 6px #faf7ea; | |
p{ | |
display : block; | |
padding-bottom : 0px; | |
line-height : 1.47em; | |
} | |
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; | |
} | |
//***************************** | |
// * ARTIST CREDIT BLOCK | |
// *****************************/ | |
.phb { | |
.artist { | |
position : absolute; | |
text-align : center; | |
font-family : WalterTurncoat; | |
font-size : 0.27cm; | |
color : @captionText; | |
p, p + p { | |
margin : unset; | |
text-indent : unset; | |
line-height : 0.941em; | |
} | |
h5 { | |
font-size : 1.3em; | |
font-family : WalterTurncoat; | |
} | |
a{ | |
color : inherit; | |
text-decoration : unset; | |
&:hover { | |
text-decoration : underline; | |
} | |
} | |
} | |
} | |
//***************************** | |
// * TABLE OF CONTENTS | |
// *****************************/ | |
.phb .toc{ | |
-webkit-column-break-inside : avoid; | |
page-break-inside : avoid; | |
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; | |
} | |
} | |