@layer styleTab {\n${this.state.brew.style}\n} ` }} />;
+ return
\n${this.state.brew.style}\n` }} />;
},
renderPages : function(){
diff --git a/themes/Legacy/5ePHB/style.less b/themes/Legacy/5ePHB/style.less
index 2544ff77d..2793958fe 100644
--- a/themes/Legacy/5ePHB/style.less
+++ b/themes/Legacy/5ePHB/style.less
@@ -1,499 +1,497 @@
-@layer Legacy_5ePHB {
- @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(){
+@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;
- em{
- font-family : ScalySans;
- font-style : italic;
- }
- strong{
- font-family : ScalySans;
- font-weight : 800;
- letter-spacing : -0.02em;
+ 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{
+ .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;
+ //*****************************
+ // * BASE
+ // *****************************/
+ p{
+ padding-bottom : 0.8em;
+ line-height : 1.269em;
+ &+p{
+ margin-top : -0.8em;
}
}
- .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;
+ ul{
+ margin-bottom : 0.8em;
+ padding-left : 1.4em;
+ line-height : 1.269em;
+ list-style-position : outside;
+ list-style-type : disc;
}
- .phb{
- .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;
- //*****************************
- // * BASE
- // *****************************/
- p{
- padding-bottom : 0.8em;
- line-height : 1.269em;
- &+p{
- margin-top : -0.8em;
+ 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;
}
}
- 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;
}
}
- 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);
- }
- //*****************************
- // * 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
+ // * NOTE
// *****************************/
- .phb .spellList{
+ blockquote{
.useSansSerif();
- column-count : 4;
- column-span : all;
- -webkit-column-span : all;
- -moz-column-span : all;
- ul+h5{
- margin-top : 15px;
- }
+ 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.263em;
+ 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{
- 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;
+ .useSansSerif();
+ padding-left : 1em;
+ font-size : 0.352cm;
}
- }
- //*****************************
- // * 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;
+ // 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);
}
//*****************************
- // * TABLE OF CONTENTS
+ // * FOOTER
// *****************************/
- .phb .toc{
+ &: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 : black;
- text-decoration : none;
- &:hover{
+ color : inherit;
+ text-decoration : unset;
+ &:hover {
text-decoration : underline;
}
}
- ul{
- padding-left : 0;
- list-style-type : none;
- }
- &>ul>li{
- margin-bottom : 10px;
- }
+ }
+}
+//*****************************
+// * 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;
}
}
diff --git a/themes/V3/5eDMG/style.less b/themes/V3/5eDMG/style.less
index 02056a34b..50a3af0a3 100644
--- a/themes/V3/5eDMG/style.less
+++ b/themes/V3/5eDMG/style.less
@@ -1,21 +1,19 @@
-@layer V3_5eDMG {
- :root {
- //Colors
- --HB_Color_Accent : #EBCEC3; // Salmon
- --HB_Color_Footnotes : #5C5C5C; // Dark gray
+:root {
+ //Colors
+ --HB_Color_Accent : #EBCEC3; // Salmon
+ --HB_Color_Footnotes : #5C5C5C; // Dark gray
+}
+
+.page {
+ background-image : url(/assets/DMG_background.png);
+ background-size : cover;
+
+ &:after {
+ background-image : url(/assets/DMG_footerAccent.png);
+ height: 58px;
}
- .page {
- background-image : url(/assets/DMG_background.png);
- background-size : cover;
-
- &:after {
- background-image : url(/assets/DMG_footerAccent.png);
- height: 58px;
- }
-
- .footnote {
- bottom : 40px;
- }
+ .footnote {
+ bottom : 40px;
}
}
diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less
index 85dc566f4..09f0dc790 100644
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -1,798 +1,796 @@
-@layer V3_5ePHB {
- @import (less) './themes/fonts/5e/fonts.less';
- @import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/5e/fonts.less';
+@import (less) './themes/assets/assets.less';
- :root {
- //Colors
- --HB_Color_Background : #EEE5CE; // Light parchment
- --HB_Color_Accent : #E0E5C1; // Pastel green
- --HB_Color_HeaderUnderline : #C0AD6A; // Gold
- --HB_Color_HorizontalRule : #9C2B1B; // Maroon
- --HB_Color_HeaderText : #58180D; // Dark Maroon
- --HB_Color_MonsterStatBackground : #F2E5B5; // Light orange parchment
- --HB_Color_CaptionText : #766649; // Brown
- --HB_Color_WatercolorStain : #BBAD82; // Light brown
- --HB_Color_Footnotes : #C9AD6A; // Gold
- }
+:root {
+ //Colors
+ --HB_Color_Background : #EEE5CE; // Light parchment
+ --HB_Color_Accent : #E0E5C1; // Pastel green
+ --HB_Color_HeaderUnderline : #C0AD6A; // Gold
+ --HB_Color_HorizontalRule : #9C2B1B; // Maroon
+ --HB_Color_HeaderText : #58180D; // Dark Maroon
+ --HB_Color_MonsterStatBackground : #F2E5B5; // Light orange parchment
+ --HB_Color_CaptionText : #766649; // Brown
+ --HB_Color_WatercolorStain : #BBAD82; // Light brown
+ --HB_Color_Footnotes : #C9AD6A; // Gold
+}
- @page { margin: 0; }
- body {
- counter-reset : phb-page-numbers;
- }
- *{
- -webkit-print-color-adjust : exact;
- }
- .useSansSerif(){
- font-family : ScalySansRemake;
- font-size : 0.318cm;
+@page { margin: 0; }
+body {
+ counter-reset : phb-page-numbers;
+}
+*{
+ -webkit-print-color-adjust : exact;
+}
+.useSansSerif(){
+ font-family : ScalySansRemake;
+ font-size : 0.318cm;
+ line-height : 1.2em;
+ p,dl,ul,ol {
line-height : 1.2em;
- p,dl,ul,ol {
- line-height : 1.2em;
+ }
+ ul, ol {
+ padding-left : 1em;
+ }
+ em{
+ font-style : italic;
+ }
+ strong{
+ font-weight : 800;
+ letter-spacing : -0.02em;
+ }
+ h5 + * {
+ margin-top : 0.1cm;
+ }
+}
+.useColumns(@multiplier : 1, @fillMode: balance){
+ column-count : 2;
+ column-fill : @fillMode;
+ column-gap : 0.9cm;
+ 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 : 0.9cm;
+ -moz-column-gap : 0.9cm;
+}
+.columnWrapper{
+ max-height : 100%;
+ column-span : all;
+ columns : inherit;
+ column-gap : inherit;
+}
+.page{
+ .useColumns();
+ counter-increment : phb-page-numbers;
+ position : relative;
+ z-index : 15;
+ box-sizing : border-box;
+ overflow : hidden;
+ height : 279.4mm;
+ width : 215.9mm;
+ background-color : var(--HB_Color_Background);
+ background-image : @backgroundImage;
+ padding : 1.4cm 1.9cm 1.7cm;
+ font-family : BookInsanityRemake;
+ font-size : 0.34cm;
+ text-rendering : optimizeLegibility;
+ page-break-before : always;
+ page-break-after : always;
+}
+ //*****************************
+ // * BASE
+ // *****************************/
+
+.page{
+ p{
+ overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
+ display : block;
+ line-height : 1.25em;
+ &+* {
+ margin-top : 0.325cm;
}
- ul, ol {
- padding-left : 1em;
- }
- em{
- font-style : italic;
- }
- strong{
- font-weight : 800;
- letter-spacing : -0.02em;
- }
- h5 + * {
- margin-top : 0.1cm;
+ &+p{
+ margin-top : 0;
}
}
- .useColumns(@multiplier : 1, @fillMode: balance){
- column-count : 2;
- column-fill : @fillMode;
- column-gap : 0.9cm;
- 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 : 0.9cm;
- -moz-column-gap : 0.9cm;
+ ul{
+ margin-bottom : 0.8em;
+ padding-left : 1.4em;
+ line-height : 1.25em;
+ list-style-position : outside;
+ list-style-type : disc;
}
- .columnWrapper{
- max-height : 100%;
- column-span : all;
- columns : inherit;
- column-gap : inherit;
+ ol{
+ margin-bottom : 0.8em;
+ padding-left : 1.4em;
+ line-height : 1.25em;
+ list-style-position : outside;
+ list-style-type : decimal;
}
- .page{
- .useColumns();
- counter-increment : phb-page-numbers;
- position : relative;
- z-index : 15;
- box-sizing : border-box;
- overflow : hidden;
- height : 279.4mm;
- width : 215.9mm;
- background-color : var(--HB_Color_Background);
- background-image : @backgroundImage;
- padding : 1.4cm 1.9cm 1.7cm;
- font-family : BookInsanityRemake;
- font-size : 0.34cm;
- text-rendering : optimizeLegibility;
- page-break-before : always;
- page-break-after : always;
+ //Indents after p or lists
+ p+p, ul+p, ol+p{
+ text-indent : 1em;
}
- //*****************************
- // * BASE
- // *****************************/
-
- .page{
- p{
- overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
- display : block;
- line-height : 1.25em;
- &+* {
- margin-top : 0.325cm;
- }
- &+p{
- margin-top : 0;
- }
- }
- ul{
- margin-bottom : 0.8em;
- padding-left : 1.4em;
- line-height : 1.25em;
- list-style-position : outside;
- list-style-type : disc;
- }
- ol{
- margin-bottom : 0.8em;
- padding-left : 1.4em;
- line-height : 1.25em;
- 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.02em;
- }
- 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{
- font-family : MrEavesRemake;
- font-weight : 800;
- color : var(--HB_Color_HeaderText);
- }
- h1{
- margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE
- column-span : all;
- font-size : 0.89cm;
- line-height : 1em;
- -webkit-column-span : all;
- -moz-column-span : all;
- &+p::first-letter{
- float : left;
- font-family : SolberaImitationRemake;
- line-height : 1em;
- font-size : 3.5cm;
- padding-left : 40px; //Allow background color to extend into margins
- margin-left : -40px;
- margin-top : -0.3cm;
- padding-bottom : 2px;
- margin-bottom : -20px;
- background-image : linear-gradient(-45deg, #322814, #998250, #322814);
- background-clip : text;
- -webkit-background-clip : text;
- color : rgba(0, 0, 0, 0);
- }
- &+p::first-line{
- font-variant : small-caps;
- }
- }
- h2{
- //margin-top : 0px; //Font is misaligned. Shift up slightly
- //margin-bottom : 0.05cm;
- font-size : 0.75cm;
- line-height : 0.988em; //Font is misaligned. Shift up slightly
- }
- h3{
- //margin-top : -0.1cm; //Font is misaligned. Shift up slightly
- //margin-bottom : 0.1cm;
- font-size : 0.575cm;
- border-bottom : 2px solid var(--HB_Color_HeaderUnderline);;
- line-height : 0.995em; //Font is misaligned. Shift up slightly
- & + * {
- margin-top: 0.17cm;
- }
- }
- * + h3 {
- margin-top : 0.155cm; //(0.325 - 0.17)
- }
- h4{
- //margin-top : -0.02cm; //Font is misaligned. Shift up slightly
- //margin-bottom : 0.02cm;
- font-size : 0.458cm;
- line-height : 0.971em; //Font is misaligned. Shift up slightly
- & + * {
- margin-top: 0.09cm;
- }
- }
- * + h4 {
- margin-top : 0.235cm; //(0.325 - 0.09)
- }
- h5{
- //margin-top : -0.02cm; //Font is misaligned. Shift up slightly
- //margin-bottom : 0.02cm;
- font-family : ScalySansSmallCapsRemake;
- font-size : 0.423cm;
- font-weight : 900;
- line-height : 0.951em; //Font is misaligned. Shift up slightly
- & + * {
- margin-top : 0.2cm;
- }
- }
- //*****************************
- // * TABLE
- // *****************************/
- table{
- .useSansSerif();
- width : 100%;
- line-height : 16px;
- & + * {
- margin-top : 0.325cm;
- }
- thead{
- display: table-row-group;
- font-weight : 800;
- th{
- vertical-align : bottom;
- //padding : 0.14em 0.4em;
- padding : 0px 1.5px; // Both of these are temporary, just to force
- //line-height : 16px; // PDF to render at same height until Chrome 108
- }
- }
- tbody{
- tr{
- td{
- //padding : 0.14em 0.4em;
- padding : 0px 1.5px; // Both of these are temporary, just to force
- //line-height : 16px; // PDF to render at same height until Chrome 108
- }
- &:nth-child(odd){
- background-color : var(--HB_Color_Accent);
- }
- }
- }
- }
- //*****************************
- // * NOTE
- // *****************************/
- .note{
- .useSansSerif();
- background-color : var(--HB_Color_Accent);
- border-style : solid;
- border-width : 1px;
- border-image : @noteBorderImage 12 stretch;
- border-image-outset : 9px 0px;
- border-image-width : 11px;
- padding : 0.13cm 0.16cm;
- filter : drop-shadow(1px 4px 6px #888);
- .page :where(&) {
- margin-top : 9px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.45cm;
- }
- h5 {
- font-size : 0.375cm;
- }
- p{
- display : block;
- padding-bottom : 0px;
- }
- :last-child {
- margin-bottom : 0;
- }
- }
- //************************************
- // * DESCRIPTIVE TEXT BOX
- // ************************************/
- .descriptive{
- .useSansSerif();
- background-color : #faf7ea;
- border-style : solid;
- border-width : 7px;
- border-image : @descriptiveBoxImage 12 stretch;
- border-image-outset : 4px;
- padding : 0.1em;
- filter : drop-shadow(0 0 3px #faf7ea);
- .page :where(&) {
- margin-top : 4px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.45cm;
- }
- h5 {
- font-size : 0.375cm;
- }
- p{
- display : block;
- padding-bottom : 0px;
- line-height : 1.5em;
- }
- :last-child {
- margin-bottom : 0;
- }
- }
- //*****************************
- // * Images Snippets
- // *****************************/
-
- /* Arist Credit */
- .artist {
- position : absolute;
- width : auto;
- text-align : center;
- font-family : WalterTurncoat;
- font-size : 0.27cm;
- color : var(--HB_Color_CaptionText);
- p, p + p {
- margin : unset;
- text-indent : unset;
- line-height : 1em;
- }
- h5 {
- font-size : 1.3em;
- font-family : WalterTurncoat;
- }
- a{
- color : inherit;
- text-decoration : unset;
- &:hover {
- text-decoration : underline;
- }
- }
- }
-
- /* Watermark */
- .watermark {
- display : grid !important;
- place-items : center;
- justify-content : center;
- position : absolute;
- top : 0;
- left : 0;
- width : 100%;
- height : 100%;
- font-size : 120px;
- text-transform : uppercase;
- color : black;
- mix-blend-mode : overlay;
- opacity : 30%;
- transform : rotate(-45deg);
- z-index : 500;
- p {
- margin-bottom : none;
- }
- }
-
- /* Watercolor */
- [class*="watercolor"] {
- position : absolute;
- width : 2000px; /* dimensions need to be real big so the user can set */
- height : 2000px; /* height or width and the image will maintain aspect ratio */
- -webkit-mask-image : var(--wc);
- -webkit-mask-size : contain;
- -webkit-mask-repeat : no-repeat;
- mask-image : var(--wc);
- mask-size : contain;
- mask-repeat : no-repeat;
- background-size : cover;
- background-color : var(--HB_Color_WatercolorStain); /*default color*/
- --wc : @watercolor1; /*default image*/
- z-index : -2;
- }
-
- .watercolor1 { --wc : @watercolor1; }
- .watercolor2 { --wc : @watercolor2; }
- .watercolor3 { --wc : @watercolor3; }
- .watercolor4 { --wc : @watercolor4; }
- .watercolor5 { --wc : @watercolor5; }
- .watercolor6 { --wc : @watercolor6; }
- .watercolor7 { --wc : @watercolor7; }
- .watercolor8 { --wc : @watercolor8; }
- .watercolor9 { --wc : @watercolor9; }
- .watercolor10 { --wc : @watercolor10; }
- .watercolor11 { --wc : @watercolor11; }
- .watercolor12 { --wc : @watercolor12; }
-
- //*****************************
- // * MONSTER STAT BLOCK
- // *****************************/
- .monster {
- .useSansSerif();
- &.frame {
- border-style : solid;
- border-width : 7px 6px;
- background-color : var(--HB_Color_MonsterStatBackground);
- background-image : @monsterBlockBackground;
- border-image : @monsterBorderImage 14 round;
- border-image-outset : 0px 2px;
- background-blend-mode : overlay;
- background-attachment : fixed;
- filter : drop-shadow(1px 4px 6px #888);
- padding : 4px 2px;
- margin-left : -0.16cm;
- margin-right : -0.16cm;
- width : calc(100% + 0.32cm);
- }
-
- position : relative;
- padding : 0px;
- margin-bottom : 0.325cm;
-
- //Headers
- h2{
- font-size : 0.62cm;
- line-height : 1em;
- margin : 0;
- &+p {
- font-size : 0.304cm; //Monster size and type subtext
- margin-bottom : 0;
- }
- }
- h3{
- font-family : ScalySansRemake;
- font-weight : 800;
- font-variant : small-caps;
- border-bottom : 2px solid var(--HB_Color_HeaderText);
- // margin-top : 0.05cm; //Font is misaligned. Shift up slightly
- padding-bottom : 0.05cm;
- }
-
- //Triangle dividers
- hr{
- visibility : visible;
- height : 6px;
- margin : 0.12cm 0cm;
- background-image : @redTriangleImage;
- background-size : 100% 100%;
- border : none;
- }
-
- //Attribute Lists - All text between HRs is red
- hr ~ :is(dl,p) {
- color : var(--HB_Color_HeaderText);
- }
- hr:last-of-type {
- & ~ :is(dl,p) {
- color : inherit; // After the HRs, reset text to black
- }
- & + * {
- margin-top : 0.325cm; // Space after last HR
- }
- }
-
- // Monster Ability table
- hr + table:first-of-type{
- margin : 0;
- column-span : none;
- color : var(--HB_Color_HeaderText);
- background-color : transparent;
- border-style : none;
- border-image : none;
- -webkit-column-span : none;
- tr {
- background-color : transparent;
- }
- td,th {
- padding: 0px;
- }
- }
-
- :last-child {
- margin-bottom : 0;
- }
- }
-
- //Full Width
- .monster.wide{
- .useColumns(0.96, @fillMode: 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 : var(--HB_Color_Footnotes);
- text-align : center;
- text-indent : 0;
- &.auto::after {
- content : counter(phb-page-numbers);
- }
- }
- .footnote{
- position : absolute;
- right : 80px;
- bottom : 32px;
- z-index : 150;
- width : 200px;
- font-size : 0.8em;
- color : var(--HB_Color_Footnotes);
- text-align : right;
- }
- //************************************
- // * CODE BLOCKS
- // ************************************/
- code{
- font-family : "Courier New", Courier, monospace;
- font-size : 0.325;
- padding : 0px 4px;
- color : #58180d;
- background-color : #faf7ea;
- border-radius : 4px;
- white-space : pre-wrap;
- overflow-wrap : break-word;
- }
-
- pre code{
- width : 100%;
- display : inline-block;
- border-style : solid;
- border-width : 1px;
- border-image : @codeBorderImage 26 stretch;
- border-image-width : 10px;
- border-image-outset : 2px;
- border-radius : 12px;
- margin-bottom : 2px;
- padding : 0.15cm;
- .page :where(&) {
- margin-top : 2px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.325cm;
- }
- }
- //*****************************
- // * EXTRAS
- // *****************************/
- hr{
- visibility : hidden;
- margin : 0px;
- }
- .columnSplit {
- visibility : hidden;
- -webkit-column-break-after : always;
- break-after : always;
- -moz-column-break-after : always;
- }
- //Avoid breaking up
- blockquote,table{
- z-index : 15;
- -webkit-column-break-inside : avoid;
- page-break-inside : avoid;
- break-inside : avoid;
- }
- //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;
- }
+ img{
+ z-index : -1;
+ }
+ strong{
+ font-weight : bold;
+ letter-spacing : -0.02em;
+ }
+ em{
+ font-style : italic;
+ }
+ sup{
+ vertical-align : super;
+ font-size : smaller;
+ line-height : 0;
+ }
+ sub{
+ vertical-align : sub;
+ font-size : smaller;
+ line-height : 0;
}
//*****************************
- // * SPELL LIST
+ // * HEADERS
// *****************************/
- .page .spellList{
- .useSansSerif();
- column-count : 2;
- ul+h5{
- margin-top : 15px;
+ h1,h2,h3,h4{
+ font-family : MrEavesRemake;
+ font-weight : 800;
+ color : var(--HB_Color_HeaderText);
+ }
+ h1{
+ margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE
+ column-span : all;
+ font-size : 0.89cm;
+ line-height : 1em;
+ -webkit-column-span : all;
+ -moz-column-span : all;
+ &+p::first-letter{
+ float : left;
+ font-family : SolberaImitationRemake;
+ line-height : 1em;
+ font-size : 3.5cm;
+ padding-left : 40px; //Allow background color to extend into margins
+ margin-left : -40px;
+ margin-top : -0.3cm;
+ padding-bottom : 2px;
+ margin-bottom : -20px;
+ background-image : linear-gradient(-45deg, #322814, #998250, #322814);
+ background-clip : text;
+ -webkit-background-clip : text;
+ color : rgba(0, 0, 0, 0);
}
- p, ul{
- font-size : 0.352cm;
- line-height : 1.265em;
- }
- 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{
- column-count : 4;
+ &+p::first-line{
+ font-variant : small-caps;
}
}
-
- //*****************************
- // * CLASS TABLE
- // *****************************/
- .page .classTable{
- th[colspan]:not([rowspan]) {
- white-space : nowrap;
+ h2{
+ //margin-top : 0px; //Font is misaligned. Shift up slightly
+ //margin-bottom : 0.05cm;
+ font-size : 0.75cm;
+ line-height : 0.988em; //Font is misaligned. Shift up slightly
+ }
+ h3{
+ //margin-top : -0.1cm; //Font is misaligned. Shift up slightly
+ //margin-bottom : 0.1cm;
+ font-size : 0.575cm;
+ border-bottom : 2px solid var(--HB_Color_HeaderUnderline);;
+ line-height : 0.995em; //Font is misaligned. Shift up slightly
+ & + * {
+ margin-top: 0.17cm;
}
- &.frame {
- margin-top : 0.7cm;
- margin-bottom : 0.9cm;
- margin-left : -0.1cm;
- margin-right : -0.1cm;
- width : calc(100% + 0.2cm);
- border-collapse : separate;
- background-color : white;
- border : initial;
- border-style : solid;
- border-image-outset : 0.4cm 0.3cm;
- border-image-repeat : stretch;
- border-image-slice : 200;
- border-image-source : @frameBorderImage;
- border-image-width : 47px;
- &.wide:first-child {
- margin-top: 0.12cm;
- }
- & + * {
- margin-top: 0;
- }
+ }
+ * + h3 {
+ margin-top : 0.155cm; //(0.325 - 0.17)
+ }
+ h4{
+ //margin-top : -0.02cm; //Font is misaligned. Shift up slightly
+ //margin-bottom : 0.02cm;
+ font-size : 0.458cm;
+ line-height : 0.971em; //Font is misaligned. Shift up slightly
+ & + * {
+ margin-top: 0.09cm;
}
- &.decoration {
- position:relative;
- }
- &.decoration::before {
- content :'';
- position : absolute;
- background-image : @classTableDecoration,
- @classTableDecoration;
- background-size : contain, contain;
- background-repeat : no-repeat, no-repeat;
- background-position : top, bottom;
- width : 7.75cm;
- height : calc(100% + 3.3cm);
- top : 50%;
- left : 50%;
- transform : translateY(-50%) translateX(-50%);
- filter : drop-shadow(0px 0px 1px #C8C5C080);
- z-index : -1;
- }
- &.decoration.wide::before {
- width : calc(100% + 3.3cm);
- height : 7.75cm;
- background-position : left, right;
- }
- h5 + table{
+ }
+ * + h4 {
+ margin-top : 0.235cm; //(0.325 - 0.09)
+ }
+ h5{
+ //margin-top : -0.02cm; //Font is misaligned. Shift up slightly
+ //margin-bottom : 0.02cm;
+ font-family : ScalySansSmallCapsRemake;
+ font-size : 0.423cm;
+ font-weight : 900;
+ line-height : 0.951em; //Font is misaligned. Shift up slightly
+ & + * {
margin-top : 0.2cm;
}
}
//*****************************
- // * TABLE OF CONTENTS
+ // * TABLE
// *****************************/
- .page {
- &:has(.toc):after {
- display: none;
+ table{
+ .useSansSerif();
+ width : 100%;
+ line-height : 16px;
+ & + * {
+ margin-top : 0.325cm;
}
- .toc {
+ thead{
+ display: table-row-group;
+ font-weight : 800;
+ th{
+ vertical-align : bottom;
+ //padding : 0.14em 0.4em;
+ padding : 0px 1.5px; // Both of these are temporary, just to force
+ //line-height : 16px; // PDF to render at same height until Chrome 108
+ }
+ }
+ tbody{
+ tr{
+ td{
+ //padding : 0.14em 0.4em;
+ padding : 0px 1.5px; // Both of these are temporary, just to force
+ //line-height : 16px; // PDF to render at same height until Chrome 108
+ }
+ &:nth-child(odd){
+ background-color : var(--HB_Color_Accent);
+ }
+ }
+ }
+ }
+ //*****************************
+ // * NOTE
+ // *****************************/
+ .note{
+ .useSansSerif();
+ background-color : var(--HB_Color_Accent);
+ border-style : solid;
+ border-width : 1px;
+ border-image : @noteBorderImage 12 stretch;
+ border-image-outset : 9px 0px;
+ border-image-width : 11px;
+ padding : 0.13cm 0.16cm;
+ filter : drop-shadow(1px 4px 6px #888);
+ .page :where(&) {
+ margin-top : 9px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.45cm;
+ }
+ h5 {
+ font-size : 0.375cm;
+ }
+ p{
+ display : block;
+ padding-bottom : 0px;
+ }
+ :last-child {
+ margin-bottom : 0;
+ }
+ }
+ //************************************
+ // * DESCRIPTIVE TEXT BOX
+ // ************************************/
+ .descriptive{
+ .useSansSerif();
+ background-color : #faf7ea;
+ border-style : solid;
+ border-width : 7px;
+ border-image : @descriptiveBoxImage 12 stretch;
+ border-image-outset : 4px;
+ padding : 0.1em;
+ filter : drop-shadow(0 0 3px #faf7ea);
+ .page :where(&) {
+ margin-top : 4px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.45cm;
+ }
+ h5 {
+ font-size : 0.375cm;
+ }
+ p{
+ display : block;
+ padding-bottom : 0px;
+ line-height : 1.5em;
+ }
+ :last-child {
+ margin-bottom : 0;
+ }
+ }
+ //*****************************
+ // * Images Snippets
+ // *****************************/
+
+ /* Arist Credit */
+ .artist {
+ position : absolute;
+ width : auto;
+ text-align : center;
+ font-family : WalterTurncoat;
+ font-size : 0.27cm;
+ color : var(--HB_Color_CaptionText);
+ p, p + p {
+ margin : unset;
+ text-indent : unset;
+ line-height : 1em;
+ }
+ h5 {
+ font-size : 1.3em;
+ font-family : WalterTurncoat;
+ }
+ a{
+ color : inherit;
+ text-decoration : unset;
+ &:hover {
+ text-decoration : underline;
+ }
+ }
+ }
+
+ /* Watermark */
+ .watermark {
+ display : grid !important;
+ place-items : center;
+ justify-content : center;
+ position : absolute;
+ top : 0;
+ left : 0;
+ width : 100%;
+ height : 100%;
+ font-size : 120px;
+ text-transform : uppercase;
+ color : black;
+ mix-blend-mode : overlay;
+ opacity : 30%;
+ transform : rotate(-45deg);
+ z-index : 500;
+ p {
+ margin-bottom : none;
+ }
+ }
+
+ /* Watercolor */
+ [class*="watercolor"] {
+ position : absolute;
+ width : 2000px; /* dimensions need to be real big so the user can set */
+ height : 2000px; /* height or width and the image will maintain aspect ratio */
+ -webkit-mask-image : var(--wc);
+ -webkit-mask-size : contain;
+ -webkit-mask-repeat : no-repeat;
+ mask-image : var(--wc);
+ mask-size : contain;
+ mask-repeat : no-repeat;
+ background-size : cover;
+ background-color : var(--HB_Color_WatercolorStain); /*default color*/
+ --wc : @watercolor1; /*default image*/
+ z-index : -2;
+ }
+
+ .watercolor1 { --wc : @watercolor1; }
+ .watercolor2 { --wc : @watercolor2; }
+ .watercolor3 { --wc : @watercolor3; }
+ .watercolor4 { --wc : @watercolor4; }
+ .watercolor5 { --wc : @watercolor5; }
+ .watercolor6 { --wc : @watercolor6; }
+ .watercolor7 { --wc : @watercolor7; }
+ .watercolor8 { --wc : @watercolor8; }
+ .watercolor9 { --wc : @watercolor9; }
+ .watercolor10 { --wc : @watercolor10; }
+ .watercolor11 { --wc : @watercolor11; }
+ .watercolor12 { --wc : @watercolor12; }
+
+ //*****************************
+ // * MONSTER STAT BLOCK
+ // *****************************/
+ .monster {
+ .useSansSerif();
+ &.frame {
+ border-style : solid;
+ border-width : 7px 6px;
+ background-color : var(--HB_Color_MonsterStatBackground);
+ background-image : @monsterBlockBackground;
+ border-image : @monsterBorderImage 14 round;
+ border-image-outset : 0px 2px;
+ background-blend-mode : overlay;
+ background-attachment : fixed;
+ filter : drop-shadow(1px 4px 6px #888);
+ padding : 4px 2px;
+ margin-left : -0.16cm;
+ margin-right : -0.16cm;
+ width : calc(100% + 0.32cm);
+ }
+
+ position : relative;
+ padding : 0px;
+ margin-bottom : 0.325cm;
+
+ //Headers
+ h2{
+ font-size : 0.62cm;
+ line-height : 1em;
+ margin : 0;
+ &+p {
+ font-size : 0.304cm; //Monster size and type subtext
+ margin-bottom : 0;
+ }
+ }
+ h3{
+ font-family : ScalySansRemake;
+ font-weight : 800;
+ font-variant : small-caps;
+ border-bottom : 2px solid var(--HB_Color_HeaderText);
+ // margin-top : 0.05cm; //Font is misaligned. Shift up slightly
+ padding-bottom : 0.05cm;
+ }
+
+ //Triangle dividers
+ hr{
+ visibility : visible;
+ height : 6px;
+ margin : 0.12cm 0cm;
+ background-image : @redTriangleImage;
+ background-size : 100% 100%;
+ border : none;
+ }
+
+ //Attribute Lists - All text between HRs is red
+ hr ~ :is(dl,p) {
+ color : var(--HB_Color_HeaderText);
+ }
+ hr:last-of-type {
+ & ~ :is(dl,p) {
+ color : inherit; // After the HRs, reset text to black
+ }
+ & + * {
+ margin-top : 0.325cm; // Space after last HR
+ }
+ }
+
+ // Monster Ability table
+ hr + table:first-of-type{
+ margin : 0;
+ column-span : none;
+ color : var(--HB_Color_HeaderText);
+ background-color : transparent;
+ border-style : none;
+ border-image : none;
+ -webkit-column-span : none;
+ tr {
+ background-color : transparent;
+ }
+ td,th {
+ padding: 0px;
+ }
+ }
+
+ :last-child {
+ margin-bottom : 0;
+ }
+ }
+
+ //Full Width
+ .monster.wide{
+ .useColumns(0.96, @fillMode: 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 : var(--HB_Color_Footnotes);
+ text-align : center;
+ text-indent : 0;
+ &.auto::after {
+ content : counter(phb-page-numbers);
+ }
+ }
+ .footnote{
+ position : absolute;
+ right : 80px;
+ bottom : 32px;
+ z-index : 150;
+ width : 200px;
+ font-size : 0.8em;
+ color : var(--HB_Color_Footnotes);
+ text-align : right;
+ }
+ //************************************
+ // * CODE BLOCKS
+ // ************************************/
+ code{
+ font-family : "Courier New", Courier, monospace;
+ font-size : 0.325;
+ padding : 0px 4px;
+ color : #58180d;
+ background-color : #faf7ea;
+ border-radius : 4px;
+ white-space : pre-wrap;
+ overflow-wrap : break-word;
+ }
+
+ pre code{
+ width : 100%;
+ display : inline-block;
+ border-style : solid;
+ border-width : 1px;
+ border-image : @codeBorderImage 26 stretch;
+ border-image-width : 10px;
+ border-image-outset : 2px;
+ border-radius : 12px;
+ margin-bottom : 2px;
+ padding : 0.15cm;
+ .page :where(&) {
+ margin-top : 2px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.325cm;
+ }
+ }
+ //*****************************
+ // * EXTRAS
+ // *****************************/
+ hr{
+ visibility : hidden;
+ margin : 0px;
+ }
+ .columnSplit {
+ visibility : hidden;
+ -webkit-column-break-after : always;
+ break-after : always;
+ -moz-column-break-after : always;
+ }
+ //Avoid breaking up
+ blockquote,table{
+ z-index : 15;
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
- h1 {
- text-align : center;
- margin-bottom : 0.3cm;
- }
- a{
- display : inline;
- color : inherit;
- text-decoration : none;
- &:hover{
- text-decoration : underline;
- }
- }
- h4 {
- margin-top : 0.2cm;
- line-height : 0.4cm;
- & + ul li {
- line-height: 1.2em;
- }
- }
- ul{
- padding-left : 0;
- list-style-type : none;
- margin-top : 0;
- a {
- width : 100%;
- display : flex;
- flex-flow : row nowrap;
- justify-content : space-between;
- }
- li + li h3 {
- margin-top : 0.26cm;
- line-height : 1em
- }
- h3 span:first-child::after {
- border : none;
- }
- span {
- display : contents;
- &:first-child::after {
- content : "";
- bottom : 0.08cm;
- flex : 1;
- margin-left : 0.08cm; /* Spacing before dot leaders */
- margin-right : 0.16cm;
- border-bottom : 0.05cm dotted #000;
- margin-bottom : 0.08cm;
- }
- &:last-child {
- display : inline-block;
- align-self : flex-end;
- font-family : "BookInsanityRemake";
- font-size : 0.34cm;
- font-weight : normal;
- color : #000;
- }
- }
- ul { /*List indent*/
- margin-left : 1em;
- }
- }
- &.wide{
- .useColumns(0.96, @fillMode: balance);
- }
- }
}
-
- //*****************************
- // * DEFINITION LISTS
- // *****************************/
- .page {
- dl {
- line-height : 1.25em;
- padding-left : 1em;
- white-space : pre-line;
- & + * {
- margin-top : 0.28cm;
- }
- }
- dl + * {
- margin-top : 0.17cm;
- }
- p + dl {
- margin-top: 0.17cm;
- }
- dt {
- display : inline;
- margin-right : 5px;
- margin-left : -1em;
- }
- dd {
- display : inline;
- margin-left : 0px;
- text-indent : 0px;
- }
+ //Text indent right after table
+ table+p{
+ text-indent : 1em;
}
-
- //*****************************
- // * WIDE
- // *****************************/
- .page .wide{
- margin-bottom : 0.325cm;
+ // Nested lists
+ ul ul,ol ol,ul ol,ol ul{
+ margin-bottom : 0px;
+ margin-left : 1.5em;
}
-
- .page h1 + *{
- margin-top : 0;
+ li{
+ -webkit-column-break-inside : avoid;
+ page-break-inside : avoid;
+ break-inside : avoid;
}
}
+//*****************************
+// * SPELL LIST
+// *****************************/
+.page .spellList{
+ .useSansSerif();
+ column-count : 2;
+ ul+h5{
+ margin-top : 15px;
+ }
+ p, ul{
+ font-size : 0.352cm;
+ line-height : 1.265em;
+ }
+ 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{
+ column-count : 4;
+ }
+}
+
+//*****************************
+// * CLASS TABLE
+// *****************************/
+.page .classTable{
+ th[colspan]:not([rowspan]) {
+ white-space : nowrap;
+ }
+ &.frame {
+ margin-top : 0.7cm;
+ margin-bottom : 0.9cm;
+ margin-left : -0.1cm;
+ margin-right : -0.1cm;
+ width : calc(100% + 0.2cm);
+ border-collapse : separate;
+ background-color : white;
+ border : initial;
+ border-style : solid;
+ border-image-outset : 0.4cm 0.3cm;
+ border-image-repeat : stretch;
+ border-image-slice : 200;
+ border-image-source : @frameBorderImage;
+ border-image-width : 47px;
+ &.wide:first-child {
+ margin-top: 0.12cm;
+ }
+ & + * {
+ margin-top: 0;
+ }
+ }
+ &.decoration {
+ position:relative;
+ }
+ &.decoration::before {
+ content :'';
+ position : absolute;
+ background-image : @classTableDecoration,
+ @classTableDecoration;
+ background-size : contain, contain;
+ background-repeat : no-repeat, no-repeat;
+ background-position : top, bottom;
+ width : 7.75cm;
+ height : calc(100% + 3.3cm);
+ top : 50%;
+ left : 50%;
+ transform : translateY(-50%) translateX(-50%);
+ filter : drop-shadow(0px 0px 1px #C8C5C080);
+ z-index : -1;
+ }
+ &.decoration.wide::before {
+ width : calc(100% + 3.3cm);
+ height : 7.75cm;
+ background-position : left, right;
+ }
+ h5 + table{
+ margin-top : 0.2cm;
+ }
+}
+//*****************************
+// * TABLE OF CONTENTS
+// *****************************/
+.page {
+ &:has(.toc):after {
+ display: none;
+ }
+ .toc {
+ -webkit-column-break-inside : avoid;
+ page-break-inside : avoid;
+ break-inside : avoid;
+ h1 {
+ text-align : center;
+ margin-bottom : 0.3cm;
+ }
+ a{
+ display : inline;
+ color : inherit;
+ text-decoration : none;
+ &:hover{
+ text-decoration : underline;
+ }
+ }
+ h4 {
+ margin-top : 0.2cm;
+ line-height : 0.4cm;
+ & + ul li {
+ line-height: 1.2em;
+ }
+ }
+ ul{
+ padding-left : 0;
+ list-style-type : none;
+ margin-top : 0;
+ a {
+ width : 100%;
+ display : flex;
+ flex-flow : row nowrap;
+ justify-content : space-between;
+ }
+ li + li h3 {
+ margin-top : 0.26cm;
+ line-height : 1em
+ }
+ h3 span:first-child::after {
+ border : none;
+ }
+ span {
+ display : contents;
+ &:first-child::after {
+ content : "";
+ bottom : 0.08cm;
+ flex : 1;
+ margin-left : 0.08cm; /* Spacing before dot leaders */
+ margin-right : 0.16cm;
+ border-bottom : 0.05cm dotted #000;
+ margin-bottom : 0.08cm;
+ }
+ &:last-child {
+ display : inline-block;
+ align-self : flex-end;
+ font-family : "BookInsanityRemake";
+ font-size : 0.34cm;
+ font-weight : normal;
+ color : #000;
+ }
+ }
+ ul { /*List indent*/
+ margin-left : 1em;
+ }
+ }
+ &.wide{
+ .useColumns(0.96, @fillMode: balance);
+ }
+ }
+}
+
+//*****************************
+// * DEFINITION LISTS
+// *****************************/
+.page {
+ dl {
+ line-height : 1.25em;
+ padding-left : 1em;
+ white-space : pre-line;
+ & + * {
+ margin-top : 0.28cm;
+ }
+ }
+ dl + * {
+ margin-top : 0.17cm;
+ }
+ p + dl {
+ margin-top: 0.17cm;
+ }
+ dt {
+ display : inline;
+ margin-right : 5px;
+ margin-left : -1em;
+ }
+ dd {
+ display : inline;
+ margin-left : 0px;
+ text-indent : 0px;
+ }
+}
+
+//*****************************
+// * WIDE
+// *****************************/
+.page .wide{
+ margin-bottom : 0.325cm;
+}
+
+.page h1 + *{
+ margin-top : 0;
+}
diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less
index 387b6612f..985a34528 100644
--- a/themes/V3/Blank/style.less
+++ b/themes/V3/Blank/style.less
@@ -1,278 +1,276 @@
-@layer V3_Blank {
- @import (less) './themes/fonts/5e/fonts.less';
- @import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/5e/fonts.less';
+@import (less) './themes/assets/assets.less';
- :root {
- //Colors
- --HB_Color_Background : #FFFFFF; // White
- --HB_Color_WatercolorStain : #000000; // Black
+:root {
+ //Colors
+ --HB_Color_Background : #FFFFFF; // White
+ --HB_Color_WatercolorStain : #000000; // Black
+}
+
+@page { margin: 0; }
+body {
+ counter-reset : phb-page-numbers;
+}
+*{
+ -webkit-print-color-adjust : exact;
+}
+
+.useColumns(@multiplier : 1, @fillMode: balance){
+ column-fill : @fillMode;
+ column-count : 2;
+}
+.columnWrapper{
+ max-height : 100%;
+ column-span : all;
+ columns : inherit;
+ column-gap : inherit;
+}
+.page{
+ .useColumns();
+ height : 279.4mm;
+ width : 215.9mm;
+ padding : 1.4cm 1.9cm 1.7cm;
+ counter-increment : phb-page-numbers;
+ background-color : var(--HB_Color_Background);
+ position : relative;
+ z-index : 15;
+ box-sizing : border-box;
+ overflow : hidden;
+ text-rendering : optimizeLegibility;
+ page-break-before : always;
+ page-break-after : always;
+ contain : size;
+}
+ //*****************************
+ // * BASE
+ // *****************************/
+.page{
+ p{
+ overflow-wrap : break-word;
+ display : block;
+ }
+ strong{
+ font-weight : bold;
+ }
+ em{
+ font-style : italic;
+ }
+ sup{
+ vertical-align : super;
+ font-size : smaller;
+ line-height : 0;
+ }
+ sub{
+ vertical-align : sub;
+ font-size : smaller;
+ line-height : 0;
+ }
+ ul {
+ list-style-position : outside; //Needed for multiline list items
+ list-style-type : disc;
+ padding-left : 1.4em;
+ }
+ ol {
+ list-style-position : outside;
+ list-style-type : decimal;
+ padding-left : 1.4em;
+ }
+ img{
+ z-index : -1;
}
- @page { margin: 0; }
- body {
- counter-reset : phb-page-numbers;
+ //*****************************
+ // * HEADERS
+ // *****************************/
+ h1,h2,h3,h4,h5,h6{
+ font-weight : bold;
+ line-height : 1.2em;
}
- *{
- -webkit-print-color-adjust : exact;
+ h1{
+ font-size : 2em;
}
-
- .useColumns(@multiplier : 1, @fillMode: balance){
- column-fill : @fillMode;
- column-count : 2;
+ h2{
+ font-size : 1.5em;
}
- .columnWrapper{
- max-height : 100%;
- column-span : all;
- columns : inherit;
- column-gap : inherit;
+ h3{
+ font-size : 1.17em;
}
- .page{
- .useColumns();
- height : 279.4mm;
- width : 215.9mm;
- padding : 1.4cm 1.9cm 1.7cm;
- counter-increment : phb-page-numbers;
- background-color : var(--HB_Color_Background);
- position : relative;
- z-index : 15;
- box-sizing : border-box;
- overflow : hidden;
- text-rendering : optimizeLegibility;
- page-break-before : always;
- page-break-after : always;
- contain : size;
+ h4{
+ font-size : 1em;
}
- //*****************************
- // * BASE
- // *****************************/
- .page{
- p{
- overflow-wrap : break-word;
- display : block;
- }
- strong{
+ h5{
+ font-size : 0.83em;
+ }
+ //*****************************
+ // * TABLE
+ // *****************************/
+ table{
+ width : 100%;
+ thead{
+ display : table-row-group;
font-weight : bold;
}
- em{
- font-style : italic;
- }
- sup{
- vertical-align : super;
- font-size : smaller;
- line-height : 0;
- }
- sub{
- vertical-align : sub;
- font-size : smaller;
- line-height : 0;
- }
- ul {
- list-style-position : outside; //Needed for multiline list items
- list-style-type : disc;
- padding-left : 1.4em;
- }
- ol {
- list-style-position : outside;
- list-style-type : decimal;
- padding-left : 1.4em;
- }
- img{
- z-index : -1;
- }
+ }
+ div:not(.columnWrapper) > table + table { // Side-by-side tables should not
+ margin-top : 0; // have vertical spacing.
+ }
- //*****************************
- // * HEADERS
- // *****************************/
- h1,h2,h3,h4,h5,h6{
- font-weight : bold;
- line-height : 1.2em;
- }
- h1{
- font-size : 2em;
- }
- h2{
- font-size : 1.5em;
- }
- h3{
- font-size : 1.17em;
- }
- h4{
- font-size : 1em;
- }
- h5{
- font-size : 0.83em;
- }
- //*****************************
- // * TABLE
- // *****************************/
- table{
- width : 100%;
- thead{
- display : table-row-group;
- font-weight : bold;
- }
- }
- div:not(.columnWrapper) > table + table { // Side-by-side tables should not
- margin-top : 0; // have vertical spacing.
- }
-
- /* Watermark */
- .watermark {
- display : grid !important;
- place-items : center;
- justify-content : center;
- position : absolute;
- margin : 0;
- top : 0;
- left : 0;
- width : 100%;
- height : 100%;
- font-size : 120px;
- text-transform : uppercase;
- color : black;
- mix-blend-mode : overlay;
- opacity : 30%;
- transform : rotate(-45deg);
- z-index : 500;
- p {
- margin-bottom : none;
- }
- }
-
- /* Watercolor */
- [class*="watercolor"] {
- position : absolute;
- width : 2000px; /* dimensions need to be real big so the user can set */
- height : 2000px; /* height or width and the image will maintain aspect ratio */
- -webkit-mask-image : var(--wc);
- -webkit-mask-size : contain;
- -webkit-mask-repeat : no-repeat;
- mask-image : var(--wc);
- mask-size : contain;
- mask-repeat : no-repeat;
- background-size : cover;
- background-color : var(--HB_Color_WatercolorStain); /*default color*/
- --wc : @watercolor1; /*default image*/
- z-index : -2;
- }
-
- .watercolor1 { --wc : @watercolor1; }
- .watercolor2 { --wc : @watercolor2; }
- .watercolor3 { --wc : @watercolor3; }
- .watercolor4 { --wc : @watercolor4; }
- .watercolor5 { --wc : @watercolor5; }
- .watercolor6 { --wc : @watercolor6; }
- .watercolor7 { --wc : @watercolor7; }
- .watercolor8 { --wc : @watercolor8; }
- .watercolor9 { --wc : @watercolor9; }
- .watercolor10 { --wc : @watercolor10; }
- .watercolor11 { --wc : @watercolor11; }
- .watercolor12 { --wc : @watercolor12; }
-
- //************************************
- // * CODE BLOCKS
- // ************************************/
- code{
- font-family : "Courier New", Courier, monospace;
- white-space : pre-wrap;
- overflow-wrap : break-word;
- }
-
- pre code{
- width : 100%;
- display : inline-block;
- }
- //*****************************
- // * EXTRAS
- // *****************************/
- .columnSplit {
- visibility : hidden;
- -webkit-column-break-after : always;
- break-after : always;
- -moz-column-break-after : always;
- margin-top : 0;
- & + * {
- margin-top : 0;
- }
- }
- //Avoid breaking up
- blockquote,table{
- z-index : 15;
- -webkit-column-break-inside : avoid;
- page-break-inside : avoid;
- break-inside : avoid;
- }
- // 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;
+ /* Watermark */
+ .watermark {
+ display : grid !important;
+ place-items : center;
+ justify-content : center;
+ position : absolute;
+ margin : 0;
+ top : 0;
+ left : 0;
+ width : 100%;
+ height : 100%;
+ font-size : 120px;
+ text-transform : uppercase;
+ color : black;
+ mix-blend-mode : overlay;
+ opacity : 30%;
+ transform : rotate(-45deg);
+ z-index : 500;
+ p {
+ margin-bottom : none;
}
}
- //*****************************
- // * MUSTACHE DIVS/SPANS
- // *****************************/
- .page {
- .block {
- break-inside : avoid;
- display : inline-block;
- width : 100%;
- }
- .inline-block {
- display : inline-block;
- text-indent : initial;
- }
+ /* Watercolor */
+ [class*="watercolor"] {
+ position : absolute;
+ width : 2000px; /* dimensions need to be real big so the user can set */
+ height : 2000px; /* height or width and the image will maintain aspect ratio */
+ -webkit-mask-image : var(--wc);
+ -webkit-mask-size : contain;
+ -webkit-mask-repeat : no-repeat;
+ mask-image : var(--wc);
+ mask-size : contain;
+ mask-repeat : no-repeat;
+ background-size : cover;
+ background-color : var(--HB_Color_WatercolorStain); /*default color*/
+ --wc : @watercolor1; /*default image*/
+ z-index : -2;
}
- //*****************************
- // * DEFINITION LISTS
- // *****************************/
- .page {
- dl {
- padding-left : 1em;
- white-space : pre-line;
- }
- dt {
- display : inline;
- margin-right : 0.5ch;
- margin-left : -1em;
- }
- dd {
- display : inline;
- margin-left : 0;
- text-indent : 0;
- }
+ .watercolor1 { --wc : @watercolor1; }
+ .watercolor2 { --wc : @watercolor2; }
+ .watercolor3 { --wc : @watercolor3; }
+ .watercolor4 { --wc : @watercolor4; }
+ .watercolor5 { --wc : @watercolor5; }
+ .watercolor6 { --wc : @watercolor6; }
+ .watercolor7 { --wc : @watercolor7; }
+ .watercolor8 { --wc : @watercolor8; }
+ .watercolor9 { --wc : @watercolor9; }
+ .watercolor10 { --wc : @watercolor10; }
+ .watercolor11 { --wc : @watercolor11; }
+ .watercolor12 { --wc : @watercolor12; }
+
+ //************************************
+ // * CODE BLOCKS
+ // ************************************/
+ code{
+ font-family : "Courier New", Courier, monospace;
+ white-space : pre-wrap;
+ overflow-wrap : break-word;
}
+ pre code{
+ width : 100%;
+ display : inline-block;
+ }
//*****************************
- // * BLANK LINE
+ // * EXTRAS
// *****************************/
- .page {
- .blank {
- height : 1em;
+ .columnSplit {
+ visibility : hidden;
+ -webkit-column-break-after : always;
+ break-after : always;
+ -moz-column-break-after : always;
+ margin-top : 0;
+ & + * {
margin-top : 0;
- & + * {
- margin-top : 0;
- }
}
}
+ //Avoid breaking up
+ blockquote,table{
+ z-index : 15;
+ -webkit-column-break-inside : avoid;
+ page-break-inside : avoid;
+ break-inside : avoid;
+ }
+ // 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;
+ }
+}
- //*****************************
- // * WIDE
- // *****************************/
- .page {
- .wide{
- column-span : all;
- display : block;
- margin-bottom : 1em;
- &+* {
- margin-top : 0;
- }
+//*****************************
+// * MUSTACHE DIVS/SPANS
+// *****************************/
+.page {
+ .block {
+ break-inside : avoid;
+ display : inline-block;
+ width : 100%;
+ }
+ .inline-block {
+ display : inline-block;
+ text-indent : initial;
+ }
+}
+
+//*****************************
+// * DEFINITION LISTS
+// *****************************/
+.page {
+ dl {
+ padding-left : 1em;
+ white-space : pre-line;
+ }
+ dt {
+ display : inline;
+ margin-right : 0.5ch;
+ margin-left : -1em;
+ }
+ dd {
+ display : inline;
+ margin-left : 0;
+ text-indent : 0;
+ }
+}
+
+//*****************************
+// * BLANK LINE
+// *****************************/
+.page {
+ .blank {
+ height : 1em;
+ margin-top : 0;
+ & + * {
+ margin-top : 0;
+ }
+ }
+}
+
+//*****************************
+// * WIDE
+// *****************************/
+.page {
+ .wide{
+ column-span : all;
+ display : block;
+ margin-bottom : 1em;
+ &+* {
+ margin-top : 0;
}
}
}
diff --git a/themes/V3/Journal/style.less b/themes/V3/Journal/style.less
index f3b70cec2..2e2ada5c8 100644
--- a/themes/V3/Journal/style.less
+++ b/themes/V3/Journal/style.less
@@ -1,561 +1,559 @@
-@layer V3_Journal {
- @import (less) './themes/fonts/Journal/fonts.less';
- @import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/Journal/fonts.less';
+@import (less) './themes/assets/assets.less';
- :root {
- //Colors
- --HB_Color_Background : unset; // Light parchment
- --HB_Color_Text : #412121; // Dark Maroon Brown
- --HB_Color_Text2 : #261C13CC; //Dark Brown
- --HB_Color_HeaderText : #58180D; // Dark Maroon
- --HB_Color_CaptionText : #766649; // Brown
- --HB_Color_WatercolorStain : #BBAD82; // Light brown
- }
+:root {
+ //Colors
+ --HB_Color_Background : unset; // Light parchment
+ --HB_Color_Text : #412121; // Dark Maroon Brown
+ --HB_Color_Text2 : #261C13CC; //Dark Brown
+ --HB_Color_HeaderText : #58180D; // Dark Maroon
+ --HB_Color_CaptionText : #766649; // Brown
+ --HB_Color_WatercolorStain : #BBAD82; // Light brown
+}
- .useSansSerif(){
- font-family : PermanentMarker;
- font-size : 0.3cm;
+.useSansSerif(){
+ font-family : PermanentMarker;
+ font-size : 0.3cm;
+ line-height : 1.2em;
+ color : var(--HB_Color_Text2);
+ p,dl,ul,ol {
line-height : 1.2em;
- color : var(--HB_Color_Text2);
- p,dl,ul,ol {
- line-height : 1.2em;
- }
- ul, ol {
- padding-left : 1em;
- }
- em{
- font-style : italic;
- }
- strong{
- font-weight : 800;
- font-size : 1.1em;
- }
- h5 + * {
- margin-top : 0.1cm;
- }
}
- .useColumns(@multiplier : 1, @fillMode: balance){
- column-gap : 0.5cm;
+ ul, ol {
+ padding-left : 1em;
+ }
+ em{
+ font-style : italic;
+ }
+ strong{
+ font-weight : 800;
+ font-size : 1.1em;
+ }
+ h5 + * {
+ margin-top : 0.1cm;
+ }
+}
+.useColumns(@multiplier : 1, @fillMode: balance){
+ column-gap : 0.5cm;
+}
+
+.page{
+ background-size : 200% 100%;
+ background-repeat : no-repeat;
+ filter : drop-shadow(1px 4px 14px black);
+ background-image : url(/assets/Journal/Background1.webp);
+ padding : 2.1cm 1.9cm 1.7cm 3.8cm;
+ &:nth-of-type(2n + 1) {
+ background-position : left;
+ }
+ &:nth-of-type(2n) {
+ background-position : right;
+ padding : 2.1cm 3.9cm 1.7cm 1.8cm;
+ }
+ &:nth-of-type(2) {
+ background-image : url(/assets/Journal/Background2.webp); //Only first page should show ribbon
}
- .page{
- background-size : 200% 100%;
- background-repeat : no-repeat;
- filter : drop-shadow(1px 4px 14px black);
- background-image : url(/assets/Journal/Background1.webp);
- padding : 2.1cm 1.9cm 1.7cm 3.8cm;
- &:nth-of-type(2n + 1) {
- background-position : left;
+ & .columnWrapper {
+ //transform: rotate(-0.5deg); // Breaks absolute positioning of images/footers. Wait for Chrome fix
+ }
+}
+
+ //*****************************
+ // * BASE
+ // *****************************/
+.page{
+ color : var(--HB_Color_Text);
+ font-family : ReenieBeanie;
+ font-size : 0.53cm;
+ line-height : 0.8em;
+ p + * {
+ margin-top : 0.325cm;
+ }
+ p + p{
+ margin-top : 0;
+ }
+ ul{
+ margin-bottom : 0.8em;
+ }
+ ol{
+ margin-bottom : 0.8em;
+ }
+ em{
+ text-decoration : underline;
+ font-style : unset;
+ }
+ del{
+ text-decoration-style: double;
+ }
+
+ //Indents after p or lists
+ p+p, ul+p, ol+p{
+ text-indent : 1em;
+ }
+ //*****************************
+ // * HEADERS
+ // *****************************/
+ h1,h2,h3,h4,h5{
+ font-family : FrederickaTheGreat;
+ font-weight : unset;
+ color : var(--HB_Color_HeaderText);
+ }
+ h1{
+ margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE
+ font-size : 0.89cm;
+ line-height : 1em;
+ font-variant : small-caps;
+ &+p::first-letter{
+ float : left;
+ font-family : FrederickaTheGreat;
+ line-height : 1em;
+ font-size : 1.9em;
+ padding-left : 40px; //Allow background color to extend into margins
+ margin-top : -0.3cm;
+ margin-bottom : -20px;
+ margin-left : -40px;
+ margin-right : 0.1em;
+ padding-top : 0.3em;
+ padding-bottom : 2px;
}
+ &+p::first-line{
+ font-variant : small-caps;
+ }
+ }
+ h2{
+ font-size : 0.62cm;
+ line-height : 0.988em; //Font is misaligned. Shift up slightly
+ }
+ h3{
+ font-size : 0.575cm;
+ line-height : 0.995em; //Font is misaligned. Shift up slightly
+ margin-left : -0.9em;
+ }
+ h4{
+ font-size : 0.55cm;
+ line-height : 0.971em; //Font is misaligned. Shift up slightly
+ color : var(--HB_Color_Text);
+ padding-bottom : 5px;
+ transform:rotate(0deg);
&:nth-of-type(2n) {
- background-position : right;
- padding : 2.1cm 3.9cm 1.7cm 1.8cm;
+ transform:rotate(1deg);
}
- &:nth-of-type(2) {
- background-image : url(/assets/Journal/Background2.webp); //Only first page should show ribbon
- }
-
- & .columnWrapper {
- //transform: rotate(-0.5deg); // Breaks absolute positioning of images/footers. Wait for Chrome fix
+ &:nth-of-type(3n) {
+ transform:rotate(-1.5deg);
}
}
-
- //*****************************
- // * BASE
- // *****************************/
- .page{
- color : var(--HB_Color_Text);
- font-family : ReenieBeanie;
- font-size : 0.53cm;
- line-height : 0.8em;
- p + * {
- margin-top : 0.325cm;
- }
- p + p{
- margin-top : 0;
- }
- ul{
- margin-bottom : 0.8em;
- }
- ol{
- margin-bottom : 0.8em;
- }
- em{
- text-decoration : underline;
- font-style : unset;
- }
- del{
- text-decoration-style: double;
- }
-
- //Indents after p or lists
- p+p, ul+p, ol+p{
- text-indent : 1em;
- }
- //*****************************
- // * HEADERS
- // *****************************/
- h1,h2,h3,h4,h5{
- font-family : FrederickaTheGreat;
- font-weight : unset;
- color : var(--HB_Color_HeaderText);
- }
- h1{
- margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE
- font-size : 0.89cm;
- line-height : 1em;
- font-variant : small-caps;
- &+p::first-letter{
- float : left;
- font-family : FrederickaTheGreat;
- line-height : 1em;
- font-size : 1.9em;
- padding-left : 40px; //Allow background color to extend into margins
- margin-top : -0.3cm;
- margin-bottom : -20px;
- margin-left : -40px;
- margin-right : 0.1em;
- padding-top : 0.3em;
- padding-bottom : 2px;
- }
- &+p::first-line{
- font-variant : small-caps;
- }
- }
- h2{
- font-size : 0.62cm;
- line-height : 0.988em; //Font is misaligned. Shift up slightly
- }
- h3{
- font-size : 0.575cm;
- line-height : 0.995em; //Font is misaligned. Shift up slightly
- margin-left : -0.9em;
- }
- h4{
- font-size : 0.55cm;
- line-height : 0.971em; //Font is misaligned. Shift up slightly
- color : var(--HB_Color_Text);
- padding-bottom : 5px;
- transform:rotate(0deg);
- &:nth-of-type(2n) {
- transform:rotate(1deg);
- }
- &:nth-of-type(3n) {
- transform:rotate(-1.5deg);
- }
- }
- h5{
- font-family : PermanentMarker;
- font-size : 0.4cm;
- color : var(--HB_Color_Text2);
- font-weight : bold;
- line-height : 0.951em; //Font is misaligned. Shift up slightly
- & + * {
- margin-top : 0.2cm;
- }
- }
- //*****************************
- // * TABLE
- // *****************************/
- table{
- .useSansSerif();
- & + * {
- margin-top : 0.325cm;
- }
- thead{
- th{
- vertical-align : bottom;
- padding : 0.14em 0;
- }
- }
- tbody{
- tr{
- td{
- padding : 0.14em 0;
- }
- &:nth-child(odd){
- background-image : linear-gradient(to left, #41212100, #41212122, #41212100);
- }
- }
- }
- }
- //*****************************
- // * NOTE
- // *****************************/
- .note{
- .useSansSerif();
- border-style : solid;
- border-width : 1px;
- border-image-source : url(/assets/Journal/Border1.png);
- border-image-slice : 18 18 18 18;
- border-image-width : 6px 6px 6px 6px;
- border-image-outset : 5px 5px 5px 5px;
- border-image-repeat : stretch stretch;
- background-image : url(/assets/Journal/HashMarks.png),
- linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
- background-size : 120% 120%;
- background-repeat : no-repeat;
- background-position : center;
- padding : 0.2cm;
- :where(&) {
- margin-top : 9px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.45cm;
- }
- h5 {
- font-size : 0.375cm;
- }
- p{
- padding-bottom : 0px;
- }
- :last-child {
- margin-bottom : 0;
- }
- }
- //************************************
- // * DESCRIPTIVE TEXT BOX
- // ************************************/
- * + .descriptive {
- margin-top : 0.6cm;
- }
- .descriptive{
- .useSansSerif();
- border-style : solid;
- border-width : 1px;
- border-image-source : url('/assets/Journal/Border2.png');
- border-image-slice : 48 48 48 48;
- border-image-width : 20px;
- border-image-outset : 16px 20px 16px 20px;
- border-image-repeat : stretch stretch;
- background-image : url(/assets/Journal/HashMarks.png),
- linear-gradient(to bottom right, #ff000000, #41212114, #41212100);
- background-size : 120% 120%;
- background-repeat : no-repeat;
- background-position : center;
- padding : 0.2cm;
- :where(&) {
- margin-top : 4px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.45cm;
- }
- h5 {
- font-size : 0.375cm;
- }
- p{
- padding-bottom : 0px;
- }
- :last-child {
- margin-bottom : 0;
- }
- }
- //*****************************
- // * Images Snippets
- // *****************************/
-
- /* Arist Credit */
- .artist {
- position : absolute;
- width : auto;
- text-align : center;
- font-family : WalterTurncoat;
- font-size : 0.27cm;
- color : var(--HB_Color_CaptionText);
- p, p + p {
- margin : unset;
- text-indent : unset;
- line-height : 1em;
- }
- h5 {
- font-size : 1.3em;
- font-family : WalterTurncoat;
- }
- a{
- color : inherit;
- text-decoration : unset;
- &:hover {
- text-decoration : underline;
- }
- }
- }
-
- //*****************************
- // * MONSTER STAT BLOCK
- // *****************************/
- .monster {
- .useSansSerif();
- &.frame {
- border-style : solid;
- border-width : 7px 6px;
- border-image-source : url('/assets/Journal/Border3.png');
- border-image-slice : 63 74 63 74;
- border-image-width : 15px 20px 15px 20px;
- border-image-outset : 12px 12px 12px 12px;
- border-image-repeat : stretch round;
- background-image : url('/assets/Journal/HashMarks.png'),
- linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
- background-blend-mode : screen multiply;
- background-size : 100%;
- padding : 0.2cm;
- }
-
- color: var(--HB_Color_Text);
- position : relative;
- padding : 0px;
- margin-bottom : 0.325cm;
-
- //Headers
- h2{
- font-size : 0.62cm;
- line-height : 1em;
- margin : 0;
- &+p {
- margin-bottom : 0; //Monster size and type subtext
- }
- }
- h3{
- margin-left : 0;
- font-variant : small-caps;
- padding-bottom : 0.05cm;
- }
- hr{
- visibility : visible;
- height : 6px;
- margin : 0.12cm 0cm;
- background-image : url('/assets/Journal/HorizontalRule.png');
- background-size : 100% 100%;
- }
- hr:last-of-type + * {
- margin-top : 0.325cm; // Space after last HR
- }
-
- // Monster Ability table
- hr + table:first-of-type{
- margin : 0;
- column-span : none;
- background-image : none;
- border-style : none;
- border-image : none;
- color : inherit;
- tr {
- background-image : none;
- }
- td,th {
- padding: 0px;
- }
- }
-
- :last-child {
- margin-bottom : 0;
- }
-
- strong, em {
- font-style : normal;
- text-decoration : none;
- }
- }
-
- //Full Width
- .monster.wide{
- .useColumns(0.96, @fillMode: balance);
- }
-
- //*****************************
- // * FOOTER
- // *****************************/
- &:nth-child(odd){
- .pageNumber{
- left : 3cm;
- }
- .footnote{
- left : 4.5cm;
- text-align : left;
- }
- }
- .pageNumber{
- font-family : FrederickaTheGreat;
- position : absolute;
- right : 3cm;
- bottom : 1.25cm;
- width : 50px;
- font-size : 0.9em;
- color : var(--HB_Color_HeaderText);
- text-align : center;
- text-indent : 0;
- &.auto::after {
- content : counter(phb-page-numbers);
- }
- }
- .footnote{
- position : absolute;
- right : 4.5cm;
- bottom : 1.25cm;
- z-index : 150;
- width : 200px;
- font-size : 0.8em;
- color : var(--HB_Color_HeaderText);
- text-align : right;
- }
- //************************************
- // * CODE BLOCKS
- // ************************************/
- code{
- font-size : 0.3cm;
- padding : 0px 4px;
- color : var(--HB_Color_Text);
- vertical-align : middle;
- background-color : #faf7ea;
- border-radius : 4px;
- }
-
- pre code{
- border-style : solid;
- border-width : 1px;
- border-image : @codeBorderImage 26 stretch;
- border-image-width : 10px;
- border-image-outset : 2px;
- border-radius : 12px;
- margin-bottom : 2px;
- padding : 0.15cm;
- .page :where(&) {
- margin-top : 2px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.325cm;
- }
- }
- //*****************************
- // * EXTRAS
- // *****************************/
- hr{
- visibility : hidden;
- border : none;
- margin : 0px;
- }
- //Text indent right after table
- table+p{
- text-indent : 1em;
- }
- a, a:visited, a:hover {
- color: var(--HB_Color_Text);
- transition:all 1s ease;
- }
- a:hover {
- color:red;
- }
- }
- //*****************************
- // * SPELL LIST
- // *****************************/
-
- .page .spellList{
- .useSansSerif();
- font-family : PermanentMarker;
- column-count : 2;
- ul+h5{
- margin-top : 15px;
- }
- 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{
- column-count : 4;
- }
- }
-
- //*****************************
- // * CLASS TABLE
- // *****************************/
- .page .classTable{
- th[colspan]:not([rowspan]) {
- white-space : nowrap;
- }
- h5 + table{
+ h5{
+ font-family : PermanentMarker;
+ font-size : 0.4cm;
+ color : var(--HB_Color_Text2);
+ font-weight : bold;
+ line-height : 0.951em; //Font is misaligned. Shift up slightly
+ & + * {
margin-top : 0.2cm;
}
}
//*****************************
- // * TABLE OF CONTENTS
+ // * TABLE
// *****************************/
- .page .toc{
- -webkit-column-break-inside : avoid;
- page-break-inside : avoid;
- break-inside : avoid;
- h1 {
- text-align : center;
- margin-bottom : 0.3cm;
+ table{
+ .useSansSerif();
+ & + * {
+ margin-top : 0.325cm;
+ }
+ thead{
+ th{
+ vertical-align : bottom;
+ padding : 0.14em 0;
+ }
+ }
+ tbody{
+ tr{
+ td{
+ padding : 0.14em 0;
+ }
+ &:nth-child(odd){
+ background-image : linear-gradient(to left, #41212100, #41212122, #41212100);
+ }
+ }
+ }
+ }
+ //*****************************
+ // * NOTE
+ // *****************************/
+ .note{
+ .useSansSerif();
+ border-style : solid;
+ border-width : 1px;
+ border-image-source : url(/assets/Journal/Border1.png);
+ border-image-slice : 18 18 18 18;
+ border-image-width : 6px 6px 6px 6px;
+ border-image-outset : 5px 5px 5px 5px;
+ border-image-repeat : stretch stretch;
+ background-image : url(/assets/Journal/HashMarks.png),
+ linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
+ background-size : 120% 120%;
+ background-repeat : no-repeat;
+ background-position : center;
+ padding : 0.2cm;
+ :where(&) {
+ margin-top : 9px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.45cm;
+ }
+ h5 {
+ font-size : 0.375cm;
+ }
+ p{
+ padding-bottom : 0px;
+ }
+ :last-child {
+ margin-bottom : 0;
+ }
+ }
+ //************************************
+ // * DESCRIPTIVE TEXT BOX
+ // ************************************/
+ * + .descriptive {
+ margin-top : 0.6cm;
+ }
+ .descriptive{
+ .useSansSerif();
+ border-style : solid;
+ border-width : 1px;
+ border-image-source : url('/assets/Journal/Border2.png');
+ border-image-slice : 48 48 48 48;
+ border-image-width : 20px;
+ border-image-outset : 16px 20px 16px 20px;
+ border-image-repeat : stretch stretch;
+ background-image : url(/assets/Journal/HashMarks.png),
+ linear-gradient(to bottom right, #ff000000, #41212114, #41212100);
+ background-size : 120% 120%;
+ background-repeat : no-repeat;
+ background-position : center;
+ padding : 0.2cm;
+ :where(&) {
+ margin-top : 4px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.45cm;
+ }
+ h5 {
+ font-size : 0.375cm;
+ }
+ p{
+ padding-bottom : 0px;
+ }
+ :last-child {
+ margin-bottom : 0;
+ }
+ }
+ //*****************************
+ // * Images Snippets
+ // *****************************/
+
+ /* Arist Credit */
+ .artist {
+ position : absolute;
+ width : auto;
+ text-align : center;
+ font-family : WalterTurncoat;
+ font-size : 0.27cm;
+ color : var(--HB_Color_CaptionText);
+ p, p + p {
+ margin : unset;
+ text-indent : unset;
+ line-height : 1em;
+ }
+ h5 {
+ font-size : 1.3em;
+ font-family : WalterTurncoat;
}
a{
- display : inline;
color : inherit;
- text-decoration : none;
- &:hover{
+ text-decoration : unset;
+ &:hover {
text-decoration : underline;
}
}
- h4 {
- margin-top : 0.2cm;
- line-height : 0.4cm;
- & + ul li {
- line-height: 1.2em;
- }
- }
- ul{
- padding-left : 0;
- list-style-type : none;
- li + li h3 {
- margin-top : 0.26cm;
- line-height : 1em
- }
- h3 span:first-child::after {
- border : none;
- }
- span {
- display : table-cell;
- &:first-child {
- position : relative;
- overflow : hidden;
- &::after {
- content : "";
- position : absolute;
- bottom : 0.08cm;
- margin-left : 0.06cm; /* Spacing before dot leaders */
- width : 100%;
- border-bottom : 0.05cm dotted #000;
- }
- }
- &:last-child {
- font-family : ReenieBeanie;
- font-size : 0.34cm;
- font-weight : normal;
- color : black;
- text-align : right;
- vertical-align : bottom; /* Keep page number bottom-aligned */
- width : 1%;
- padding-left : 0.06cm; /* Spacing after dot leaders */
- /*white-space : nowrap; /* Uncomment if needed */
- }
- }
- ul { /*List indent*/
- margin-left : 1em;
- }
- }
- &.wide{
- .useColumns(0.96, @fillMode: balance);
- }
}
//*****************************
- // * WIDE
+ // * MONSTER STAT BLOCK
// *****************************/
- .page .wide {
- margin-bottom : 0.45cm;
+ .monster {
+ .useSansSerif();
+ &.frame {
+ border-style : solid;
+ border-width : 7px 6px;
+ border-image-source : url('/assets/Journal/Border3.png');
+ border-image-slice : 63 74 63 74;
+ border-image-width : 15px 20px 15px 20px;
+ border-image-outset : 12px 12px 12px 12px;
+ border-image-repeat : stretch round;
+ background-image : url('/assets/Journal/HashMarks.png'),
+ linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
+ background-blend-mode : screen multiply;
+ background-size : 100%;
+ padding : 0.2cm;
+ }
+
+ color: var(--HB_Color_Text);
+ position : relative;
+ padding : 0px;
+ margin-bottom : 0.325cm;
+
+ //Headers
+ h2{
+ font-size : 0.62cm;
+ line-height : 1em;
+ margin : 0;
+ &+p {
+ margin-bottom : 0; //Monster size and type subtext
+ }
+ }
+ h3{
+ margin-left : 0;
+ font-variant : small-caps;
+ padding-bottom : 0.05cm;
+ }
+ hr{
+ visibility : visible;
+ height : 6px;
+ margin : 0.12cm 0cm;
+ background-image : url('/assets/Journal/HorizontalRule.png');
+ background-size : 100% 100%;
+ }
+ hr:last-of-type + * {
+ margin-top : 0.325cm; // Space after last HR
+ }
+
+ // Monster Ability table
+ hr + table:first-of-type{
+ margin : 0;
+ column-span : none;
+ background-image : none;
+ border-style : none;
+ border-image : none;
+ color : inherit;
+ tr {
+ background-image : none;
+ }
+ td,th {
+ padding: 0px;
+ }
+ }
+
+ :last-child {
+ margin-bottom : 0;
+ }
+
+ strong, em {
+ font-style : normal;
+ text-decoration : none;
+ }
+ }
+
+ //Full Width
+ .monster.wide{
+ .useColumns(0.96, @fillMode: balance);
+ }
+
+ //*****************************
+ // * FOOTER
+ // *****************************/
+ &:nth-child(odd){
+ .pageNumber{
+ left : 3cm;
+ }
+ .footnote{
+ left : 4.5cm;
+ text-align : left;
+ }
+ }
+ .pageNumber{
+ font-family : FrederickaTheGreat;
+ position : absolute;
+ right : 3cm;
+ bottom : 1.25cm;
+ width : 50px;
+ font-size : 0.9em;
+ color : var(--HB_Color_HeaderText);
+ text-align : center;
+ text-indent : 0;
+ &.auto::after {
+ content : counter(phb-page-numbers);
+ }
+ }
+ .footnote{
+ position : absolute;
+ right : 4.5cm;
+ bottom : 1.25cm;
+ z-index : 150;
+ width : 200px;
+ font-size : 0.8em;
+ color : var(--HB_Color_HeaderText);
+ text-align : right;
+ }
+ //************************************
+ // * CODE BLOCKS
+ // ************************************/
+ code{
+ font-size : 0.3cm;
+ padding : 0px 4px;
+ color : var(--HB_Color_Text);
+ vertical-align : middle;
+ background-color : #faf7ea;
+ border-radius : 4px;
+ }
+
+ pre code{
+ border-style : solid;
+ border-width : 1px;
+ border-image : @codeBorderImage 26 stretch;
+ border-image-width : 10px;
+ border-image-outset : 2px;
+ border-radius : 12px;
+ margin-bottom : 2px;
+ padding : 0.15cm;
+ .page :where(&) {
+ margin-top : 2px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.325cm;
+ }
+ }
+ //*****************************
+ // * EXTRAS
+ // *****************************/
+ hr{
+ visibility : hidden;
+ border : none;
+ margin : 0px;
+ }
+ //Text indent right after table
+ table+p{
+ text-indent : 1em;
+ }
+ a, a:visited, a:hover {
+ color: var(--HB_Color_Text);
+ transition:all 1s ease;
+ }
+ a:hover {
+ color:red;
}
}
+//*****************************
+// * SPELL LIST
+// *****************************/
+
+.page .spellList{
+ .useSansSerif();
+ font-family : PermanentMarker;
+ column-count : 2;
+ ul+h5{
+ margin-top : 15px;
+ }
+ 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{
+ column-count : 4;
+ }
+}
+
+//*****************************
+// * CLASS TABLE
+// *****************************/
+.page .classTable{
+ th[colspan]:not([rowspan]) {
+ white-space : nowrap;
+ }
+ h5 + table{
+ margin-top : 0.2cm;
+ }
+}
+//*****************************
+// * TABLE OF CONTENTS
+// *****************************/
+.page .toc{
+ -webkit-column-break-inside : avoid;
+ page-break-inside : avoid;
+ break-inside : avoid;
+ h1 {
+ text-align : center;
+ margin-bottom : 0.3cm;
+ }
+ a{
+ display : inline;
+ color : inherit;
+ text-decoration : none;
+ &:hover{
+ text-decoration : underline;
+ }
+ }
+ h4 {
+ margin-top : 0.2cm;
+ line-height : 0.4cm;
+ & + ul li {
+ line-height: 1.2em;
+ }
+ }
+ ul{
+ padding-left : 0;
+ list-style-type : none;
+ li + li h3 {
+ margin-top : 0.26cm;
+ line-height : 1em
+ }
+ h3 span:first-child::after {
+ border : none;
+ }
+ span {
+ display : table-cell;
+ &:first-child {
+ position : relative;
+ overflow : hidden;
+ &::after {
+ content : "";
+ position : absolute;
+ bottom : 0.08cm;
+ margin-left : 0.06cm; /* Spacing before dot leaders */
+ width : 100%;
+ border-bottom : 0.05cm dotted #000;
+ }
+ }
+ &:last-child {
+ font-family : ReenieBeanie;
+ font-size : 0.34cm;
+ font-weight : normal;
+ color : black;
+ text-align : right;
+ vertical-align : bottom; /* Keep page number bottom-aligned */
+ width : 1%;
+ padding-left : 0.06cm; /* Spacing after dot leaders */
+ /*white-space : nowrap; /* Uncomment if needed */
+ }
+ }
+ ul { /*List indent*/
+ margin-left : 1em;
+ }
+ }
+ &.wide{
+ .useColumns(0.96, @fillMode: balance);
+ }
+}
+
+//*****************************
+// * WIDE
+// *****************************/
+.page .wide {
+ margin-bottom : 0.45cm;
+}