From 7c09956d7d90c9d9ebfe22059a20ba4fcd358ac8 Mon Sep 17 00:00:00 2001 From: Victor Losada Hernandez Date: Tue, 28 Feb 2023 22:27:51 +0100 Subject: [PATCH] last draft --- themes/V3/5ePHB/snippets/partcoverpage.gen.js | 15 +- themes/V3/5ePHB/style.less | 1963 +++++++++-------- 2 files changed, 1079 insertions(+), 899 deletions(-) diff --git a/themes/V3/5ePHB/snippets/partcoverpage.gen.js b/themes/V3/5ePHB/snippets/partcoverpage.gen.js index f4720d219..2fc4d52cd 100644 --- a/themes/V3/5ePHB/snippets/partcoverpage.gen.js +++ b/themes/V3/5ePHB/snippets/partcoverpage.gen.js @@ -38,16 +38,15 @@ var titles = [ ]; module.exports = ()=>{ - return ` -{{partCover + return `{{partCover}} + # PART X -## ${_.sample(titles)} - +## Developing and Using NPCs + +{{imageMaskEdge5,--offset:-12cm,--rotation:0 ![Background](https://i.imgur.com/dpg5qPT.png) }} - -{{pageNumber,auto}} -{{footnote PART X | SECTION NAME}} - + \\page`; }; \ No newline at end of file diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index e2bb085ce..10472307b 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -1,608 +1,751 @@ -@import (less) './themes/fonts/5e/fonts.less'; -@import (less) './themes/assets/assets.less'; +@layer V3_5ePHB { + @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; - line-height : 1.2em; - p,dl,ul,ol { - line-height : 1.2em; + @page { + margin: 0; } - ul, ol { - padding-left : 1em; + + body { + counter-reset: phb-page-numbers; } - em{ - font-style : italic; + + * { + -webkit-print-color-adjust: exact; } - strong{ - font-weight : 800; - letter-spacing : -0.02em; + + .useSansSerif() { + font-family: ScalySansRemake; + font-size: 0.318cm; + 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; + } } - 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; } -} -.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; -} + + .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; - } - &+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; + .page { p { - margin-bottom : none; - } - } + overflow-wrap: break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS + display: block; + line-height: 1.25em; - /* 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; - } + &+* { + margin-top: 0.325cm; + } - .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 + margin-top: 0; } } - // 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; + 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); } - td,th { - padding: 0px; + + &+p::first-line { + font-variant: small-caps; } } - :last-child { - margin-bottom : 0; + 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; } } - //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; - } //***************************** // * PART COVER // *****************************/ .page:has(.partCover) { padding-top: 0; - h1, h2 { + h1, + h2 { margin-inline: auto; text-align: center; column-span: all; } + .partCover { background-image: @partCoverHeader; background-repeat: no-repeat; @@ -611,357 +754,395 @@ body { top: 0; left: 0; height: 6cm; - width:100%; - z-index:-1; + width: 100%; } img { position: absolute; left: 0; - bottom: 0; + top: 0; height: 100%; - mask-image: @partCoverMaskOdd; - mask-size: 215.9mm; - -webkit-mask-image: @partCoverMaskOdd; - -webkit-mask-size: 215.9mm; - z-index:-2; + z-index: -1; } h1 { + position: relative; text-align: center; text-transform: uppercase; - font-size: 2.1cm; + font-size: 2.3cm; font-family: NodestoCapsCondensed; max-width: 6cm; text-overflow: clip; white-space: nowrap; overflow: hidden; margin-inline: auto; + margin-top: .4cm; } h2 { text-align: center; - font-family: MartelSansBlack; - font-size: 0.48cm; + font-family: Overpass; + font-size: 0.45cm; position: relative; max-width: 5cm; margin-inline: auto; - margin-top: -.4em; + margin-top: -0.7em; line-height: 1.1em; } + } - &:nth-child(even) img { - mask-image: @partCoverMaskEven; - -webkit-mask-image: @partCoverMaskEven; + + //***************************** + // * 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; } } -} -//***************************** -// * 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; + //***************************** + // * 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; + } } - & + * { + + //***************************** + // * COVER PAGE + // *****************************/ + .page:has(.coverPage) { + columns: 1; + text-align: center; + + &:after { + all: unset; + } + + .logo { + position: absolute; + top: 0.5cm; + left: 0; + right: 0; + filter: drop-shadow(0 0 0.075cm black); + + img { + height: 2cm; + width: 100%; + } + } + + .columnWrapper>p img { + position: absolute; + bottom: 0; + left: 0; + height: 100%; + min-width: 100%; + z-index: -1; + } + + h1 { + --shadow-x0: #000 0px 0px 0.1cm; + --shadow-x1: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0); + --shadow-x2: var(--shadow-x1), var(--shadow-x1), var(--shadow-x1); + --shadow-x3: var(--shadow-x2), var(--shadow-x2), var(--shadow-x2); + text-shadow: var(--shadow-x3), var(--shadow-x3), var(--shadow-x3); + text-transform: uppercase; + font-weight: normal; + display: block; + margin-top: 1.2cm; + margin-bottom: 0; + color: white; + font-family: NodestoCapsCondensed; + font-size: 2.245cm; + line-height: 0.85em; + } + + h2 { + --shadow-x0: #000 0px 0px 2.5px; + --shadow-x1: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0); + --shadow-x2: var(--shadow-x1), var(--shadow-x1), var(--shadow-x1); + --shadow-x3: var(--shadow-x2), var(--shadow-x2), var(--shadow-x2); + text-shadow: var(--shadow-x3), var(--shadow-x3), var(--shadow-x3); + font-family: NodestoCapsCondensed; + font-weight: normal; + font-size: 0.85cm; + letter-spacing: 0.1cm; + color: white; + } + + hr { + display: block; + position: relative; + background-image: @horizontalRule; + background-size: 100% 100%; + visibility: visible; + height: 0.5cm; + width: 12cm; + border: none; + margin: auto; + filter: drop-shadow(0 0 3px black); + } + + .banner { + filter: drop-shadow(2px 2px 2px #000); + position: absolute; + left: 0; + bottom: 4.2cm; + background-image: url('/assets/coverPageBanner.svg'); + height: 1.7cm; + width: 10.5cm; + color: white; + font-family: NodestoCapsCondensed; + font-weight: normal; + font-size: 1cm; + letter-spacing: 0.014cm; + text-align: left; + padding-left: 1cm; + display: flex; + justify-content: center; + flex-direction: column; + padding-top: 0.1cm; + } + + .footnote { + --shadow-x0: #000 0px 0px 0.05cm; + --shadow-x1: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0); + --shadow-x2: var(--shadow-x1), var(--shadow-x1), var(--shadow-x1); + text-shadow: var(--shadow-x2), var(--shadow-x2), var(--shadow-x2); + position: absolute; + text-align: center; + color: white; + font-size: 0.496cm; + bottom: 1.3cm; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 70%; + font-family: Overpass; + } + } + + + //***************************** + // * 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; } -} -&.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; -} -} -//***************************** -// * COVER PAGE -// *****************************/ -.page:has(.coverPage) { - columns : 1; - text-align : center; - &:after { - all: unset; - } - .logo { - position : absolute; - top : 0.5cm; - left : 0; - right : 0; - filter : drop-shadow(0 0 0.075cm black); - img { - height : 2cm; - width : 100%; - } - } - .columnWrapper > p img { - position : absolute; - bottom : 0; - left : 0; - height : 100%; - min-width : 100%; - z-index : -1; - } - h1 { - --shadow-x0 : #000 0px 0px 0.1cm; - --shadow-x1 : var(--shadow-x0), var(--shadow-x0), var(--shadow-x0); - --shadow-x2 : var(--shadow-x1), var(--shadow-x1), var(--shadow-x1); - --shadow-x3 : var(--shadow-x2), var(--shadow-x2), var(--shadow-x2); - text-shadow : var(--shadow-x3), var(--shadow-x3), var(--shadow-x3); - text-transform : uppercase; - font-weight : normal; - display : block; - margin-top : 1.2cm; - margin-bottom : 0; - color : white; - font-family : NodestoCapsCondensed; - font-size : 2.245cm; - line-height : 0.85em; - } - h2 { - --shadow-x0 : #000 0px 0px 2.5px; - --shadow-x1 : var(--shadow-x0), var(--shadow-x0), var(--shadow-x0); - --shadow-x2 : var(--shadow-x1), var(--shadow-x1), var(--shadow-x1); - --shadow-x3 : var(--shadow-x2), var(--shadow-x2), var(--shadow-x2); - text-shadow : var(--shadow-x3), var(--shadow-x3), var(--shadow-x3); - font-family : NodestoCapsCondensed; - font-weight : normal; - font-size : 0.85cm; - letter-spacing : 0.1cm; - color : white; - } - hr { - display : block; - position : relative; - background-image : @horizontalRule; - background-size : 100% 100%; - visibility : visible; - height : 0.5cm; - width : 12cm; - border : none; - margin : auto; - filter : drop-shadow(0 0 3px black); - } - .banner { - filter : drop-shadow(2px 2px 2px #000); - position : absolute; - left : 0; - bottom : 4.2cm; - background-image : url('/assets/coverPageBanner.svg'); - height : 1.7cm; - width : 10.5cm; - color : white; - font-family : NodestoCapsCondensed; - font-weight : normal; - font-size : 1cm; - letter-spacing : 0.014cm; - text-align : left; - padding-left : 1cm; - display : flex; - justify-content : center; - flex-direction : column; - padding-top : 0.1cm; - } - .footnote { - --shadow-x0 : #000 0px 0px 0.05cm; - --shadow-x1 : var(--shadow-x0), var(--shadow-x0), var(--shadow-x0); - --shadow-x2 : var(--shadow-x1), var(--shadow-x1), var(--shadow-x1); - text-shadow : var(--shadow-x2), var(--shadow-x2), var(--shadow-x2); - position : absolute; - text-align : center; - color : white; - font-size : 0.496cm; - bottom : 1.3cm; - left : 0; - right : 0; - margin-left : auto; - margin-right : auto; - width : 70%; - font-family : Overpass; - } -} - - -//***************************** -// * 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; -} +} \ No newline at end of file