From 0bf96cb9e207e9d15d53cbd0e9aba8fbe28629b2 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 27 Jan 2023 14:57:20 -0500 Subject: [PATCH] Add layers to all current themes --- themes/Legacy/5ePHB/style.less | 914 +++++++++++++-------------- themes/V3/5eDMG/style.less | 32 +- themes/V3/5ePHB/style.less | 3 +- themes/V3/Blank/style.less | 1 - themes/V3/Journal/style.less | 1052 ++++++++++++++++---------------- 5 files changed, 1003 insertions(+), 999 deletions(-) diff --git a/themes/Legacy/5ePHB/style.less b/themes/Legacy/5ePHB/style.less index 2793958fe..2544ff77d 100644 --- a/themes/Legacy/5ePHB/style.less +++ b/themes/Legacy/5ePHB/style.less @@ -1,497 +1,499 @@ -@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{ +@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(){ font-family : ScalySans; - font-style : italic; - } - strong{ - font-family : ScalySans; - font-weight : 800; - letter-spacing : -0.02em; - } -} -.useColumns(@multiplier : 1){ - column-count : 2; - column-fill : auto; - column-gap : 1cm; - column-width : 8cm * @multiplier; - -webkit-column-count : 2; - -moz-column-count : 2; - -webkit-column-width : 8cm * @multiplier; - -moz-column-width : 8cm * @multiplier; - -webkit-column-gap : 1cm; - -moz-column-gap : 1cm; -} -.phb{ - .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; + em{ + font-family : ScalySans; + font-style : italic; + } + strong{ + font-family : ScalySans; + font-weight : 800; + letter-spacing : -0.02em; } } - ul{ - margin-bottom : 0.8em; - padding-left : 1.4em; - line-height : 1.269em; - list-style-position : outside; - list-style-type : disc; + .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; } - ol{ - margin-bottom : 0.8em; - padding-left : 1.4em; - line-height : 1.269em; - list-style-position : outside; - list-style-type : decimal; - } - //Indents after p or lists - p+p, ul+p, ol+p{ - text-indent : 1em; - } - img{ - z-index : -1; - } - strong{ - font-weight : bold; - letter-spacing : 0.03em; - } - em{ - font-style : italic; - } - sup{ - vertical-align : super; - font-size : smaller; - line-height : 0; - } - sub{ - vertical-align : sub; - font-size : smaller; - line-height : 0; - } - //***************************** - // * HEADERS - // *****************************/ - h1,h2,h3,h4{ - margin-top : 0.2em; - margin-bottom : 0.2em; - font-family : MrJeeves; - font-weight : 800; - color : @headerText; - } - h1{ - column-span : all; - font-size : 0.987cm; - -webkit-column-span : all; - -moz-column-span : all; - &+p::first-letter{ - float : left; - font-family : Solberry; - font-size : 10em; - color : #222; - line-height : 0.795em; - } - } - h2{ - font-size : 0.705cm; - } - h3{ - font-size : 0.529cm; - border-bottom : 2px solid @headerUnderline; - } - h4{ - margin-bottom : 0.00em; - font-size : 0.458cm; - } - h5{ - margin-bottom : 0.2em; - font-family : ScalySansSmallCaps; - font-size : 0.423cm; - font-weight : 900; - } - //***************************** - // * TABLE - // *****************************/ - table{ - .useSansSerif(); - width : 100%; - margin-bottom : 1em; - font-size : 10pt; - thead{ - display: table-row-group; - font-weight : 800; - th{ - vertical-align : bottom; - padding-bottom : 0.3em; - padding-right : 0.1em; - padding-left : 0.1em; - } - } - tbody{ - tr{ - td{ - padding : 0.3em 0.1em; - } - &:nth-child(odd){ - background-color : @noteGreen; - } - } - } - } - //***************************** - // * NOTE - // *****************************/ - blockquote{ - .useSansSerif(); - box-sizing : border-box; - margin-bottom : 1em; - padding : 5px 10px; - background-color : @noteGreen; - border-style : solid; - border-width : 11px; - border-image : @noteBorderImage 11; - border-image-outset : 9px 0px; - box-shadow : 1px 4px 14px #888; - p, ul{ - font-size : 0.352cm; - line-height : 1.083em; - } - } - //If a note starts a column, give it space at the top to render border - pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote { - margin-top : 13px; - } - //***************************** - // * MONSTER STAT BLOCK - // *****************************/ - hr+blockquote{ - position : relative; - padding-top : 15px; - background-color : @monsterStatBackground; - border-style : solid; - border-width : 10px; - border-image : @monsterBorderImageLegacy 10; - h2{ - margin-top : -8px; - margin-bottom : 0px; + .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{ - padding-bottom : 0px; + margin-top : -0.8em; } } - 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; + margin-bottom : 0.8em; + padding-left : 1.4em; + line-height : 1.269em; + list-style-position : outside; + list-style-type : disc; } - // Monster Ability table - hr+table{ - margin : 0; - background-color : transparent; - border-style : none; - border-image : none; + 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:nth-child(odd), tr:nth-child(even){ - background-color : transparent; + tr{ + td{ + padding : 0.3em 0.1em; + } + &:nth-child(odd){ + background-color : @noteGreen; + } } } } - table{ - color : @headerText; + //***************************** + // * 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; + } } - p+p{ - margin-top : 0em; - padding-bottom : 0.5em; - text-indent : 0em; + //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; } - //Triangle dividers - hr{ - visibility : visible; - height : 6px; - margin : 4px 0px; - background-image : @redTriangleImage; - background-size : 100% 100%; - border : none; + //***************************** + // * 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){ + //Full Width + hr+hr+blockquote{ + .useColumns(0.96); + } + //***************************** + // * FOOTER + // *****************************/ &:after{ - transform : scaleX(-1); + 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{ - left : 2px; + 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{ - left : 80px; - text-align : left; + position : absolute; + right : 80px; + bottom : 32px; + z-index : 150; + width : 200px; + font-size : 0.8em; + color : #c9ad6a; + text-align : right; } - } - .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); + //***************************** + // * 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; } - } - .footnote{ - position : absolute; - right : 80px; - bottom : 32px; - z-index : 150; - width : 200px; - font-size : 0.8em; - color : #c9ad6a; - text-align : right; } //***************************** - // * EXTRAS + // * SPELL LIST // *****************************/ - hr{ - visibility : hidden; - margin : 0px; + .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; + } } - //Modified unorder list, used in spells - hr+ul{ - margin-bottom : 0.5em; - padding-left : 1em; - text-indent : -1em; - list-style-type : none; + //***************************** + // * WIDE + // *****************************/ + .phb .wide{ + column-span : all; + -webkit-column-span : all; + -moz-column-span : all; } - //Column Break - pre, code{ - visibility : hidden; - -webkit-column-break-after : always; - break-after : always; - -moz-column-break-after : always; + //***************************** + // * 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; + } } - //Avoid breaking up - p,blockquote,table{ - z-index : 15; - -webkit-column-break-inside : avoid; - page-break-inside : avoid; - break-inside : avoid; + //************************************ + // * 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; + } } - //Better spacing for spell blocks - h4+p+hr+ul{ - margin-top : -0.5em + .phb pre+.descriptive{ + margin-top : 8px; } - //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; + //***************************** + // * ARTIST CREDIT BLOCK + // *****************************/ + .phb { + .artist { + position : absolute; + text-align : center; font-family : WalterTurncoat; + font-size : 0.27cm; + color : @captionText; + p, p + p { + margin : unset; + text-indent : unset; + line-height : 0.941em; + } + h5 { + font-size : 1.3em; + font-family : WalterTurncoat; + } + a{ + color : inherit; + text-decoration : unset; + &:hover { + text-decoration : underline; + } + } } + } + //***************************** + // * TABLE OF CONTENTS + // *****************************/ + .phb .toc{ + -webkit-column-break-inside : avoid; + page-break-inside : avoid; + break-inside : avoid; a{ - color : inherit; - text-decoration : unset; - &:hover { + color : black; + text-decoration : none; + &:hover{ text-decoration : underline; } } - } -} -//***************************** -// * TABLE OF CONTENTS -// *****************************/ -.phb .toc{ - -webkit-column-break-inside : avoid; - page-break-inside : avoid; - break-inside : avoid; - a{ - color : black; - text-decoration : none; - &:hover{ - text-decoration : underline; + ul{ + padding-left : 0; + list-style-type : none; + } + &>ul>li{ + margin-bottom : 10px; } } - 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 50a3af0a3..02056a34b 100644 --- a/themes/V3/5eDMG/style.less +++ b/themes/V3/5eDMG/style.less @@ -1,19 +1,21 @@ -: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; +@layer V3_5eDMG { + :root { + //Colors + --HB_Color_Accent : #EBCEC3; // Salmon + --HB_Color_Footnotes : #5C5C5C; // Dark gray } - .footnote { - bottom : 40px; + .page { + background-image : url(/assets/DMG_background.png); + background-size : cover; + + &:after { + background-image : url(/assets/DMG_footerAccent.png); + height: 58px; + } + + .footnote { + bottom : 40px; + } } } diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index 155b32dfa..85dc566f4 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -1,5 +1,4 @@ -@layer V3_PHB { - +@layer V3_5ePHB { @import (less) './themes/fonts/5e/fonts.less'; @import (less) './themes/assets/assets.less'; diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index 68658a540..387b6612f 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -1,5 +1,4 @@ @layer V3_Blank { - @import (less) './themes/fonts/5e/fonts.less'; @import (less) './themes/assets/assets.less'; diff --git a/themes/V3/Journal/style.less b/themes/V3/Journal/style.less index 2e2ada5c8..f3b70cec2 100644 --- a/themes/V3/Journal/style.less +++ b/themes/V3/Journal/style.less @@ -1,559 +1,561 @@ -@import (less) './themes/fonts/Journal/fonts.less'; -@import (less) './themes/assets/assets.less'; +@layer V3_Journal { + @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; - line-height : 1.2em; - color : var(--HB_Color_Text2); - p,dl,ul,ol { + .useSansSerif(){ + font-family : PermanentMarker; + font-size : 0.3cm; 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; -} - -.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 - } - - & .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; + color : var(--HB_Color_Text2); + p,dl,ul,ol { + line-height : 1.2em; } - &+p::first-line{ - font-variant : small-caps; + ul, ol { + padding-left : 1em; + } + em{ + font-style : italic; + } + strong{ + font-weight : 800; + font-size : 1.1em; + } + h5 + * { + margin-top : 0.1cm; } } - h2{ - font-size : 0.62cm; - line-height : 0.988em; //Font is misaligned. Shift up slightly + .useColumns(@multiplier : 1, @fillMode: balance){ + column-gap : 0.5cm; } - 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); + + .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) { - transform:rotate(1deg); + background-position : right; + padding : 2.1cm 3.9cm 1.7cm 1.8cm; } - &:nth-of-type(3n) { - transform:rotate(-1.5deg); + &: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 } } - 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 - & + * { + + //***************************** + // * 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{ margin-top : 0.2cm; } } //***************************** - // * TABLE + // * TABLE OF CONTENTS // *****************************/ - 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; + .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 : unset; - &:hover { + text-decoration : none; + &: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 + h4 { + margin-top : 0.2cm; + line-height : 0.4cm; + & + ul li { + line-height: 1.2em; } } - 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; + ul{ + padding-left : 0; + list-style-type : none; + li + li h3 { + margin-top : 0.26cm; + line-height : 1em } - td,th { - padding: 0px; + h3 span:first-child::after { + border : none; } - } - - :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; + 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 */ } } - &: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; } } - ul { /*List indent*/ - margin-left : 1em; + &.wide{ + .useColumns(0.96, @fillMode: balance); } } - &.wide{ - .useColumns(0.96, @fillMode: balance); + + //***************************** + // * WIDE + // *****************************/ + .page .wide { + margin-bottom : 0.45cm; } } - -//***************************** -// * WIDE -// *****************************/ -.page .wide { - margin-bottom : 0.45cm; -}