From 767f03fba05ca21aedc2ae1857ebe8eea1219efd Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 21 Feb 2023 15:36:01 -0500 Subject: [PATCH] Disable @layers for now @Layers have too many conflicts with custom CSS styling. Delay until V4 renderer. --- client/homebrew/brewRenderer/brewRenderer.jsx | 3 +- client/homebrew/pages/printPage/printPage.jsx | 3 +- themes/Legacy/5ePHB/style.less | 930 +++++----- themes/V3/5eDMG/style.less | 32 +- themes/V3/5ePHB/style.less | 1532 ++++++++--------- themes/V3/Blank/style.less | 500 +++--- themes/V3/Journal/style.less | 1064 ++++++------ 7 files changed, 2028 insertions(+), 2036 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index f8a5fce0a..a41e01228 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -134,7 +134,8 @@ const BrewRenderer = createClass({ renderStyle : function() { if(!this.props.style) return; - return
@layer styleTab {\n${this.props.style}\n} ` }} />; + //return
@layer styleTab {\n${this.props.style}\n} ` }} />; + return
\n${this.props.style}\n` }} />; }, renderPage : function(pageText, index){ diff --git a/client/homebrew/pages/printPage/printPage.jsx b/client/homebrew/pages/printPage/printPage.jsx index c2e8c9b7b..37376d4b2 100644 --- a/client/homebrew/pages/printPage/printPage.jsx +++ b/client/homebrew/pages/printPage/printPage.jsx @@ -60,7 +60,8 @@ const PrintPage = createClass({ renderStyle : function() { if(!this.state.brew.style) return; - return
@layer styleTab {\n${this.state.brew.style}\n} ` }} />; + //return
@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; +}