@import (less) './themes/fonts/5e/fonts.less'; @import (less) './themes/assets/assets.less'; @import (less) './themes/fonts/icon fonts/font-icons.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 } .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; } } .useColumns(@multiplier : 1, @fillMode: auto) { 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; } .page { .useColumns(); font-family : 'BookInsanityRemake'; font-size : 0.34cm; background-image : @backgroundImage; } // ***************************** // * BASE // *****************************/ .page { p { line-height : 1.25em; & + * { margin-top : 0.325cm; } //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS & + p { margin-top : 0; } } ul { padding-left : 1.4em; margin-bottom : 0.8em; line-height : 1.25em; } ol { padding-left : 1.4em; margin-bottom : 0.8em; line-height : 1.25em; } //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; } // ***************************** // * HEADERS // *****************************/ h1,h2,h3,h4 { font-family : 'MrEavesRemake'; 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; padding-bottom : 2px; padding-left : 40px; //Allow background color to extend into margins margin-top : -0.3cm; margin-bottom : -20px; margin-left : -40px; font-family : 'SolberaImitationRemake'; font-size : 3.5cm; line-height : 1em; color : rgba(0, 0, 0, 0); background-image : linear-gradient(-45deg, #322814, #998250, #322814); -webkit-background-clip : text; background-clip : text; } & + 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;; line-height : 0.995em; //Font is misaligned. Shift up slightly border-bottom : 2px solid var(--HB_Color_HeaderUnderline); & + * { 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; line-height : 0.951em; //Font is misaligned. Shift up slightly & + * { margin-top : 0.2cm; } } // ***************************** // * TABLE // *****************************/ table { .useSansSerif(); line-height : 16px; & + * { margin-top : 0.325cm; } thead { display : table-row-group; font-weight : 800; th { //padding : 0.14em 0.4em; padding : 0px 1.5px; // Both of these are temporary, just to force vertical-align : bottom; //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); } } } } // ***************************** // * QUOTE // *****************************/ .quote { & > p { font-style : italic; line-height : 0.54cm; &:first-child::first-line { font-size : 0.38cm; font-style : normal; font-variant : small-caps; } } p + .attribution { margin-top : 0; } .attribution { display : block; font-style : normal; line-height : 0.54cm; text-align : right; &::before { margin-right : 0.2em; content : '---'; } } & + * { margin-top : 0.54cm; } } // ***************************** // * NOTE // *****************************/ .note { .useSansSerif(); padding : 0.13cm 0.16cm; background-color : var(--HB_Color_Accent); border-style : solid; border-width : 1px; border-image : @noteBorderImage 12 stretch; border-image-width : 11px; border-image-outset : 9px 0px; box-shadow : 1px 4px 14px #888888; .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(); padding : 0.1em; background-color : #FAF7EA; border-style : solid; border-width : 7px; border-image : @descriptiveBoxImage 12 stretch; border-image-outset : 4px; box-shadow : 0 0 6px #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; font-family : 'WalterTurncoat'; font-size : 0.27cm; color : var(--HB_Color_CaptionText); text-align : center; p, p + p { margin : unset; line-height : 1em; text-indent : unset; } h5 { font-family : 'WalterTurncoat'; font-size : 1.3em; } a { color : inherit; text-decoration : unset; &:hover { text-decoration : underline; } } } /* Watermark */ .watermark { color : black; } /* Watercolor */ .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 { width : calc(100% + 0.32cm); padding : 4px 2px; margin-right : -0.16cm; margin-left : -0.16cm; background-color : var(--HB_Color_MonsterStatBackground); background-image : @monsterBlockBackground; background-attachment : unset; background-blend-mode : overlay; border-style : solid; border-width : 7px 6px; border-image : @monsterBorderImage 14 round; border-image-outset : 0px 2px; box-shadow : 1px 4px 14px #888888; } position : relative; padding : 0px; margin-bottom : 0.325cm; //Headers h2 { margin : 0; font-size : 0.62cm; line-height : 1em; & + p { margin-bottom : 0; font-size : 0.304cm; //Monster size and type subtext } } h3 { font-family : 'ScalySansSmallCapsRemake'; font-size : 0.45cm; border-bottom : 1.5px solid var(--HB_Color_HeaderText); } //Triangle dividers hr { height : 6px; margin : 0.12cm 0cm; visibility : visible; 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; } } //indent fix after bulleted lists :is(ul,ol) + p { text-indent : 0; } :last-child { margin-bottom : 0; } } //Full Width .monster.wide { .useColumns(0.96, @fillMode: balance); } // ***************************** // * FOOTER // *****************************/ &::after { position : absolute; bottom : 0px; left : 0px; z-index : 100; width : 100%; height : 50px; content : ''; 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 { padding : 0px 4px; font-size : 0.325cm; color : #58180D; background-color : #FAF7EA; border-radius : 4px; } pre code { padding : 0.15cm; margin-bottom : 2px; border-style : solid; border-width : 1px; border-radius : 12px; border-image : @codeBorderImage 26 stretch; border-image-width : 10px; border-image-outset : 2px; .page :where(&) { margin-top : 2px; //Prevent top border getting cut off on colbreak } & + * { margin-top : 0.325cm; } } // ***************************** // * EXTRAS // *****************************/ hr { margin : 0px; visibility : hidden; } //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; } } // ***************************** // * SPELL LIST // *****************************/ .page .spellList { .useSansSerif(); column-count : 2; ul + h5 { margin-top : 15px; } p, ul { font-size : 0.352cm; line-height : 1.265em; } ul { padding-left : 1em; margin-bottom : 0.5em; 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 { width : calc(100% + 0.2cm); margin-top : 0.7cm; margin-right : -0.1cm; margin-bottom : 0.9cm; margin-left : -0.1cm; border-collapse : separate; background-color : white; border : initial; border-style : solid; border-image-source : @frameBorderImage; border-image-slice : 200; border-image-width : 47px; border-image-outset : 0.4cm 0.3cm; border-image-repeat : stretch; &.wide:first-child { margin-top : 0.12cm; } & + * { margin-top : 0; } } &.decoration { position : relative; } &.decoration::before { position : absolute; top : 50%; left : 50%; z-index : -1; width : 7.75cm; height : calc(100% + 3.3cm); content : ''; background-image : @classTableDecoration, @classTableDecoration; filter : drop-shadow(0px 0px 1px #C8C5C080); background-repeat : no-repeat, no-repeat; background-position : top, bottom; background-size : contain, contain; transform : translateY(-50%) translateX(-50%); } &.decoration.wide::before { width : calc(100% + 3.3cm); height : 7.75cm; background-position : left, right; } h5 + table { margin-top : 0.2cm; } } // ***************************** // * FRONT COVER PAGE // *****************************/ .page:has(.frontCover) { columns : 1; text-align : center; &::after { all : unset; } h1 { margin-top : 1.2cm; margin-bottom : 0; font-family : 'NodestoCapsCondensed'; font-size : 2.245cm; font-weight : normal; line-height : 0.85em; color : white; text-shadow : unset; text-transform : uppercase; filter : drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black); } h2 { font-family : 'NodestoCapsCondensed'; font-size : 0.85cm; font-weight : normal; color : white; letter-spacing : 0.1cm; filter : drop-shadow(0 0 1px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black); } hr { position : relative; display : block; width : 12cm; height : 0.5cm; margin : auto; visibility : visible; background-image : @horizontalRule; filter : drop-shadow(0 0 3px black); background-size : 100% 100%; border : none; } .banner { position : absolute; bottom : 4.2cm; left : 0; display : flex; flex-direction : column; justify-content : center; width : 10.5cm; height : 1.7cm; padding-top : 0.1cm; padding-left : 1cm; font-family : 'NodestoCapsCondensed'; font-size : 1cm; font-weight : normal; color : white; text-align : left; letter-spacing : 0.014cm; background-image : url('/assets/coverPageBanner.svg'); filter : drop-shadow(2px 2px 2px black); } .footnote { position : absolute; right : 0; bottom : 1.3cm; left : 0; width : 70%; margin-right : auto; margin-left : auto; font-family : 'Overpass'; font-size : 0.496cm; color : white; text-align : center; filter : drop-shadow(0 0 0.7px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black); } .logo { position : absolute; top : 0.5cm; right : 0; left : 0; filter : drop-shadow(0 0 0.075cm black); img { width : 100%; height : 2cm; } } } // ***************************** // * INSIDE COVER PAGE // *****************************/ .page:has(.insideCover) { columns : 1; text-align : center; &::after { all : unset; } h1 { margin-top : 1.2cm; margin-bottom : 0; font-family : 'NodestoCapsCondensed'; font-size : 2.1cm; font-weight : normal; line-height : 0.85em; text-transform : uppercase; } h2 { font-family : 'NodestoCapsCondensed'; font-size : 0.85cm; font-weight : normal; letter-spacing : 0.5cm; } hr { position : relative; display : block; width : 12cm; height : 0.5cm; margin : auto; visibility : visible; background-image : @horizontalRule; background-size : 100% 100%; border : none; } .logo { position : absolute; right : 0; bottom : 1cm; left : 0; height : 2cm; img { width : 100%; height : 2cm; } } } // ***************************** // * BACK COVER // *****************************/ .page:has(.backCover) { padding : 2.25cm 1.3cm 2cm 1.3cm; color : #FFFFFF; columns : 1; &::after { all : unset; } .columnWrapper { width : 7.6cm; } .backCover { position : absolute; inset : 0; z-index : -1; width : 11cm; background-image : @backCover; background-repeat : no-repeat; background-size : contain; } .blank { height : 1.4em; } h1 { margin-bottom : 0.3cm; font-family : 'NodestoCapsCondensed'; font-size : 1.35cm; line-height : 0.95em; color : #ED1C24; text-align : center; } h1 + p::first-line, h1 + p::first-letter { all : unset; } img { position : absolute; top : 0px; z-index : -2; height : 100%; } hr { width : 4.5cm; height : 0.53cm; margin-top : 1.1cm; margin-right : auto; margin-left : auto; visibility : visible; background-image : @horizontalRule; background-size : 100% 100%; border : none; } p { font-family : 'Overpass'; font-size : 0.332cm; line-height : 1.5em; } hr + p { margin-top : 0.6cm; text-align : center; } .logo { position : absolute; bottom : 2cm; left : 1.2cm; z-index : 0; width : 7.6cm; height : 1.5cm; img { position : relative; z-index : 0; width : 100%; height : 1.5cm; } p { position : relative; width : 100%; font-family : 'NodestoCapsWide'; font-size : 0.4cm; line-height : 1em; color : #FFFFFF; text-align : center; text-indent : 0; letter-spacing : 0.08em; } } } // ***************************** // * PART COVER // *****************************/ .page:has(.partCover) { padding-top : 0; text-align : center; columns : 1; .partCover { position : absolute; top : 0; left : 0; width : 100%; height : 6cm; background-image : @partCoverHeaderPHB; background-repeat : no-repeat; background-size : 100%; } h1 { position : relative; margin-top : 0.4cm; font-family : 'NodestoCapsCondensed'; font-size : 2.3cm; text-align : center; text-transform : uppercase; } h2 { position : relative; margin-top : -0.7em; margin-right : auto; margin-left : auto; font-family : 'Overpass'; font-size : 0.45cm; line-height : 1.1em; } } // ***************************** // * TABLE OF CONTENTS // *****************************/ .page { &:has(.toc)::after { display : none; } .toc { -webkit-column-break-inside : avoid; page-break-inside : avoid; break-inside : avoid; h1 { margin-bottom : 0.3cm; text-align : center; } 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; margin-top : 0; list-style-type : none; a { display : flex; flex-flow : row nowrap; justify-content : space-between; width : 100%; } li + li h3 { margin-top : 0.26cm; line-height : 1em; } h3 span:first-child::after { border : none; } span { display : contents; &:first-child::after { bottom : 0.08cm; flex : 1; margin-right : 0.16cm; margin-bottom : 0.08cm; margin-left : 0.08cm; /* Spacing before dot leaders */ content : ''; border-bottom : 0.05cm dotted #000000; } &:last-child { display : inline-block; align-self : flex-end; font-family : 'BookInsanityRemake'; font-size : 0.34cm; font-weight : normal; color : #000000; } } ul { /* List indent */ margin-left : 1em; } } &.wide { .useColumns(0.96, @fillMode: balance); } } } // ***************************** // * DEFINITION LISTS // *****************************/ .page { dl { line-height : 1.25em; & + * { margin-top : 0.17cm; } } p + dl { margin-top : 0.17cm; } dt { margin-right : 5px; margin-left : -1em; } } // ***************************** // * WIDE // *****************************/ .page .wide { margin-bottom : 0.325cm; } .page h1 + * { margin-top : 0; } //***************************** // * RUNE TABLE // *****************************/ .page { .runeTable { margin-block : 0.7cm; table { font-family : inherit; tbody tr { background : unset; } th, td { width : 1.3cm; height : 1.3cm; font-weight : normal; text-transform : uppercase; vertical-align : middle; outline : 1px solid #000000; } th { font-family : 'BookInsanityRemake'; font-size : 0.45cm; } td { font-size : 0.7cm; } } &.frame { border : initial; border-style : solid; border-image-source : @scriptBorder; border-image-slice : 170; border-image-width : 1.4cm; border-image-outset : 0.45cm 0.35cm 0.4cm 0.4cm; border-image-repeat : stretch; } } } // ***************************** // * INDEX // *****************************/ .page { .index { font-size : 0.218cm; ul ul { margin : 0; } ul { padding-left : 0; text-indent : 0; list-style-type : none; } & > ul > li { padding-left : 1.5em; text-indent : -1.5em; } } }