From ca90a22c64f5c100be9c6d9492865b2e164933eb Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 19 Sep 2023 12:40:39 -0400 Subject: [PATCH] Run CSSLint --- themes/V3/5ePHB/style.less | 1076 ++++++++++++++++-------------------- 1 file changed, 477 insertions(+), 599 deletions(-) diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index 0aff3c4cd..f37dfae2b 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -14,35 +14,23 @@ --HB_Color_Footnotes : #C9AD6A; // Gold } -@page { margin: 0; } -body { - counter-reset : phb-page-numbers; -} -*{ - -webkit-print-color-adjust : exact; -} -.useSansSerif(){ - font-family : ScalySansRemake; +@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; - } - ul, ol { - padding-left : 1em; - } - em{ - font-style : italic; - } - strong{ + 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: auto){ +.useColumns(@multiplier : 1, @fillMode: auto) { column-count : 2; column-fill : @fillMode; column-gap : 0.9cm; @@ -54,190 +42,168 @@ body { -webkit-column-gap : 0.9cm; -moz-column-gap : 0.9cm; } -.columnWrapper{ +.columnWrapper { + column-gap : inherit; max-height : 100%; column-span : all; columns : inherit; - column-gap : inherit; } -.page{ +.page { .useColumns(); - counter-increment : phb-page-numbers; position : relative; z-index : 15; box-sizing : border-box; - overflow : hidden; - height : 279.4mm; width : 215.9mm; + height : 279.4mm; + padding : 1.4cm 1.9cm 1.7cm; + overflow : hidden; + font-family : "BookInsanityRemake"; + font-size : 0.34cm; + counter-increment : phb-page-numbers; 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 +//***************************** +// * BASE // *****************************/ .page { - p{ - overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS + p { display : block; line-height : 1.25em; - &+* { - margin-top : 0.325cm; - } - &+p{ - margin-top : 0; - } + overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS + & + * { margin-top : 0.325cm; } + & + p { margin-top : 0; } } - ul{ - margin-bottom : 0.8em; + ul { padding-left : 1.4em; + margin-bottom : 0.8em; line-height : 1.25em; list-style-position : outside; list-style-type : disc; } - ol{ - margin-bottom : 0.8em; + ol { padding-left : 1.4em; + margin-bottom : 0.8em; 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{ + 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{ + em { font-style : italic; } + sup { + font-size : smaller; + line-height : 0; vertical-align : super; - font-size : smaller; - line-height : 0; } - sub{ - vertical-align : sub; + sub { font-size : smaller; line-height : 0; + vertical-align : sub; } //***************************** // * HEADERS // *****************************/ - h1,h2,h3,h4{ - font-family : MrEavesRemake; + h1,h2,h3,h4 { + font-family : "MrEavesRemake"; font-weight : 800; color : var(--HB_Color_HeaderText); } - h1{ + 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{ + & + 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; + padding-left : 40px; //Allow background color to extend into margins + margin-top : -0.3cm; margin-bottom : -20px; - background-image : linear-gradient(-45deg, #322814, #998250, #322814); - background-clip : text; - -webkit-background-clip : text; + 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; - } + & + p::first-line { font-variant : small-caps; } } - h2{ + 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{ + 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);; + font-size : 0.575cm;; line-height : 0.995em; //Font is misaligned. Shift up slightly - & + * { - margin-top: 0.17cm; - } + border-bottom : 2px solid var(--HB_Color_HeaderUnderline); + & + * { margin-top : 0.17cm; } } * + h3 { margin-top : 0.155cm; //(0.325 - 0.17) } - h4{ + 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; - } + & + * { margin-top : 0.09cm; } } * + h4 { margin-top : 0.235cm; //(0.325 - 0.09) } - h5{ + h5 { //margin-top : -0.02cm; //Font is misaligned. Shift up slightly //margin-bottom : 0.02cm; - font-family : ScalySansSmallCapsRemake; + font-family : "ScalySansSmallCapsRemake"; font-size : 0.423cm; font-weight : 900; line-height : 0.951em; //Font is misaligned. Shift up slightly - & + * { - margin-top : 0.2cm; - } + & + * { margin-top : 0.2cm; } } //***************************** // * TABLE // *****************************/ - table{ + table { .useSansSerif(); width : 100%; line-height : 16px; - & + * { - margin-top : 0.325cm; - } - thead{ - display: table-row-group; + & + * { margin-top : 0.325cm; } + thead { + display : table-row-group; font-weight : 800; - th{ - vertical-align : bottom; + th { //padding : 0.14em 0.4em; - padding : 0px 1.5px; // Both of these are temporary, just to force + 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{ + 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); + //line-height : 16px; // PDF to render at same height until Chrome 108 } + &:nth-child(odd) { background-color : var(--HB_Color_Accent); } } } } @@ -246,36 +212,32 @@ body { // *****************************/ .quote { - &>p { - line-height :.54cm; - font-style: italic; + & > p { + font-style : italic; + line-height : 0.54cm; &:first-child::first-line { + font-size : 0.38cm; + font-style : normal; font-variant : small-caps; - font-style: normal; - font-size: 0.38cm; } } - p+.attribution { - margin-top: 0; - } + p + .attribution { margin-top : 0; } .attribution { - line-height: 0.54cm; - font-style: normal; - display: block; - text-align: right; + display : block; + font-style : normal; + line-height : 0.54cm; + text-align : right; - &:before { - content: '---'; - margin-right: .2em; + &::before { + margin-right : 0.2em; + content : '---'; } } - &+* { - margin-top: 0.54cm; - } + & + * { margin-top : 0.54cm; } } @@ -284,62 +246,50 @@ body { //***************************** // * NOTE // *****************************/ - .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-outset : 9px 0px; border-image-width : 11px; - padding : 0.13cm 0.16cm; - box-shadow : 1px 4px 14px #888; + 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{ + & + * { margin-top : 0.45cm; } + h5 { font-size : 0.375cm; } + p { display : block; padding-bottom : 0px; } - :last-child { - margin-bottom : 0; - } + :last-child { margin-bottom : 0; } } //************************************ // * DESCRIPTIVE TEXT BOX // ************************************/ - .descriptive{ + .descriptive { .useSansSerif(); - background-color : #faf7ea; + padding : 0.1em; + background-color : #FAF7EA; border-style : solid; border-width : 7px; border-image : @descriptiveBoxImage 12 stretch; border-image-outset : 4px; - padding : 0.1em; - box-shadow : 0 0 6px #faf7ea; + 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{ + & + * { margin-top : 0.45cm; } + h5 { font-size : 0.375cm; } + p { display : block; padding-bottom : 0px; line-height : 1.5em; } - :last-child { - margin-bottom : 0; - } + :last-child { margin-bottom : 0; } } //***************************** // * Images Snippets @@ -349,76 +299,72 @@ body { .artist { position : absolute; width : auto; - text-align : center; - font-family : WalterTurncoat; + font-family : "WalterTurncoat"; font-size : 0.27cm; color : var(--HB_Color_CaptionText); + text-align : center; p, p + p { margin : unset; - text-indent : unset; line-height : 1em; + text-indent : unset; } - h5 { + h5 { + font-family : "WalterTurncoat"; font-size : 1.3em; - font-family : WalterTurncoat; } - a{ + a { color : inherit; text-decoration : unset; - &:hover { - text-decoration : underline; - } + &:hover { text-decoration : underline; } } } /* Watermark */ .watermark { - display : grid !important; - place-items : center; - justify-content : center; position : absolute; top : 0; left : 0; + z-index : 500; + display : grid !important; + place-items : center; + justify-content : center; width : 100%; height : 100%; font-size : 120px; - text-transform : uppercase; color : black; + text-transform : uppercase; mix-blend-mode : overlay; opacity : 30%; transform : rotate(-45deg); - z-index : 500; - p { - margin-bottom : none; - } + p { margin-bottom : none; } } /* Watercolor */ - [class*="watercolor"] { + [class*='watercolor'] { position : absolute; + z-index : -2; 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 */ + background-color : var(--HB_Color_WatercolorStain); /* default color */ + background-size : cover; -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; + --wc : @watercolor1; /* default image */ } - .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; } + .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; } @@ -429,19 +375,19 @@ body { .monster { .useSansSerif(); &.frame { - border-style : solid; - border-width : 7px 6px; + 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 : fixed; + background-blend-mode : overlay; + border-style : solid; + border-width : 7px 6px; border-image : @monsterBorderImage 14 round; border-image-outset : 0px 2px; - background-blend-mode : overlay; - background-attachment : fixed; - box-shadow : 1px 4px 14px #888; - padding : 4px 2px; - margin-left : -0.16cm; - margin-right : -0.16cm; - width : calc(100% + 0.32cm); + box-shadow : 1px 4px 14px #888888; } position : relative; @@ -449,38 +395,36 @@ body { margin-bottom : 0.325cm; //Headers - h2{ + h2 { + margin : 0; font-size : 0.62cm; line-height : 1em; - margin : 0; - &+p { - font-size : 0.304cm; //Monster size and type subtext + & + p { margin-bottom : 0; + font-size : 0.304cm; //Monster size and type subtext } } - h3{ - font-family : ScalySansRemake; + h3 { + // margin-top : 0.05cm; //Font is misaligned. Shift up slightly + padding-bottom : 0.05cm; + 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; + 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 ~ :is(dl,p) { color : var(--HB_Color_HeaderText); } hr:last-of-type { & ~ :is(dl,p) { color : inherit; // After the HRs, reset text to black @@ -491,7 +435,7 @@ body { } // Monster Ability table - hr + table:first-of-type{ + hr + table:first-of-type { margin : 0; column-span : none; color : var(--HB_Color_HeaderText); @@ -499,51 +443,41 @@ body { border-style : none; border-image : none; -webkit-column-span : none; - tr { - background-color : transparent; - } - td,th { - padding: 0px; - } + tr { background-color : transparent; } + td,th { padding : 0px; } } - :last-child { - margin-bottom : 0; - } + :last-child { margin-bottom : 0; } } //Full Width - .monster.wide{ + .monster.wide { .useColumns(0.96, @fillMode: balance); } //***************************** // * FOOTER // *****************************/ - &:after{ - content : ""; + &:after { position : absolute; bottom : 0px; left : 0px; z-index : 100; - height : 50px; width : 100%; + height : 50px; + content : ''; background-image : @footerAccentImage; background-size : cover; } - &:nth-child(even){ - &:after{ - transform : scaleX(-1); - } - .pageNumber{ - left : 2px; - } - .footnote{ + &:nth-child(even) { + &::after { transform : scaleX(-1); } + .pageNumber { left : 2px; } + .footnote { left : 80px; text-align : left; } } - .pageNumber{ + .pageNumber { position : absolute; right : 2px; bottom : 22px; @@ -552,11 +486,9 @@ body { color : var(--HB_Color_Footnotes); text-align : center; text-indent : 0; - &.auto::after { - content : counter(phb-page-numbers); - } + &.auto::after { content : counter(phb-page-numbers); } } - .footnote{ + .footnote { position : absolute; right : 80px; bottom : 32px; @@ -569,41 +501,39 @@ body { //************************************ // * CODE BLOCKS // ************************************/ - code{ - font-family : "Courier New", Courier, monospace; - font-size : 0.325; + code { padding : 0px 4px; - color : #58180d; - background-color : #faf7ea; - border-radius : 4px; - white-space : pre-wrap; + font-family : 'Courier New', "Courier", monospace; + font-size : 0.325; + color : #58180D; overflow-wrap : break-word; + white-space : pre-wrap; + background-color : #FAF7EA; + border-radius : 4px; } - pre code{ - width : 100%; + pre code { display : inline-block; + width : 100%; + 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; - 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; - } + & + * { margin-top : 0.325cm; } } //***************************** // * EXTRAS // *****************************/ - hr{ - visibility : hidden; + hr { margin : 0px; + visibility : hidden; } .columnSplit { visibility : hidden; @@ -612,22 +542,20 @@ body { -moz-column-break-after : always; } //Avoid breaking up - blockquote,table{ + 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; - } + table + p { text-indent : 1em; } // Nested lists - ul ul,ol ol,ul ol,ol ul{ + ul ul,ol ol,ul ol,ol ul { margin-bottom : 0px; margin-left : 1.5em; } - li{ + li { -webkit-column-break-inside : avoid; page-break-inside : avoid; break-inside : avoid; @@ -636,86 +564,72 @@ body { //***************************** // * SPELL LIST // *****************************/ -.page .spellList{ +.page .spellList { .useSansSerif(); column-count : 2; - ul+h5{ - margin-top : 15px; - } - p, ul{ + ul + h5 { margin-top : 15px; } + p, ul { font-size : 0.352cm; line-height : 1.265em; } - ul{ - margin-bottom : 0.5em; + 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; - } + &.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; +.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; } } - & + * { - 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 { - 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; -} + &.decoration.wide::before { + width : calc(100% + 3.3cm); + height : 7.75cm; + background-position : left, right; + } + h5 + table { margin-top : 0.2cm; } } //***************************** // * FRONT COVER PAGE @@ -723,93 +637,91 @@ h5 + table{ .page:has(.frontCover) { columns : 1; text-align : center; - &:after { - all: unset; - } + &::after { all : unset; } h1 { - text-shadow: unset; - 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); - text-transform : uppercase; - font-weight : normal; margin-top : 1.2cm; margin-bottom : 0; - color : white; - font-family : NodestoCapsCondensed; + 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 { - 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); - font-family : NodestoCapsCondensed; - font-weight : normal; + font-family : "NodestoCapsCondensed"; font-size : 0.85cm; - letter-spacing : 0.1cm; + 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 { - display : block; position : relative; - background-image : @horizontalRule; - background-size : 100% 100%; - visibility : visible; - height : 0.5cm; + display : block; width : 12cm; - border : none; + height : 0.5cm; margin : auto; + visibility : visible; + background-image : @horizontalRule; filter : drop-shadow(0 0 3px black); + background-size : 100% 100%; + border : none; } .banner { - filter : drop-shadow(2px 2px 2px black); 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; + left : 0; display : flex; - justify-content : center; 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 { - 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); position : absolute; - text-align : center; - color : white; - font-size : 0.496cm; + right : 0; bottom : 1.3cm; left : 0; - right : 0; - margin-left : auto; - margin-right : auto; width : 70%; - font-family : Overpass; + 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; - left : 0; right : 0; + left : 0; filter : drop-shadow(0 0 0.075cm black); img { - height : 2cm; width : 100%; + height : 2cm; } } } @@ -819,44 +731,42 @@ h5 + table{ .page:has(.insideCover) { columns : 1; text-align : center; - &:after { - all : unset; - } + &::after { all : unset; } h1 { - font-family : NodestoCapsCondensed; - font-weight : normal; - font-size : 2.1cm; margin-top : 1.2cm; margin-bottom : 0; - text-transform : uppercase; + font-family : "NodestoCapsCondensed"; + font-size : 2.1cm; + font-weight : normal; line-height : 0.85em; + text-transform : uppercase; } h2 { - font-family : NodestoCapsCondensed; - font-weight : normal; + font-family : "NodestoCapsCondensed"; font-size : 0.85cm; + font-weight : normal; letter-spacing : 0.5cm; } hr { - display : block; position : relative; + display : block; + width : 12cm; + height : 0.5cm; + margin : auto; + visibility : visible; background-image : @horizontalRule; background-size : 100% 100%; - visibility : visible; - height : 0.5cm; - width : 12cm; border : none; - margin : auto; } .logo { position : absolute; + right : 0; bottom : 1cm; - left : 0; - right : 0; - height : 2cm; + left : 0; + height : 2cm; img { - height : 2cm; width : 100%; + height : 2cm; } } } @@ -864,206 +774,190 @@ h5 + table{ // * BACK COVER // *****************************/ .page:has(.backCover) { - color: #fff; - columns: 1; - padding: 2.25cm 1.3cm 2cm 1.3cm; - &:after { - all: unset; - } - .columnWrapper { - width: 7.6cm; - } + padding : 2.25cm 1.3cm 2cm 1.3cm; + color : #FFFFFF; + columns : 1; + &::after { all : unset; } + .columnWrapper { width : 7.6cm; } .backCover { - position: absolute; - inset: 0; - width: 11cm; - background-image: @backCover; - background-repeat: no-repeat; - background-size: contain; - z-index: -1; - } - .blank { - height: 1.4em; + 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: .3cm; - font-size: 1.35cm; - line-height: 0.95em; - font-family: NodestoCapsCondensed; - text-align: center; - color: #ED1C24; - } - h1+p::first-line, - h1+p::first-letter { - all: unset; + 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; - height: 100%; - z-index: -2; + position : absolute; + top : 0px; + z-index : -2; + height : 100%; } hr { - margin-left: auto; - margin-right: auto; - margin-top: 1.1cm; - height: .53cm; - width: 4.5cm; - visibility: visible; - background-image: @horizontalRule; - background-size: 100% 100%; - border: none; + 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; - line-height: 1.5em; - font-size: 0.332cm; + font-family : "Overpass"; + font-size : 0.332cm; + line-height : 1.5em; } - hr+p { - text-align: center; - margin-top: .6cm; + hr + p { + margin-top : 0.6cm; + text-align : center; } .logo { - position: absolute; - z-index: 0; - height: 1.5cm; - left: 1.2cm; - bottom: 2cm; - width: 7.6cm; + position : absolute; + bottom : 2cm; + left : 1.2cm; + z-index : 0; + width : 7.6cm; + height : 1.5cm; img { - position: relative; - height : 1.5cm; - width : 100%; - z-index : 0; + position : relative; + z-index : 0; + width : 100%; + height : 1.5cm; } p { - position: relative; - color: #fff; - font-family: NodestoCapsWide; - font-size: .4cm; - letter-spacing: 0.08em; - line-height: 1em; - text-align: center; - text-indent: 0; - width: 100%; + 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 +// * PART COVER // *****************************/ .page:has(.partCover) { - columns : 1; - text-align : center; - padding-top: 0; + padding-top : 0; + text-align : center; + columns : 1; - .partCover { - background-image: @partCoverHeaderPHB; - background-repeat: no-repeat; - position: absolute; - background-size: 100%; - top: 0; - left: 0; - height: 6cm; - width: 100%; - } - - h1 { - position: relative; - text-align: center; - text-transform: uppercase; - font-size: 2.3cm; - font-family: NodestoCapsCondensed; - margin-top: .4cm; - } - - h2 { - font-family: Overpass; - font-size: 0.45cm; - position: relative; - margin-top: -0.7em; - line-height: 1.1em; - margin-left : auto; - margin-right : auto; - } + .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 { - text-align : center; - margin-bottom : 0.3cm; - } - a{ - display : inline; - color : inherit; - text-decoration : none; - &:hover{ - text-decoration : underline; + &: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; } - } - 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; + display : inline; + color : inherit; + text-decoration : none; + &:hover { text-decoration : underline; } } - li + li h3 { - margin-top : 0.26cm; - line-height : 1em + h4 { + margin-top : 0.2cm; + line-height : 0.4cm; + & + ul li { line-height : 1.2em; } } - 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; + ul { + padding-left : 0; + margin-top : 0; + list-style-type : none; + a { + display : flex; + flex-flow : row nowrap; + justify-content : space-between; + width : 100%; } - &:last-child { - display : inline-block; - align-self : flex-end; - font-family : "BookInsanityRemake"; - font-size : 0.34cm; - font-weight : normal; - color : #000; + 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; } } - ul { /*List indent*/ - margin-left : 1em; + &.wide { + .useColumns(0.96, @fillMode: balance); } } - &.wide{ - .useColumns(0.96, @fillMode: balance); - } -} } //***************************** @@ -1071,78 +965,64 @@ break-inside : avoid; // *****************************/ .page { dl { - line-height : 1.25em; padding-left : 1em; + line-height : 1.25em; white-space : pre-line; - & + * { - margin-top : 0.28cm; - } + & + * { margin-top : 0.28cm; } } - dl + * { - margin-top : 0.17cm; - } - p + dl { - margin-top: 0.17cm; - } - dt { - display : inline; - margin-right : 5px; + dl + * { margin-top : 0.17cm; } + p + dl { margin-top : 0.17cm; } + dt { + display : inline; + margin-right : 5px; margin-left : -1em; - } - dd { + } + dd { display : inline; margin-left : 0px; text-indent : 0px; - } + } } //***************************** // * WIDE // *****************************/ -.page .wide{ - margin-bottom : 0.325cm; -} +.page .wide { margin-bottom : 0.325cm; } -.page h1 + *{ - margin-top : 0; -} +.page h1 + * { margin-top : 0; } //***************************** // * RUNE TABLE // *****************************/ .page { .runeTable { - margin-block: 0.7cm; + margin-block : 0.7cm; table { font-family : inherit; - tbody tr { - background: unset; - } + tbody tr { background : unset; } th, td { - width: 1.3cm; - height: 1.3cm; - vertical-align: middle; - text-transform: uppercase; - outline: 1px solid #000; - font-weight: normal; + 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; + th { + font-family : "BookInsanityRemake"; + font-size : 0.45cm; } + td { font-size : 0.7cm; } } &.frame { - border: initial; - border-style: solid; - border-image-outset: .45cm .35cm .4cm .4cm; - border-image-repeat: stretch; - border-image-slice: 170; - border-image-source: @scriptBorder; - border-image-width: 1.4cm; + 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; } } } @@ -1153,9 +1033,7 @@ break-inside : avoid; .index { font-size : 0.218cm; - ul ul { - margin : 0; - } + ul ul { margin : 0; } ul { padding-left : 0; @@ -1164,8 +1042,8 @@ break-inside : avoid; } & > ul > li { - text-indent : -1.5em; padding-left : 1.5em; + text-indent : -1.5em; } } }