diff --git a/shared/homebrewery/phb_style/img/footer_flip.png b/shared/homebrewery/phb_style/img/footer_flip.png new file mode 100644 index 0000000..6e512af Binary files /dev/null and b/shared/homebrewery/phb_style/img/footer_flip.png differ diff --git a/shared/homebrewery/phb_style/phb.blocks.less b/shared/homebrewery/phb_style/phb.blocks.less index 82f7877..2e3c777 100644 --- a/shared/homebrewery/phb_style/phb.blocks.less +++ b/shared/homebrewery/phb_style/phb.blocks.less @@ -1,19 +1,5 @@ -.breakAvoid(){ - column-break-inside : avoid; - -webkit-column-break-inside : avoid; -} -.pseudoBorder(){ - position : relative; - &:before{ - content : ''; - position : absolute; - z-index : -1; - box-sizing : border-box; - border-style : solid; - border-image-repeat : round; - } -} + /////////////////// .spell{ ul:first-of-type{ @@ -54,7 +40,7 @@ .breakAvoid(); .pseudoBorder(); margin : 9px 0px; - padding : 12px 5px; + padding : 17px 5px; &:before{ top : 9px; right : 0px; @@ -100,6 +86,46 @@ border-image-width : 47px; } } + +.footnote{ + position : absolute; + right : 80px; + bottom : 28px; + z-index : 150; + width : 200px; + font-size : 0.9em; + color : @gold; + text-align : right; +} + + +//***************************** +// * TABLE OF CONTENTS +// *****************************/ +.toc{ + .breakAvoid(); + a{ + color : black; + text-decoration : none; + &:hover{ + text-decoration : underline; + } + } + ul{ + padding-left : 0; + list-style-type : none; + } + &>ul>li{ + margin-bottom : 10px; + } +} + + + + + + + .wide{ column-span : all; -webkit-column-span : all; diff --git a/shared/homebrewery/phb_style/phb.elements.less b/shared/homebrewery/phb_style/phb.elements.less new file mode 100644 index 0000000..bebe734 --- /dev/null +++ b/shared/homebrewery/phb_style/phb.elements.less @@ -0,0 +1,172 @@ +pre{ + font-family : monospace; + background-color : @yellow; + padding : 12px; + border: 1px solid #bfbfbf; + white-space: pre-wrap; + color : #333; + -webkit-column-break-inside : avoid; + column-break-inside : avoid; +} + + +hr{ + visibility : visible; + height : 6px; + margin : 4px 0px; + background-image : @dividerImg; + background-size : 100% 100%; + border : none; +} + + +p{ + padding-bottom : 0.8em; + line-height : 1.3em; + &+p{ + margin-top : -0.8em; + } +} + +blockquote{ + font-style : italic; + &>p{ + line-height: 1.8em; + &:first-child::first-line{ + + //TODO: Find the right font for block quotes + font-style: normal; + font-family: ScalySansSmallCaps; + + + } + } + .cite{ + font-style: normal; + text-align: right; + } + + +} + +//Indents after p or lists +p+p, ul+p, ol+p{ + text-indent : 1em; +} +img{ + z-index : -1; +} +strong{ + font-weight : bold; + letter-spacing : 0.03em; +} +em{ + font-style : italic; +} +sup{ + vertical-align : super; + font-size : smaller; + line-height : 0; +} +sub{ + vertical-align : sub; + font-size : smaller; + line-height : 0; +} +//***************************** +// * HEADERS +// *****************************/ +h1,h2,h3,h4{ + margin-top : 0.2em; + margin-bottom : 0.2em; + font-family : MrEaves; + font-weight : 800; + color : @headerText; +} +h1{ + column-span : all; + font-size : 0.987cm; + -webkit-column-span : all; + -moz-column-span : all; + &+p::first-letter{ + float : left; + font-family : Solbera; + font-size : 10em; + color : #222; + line-height : 0.8em; + } +} +h2{ + font-size : 0.705cm; +} +h3{ + font-size : 0.529cm; + border-bottom : 2px solid @headerUnderline; +} +h4{ + margin-bottom : 0.00em; + font-size : 0.458cm; +} +h5{ + margin-bottom : 0.2em; + font-family : ScalySansSmallCaps; + font-size : 0.423cm; + font-weight : 900; +} + + +//****************************** +// LISTS +//****************************** +ul ul,ol ol,ul ol,ol ul{ + margin-bottom : 0px; + margin-left : 1.5em; +} +li{ + -webkit-column-break-inside : avoid; + column-break-inside : avoid; +} +ul{ + margin-bottom : 0.8em; + padding-left : 1.4em; + line-height : 1.3em; + list-style-position : outside; + list-style-type : disc; +} +ol{ + margin-bottom : 0.8em; + padding-left : 1.4em; + line-height : 1.3em; + list-style-position : outside; + list-style-type : decimal; +} + + +//***************************** +// * TABLE +// *****************************/ +table{ + .useSansSerif(); + width : 100%; + margin-bottom : 1em; + font-size : 10pt; + thead{ + font-weight : 800; + th{ + vertical-align : bottom; + padding-bottom : 0.3em; + padding-right : 0.1em; + padding-left : 0.1em; + } + } + tbody{ + tr{ + td{ + padding : 0.3em 0.1em; + } + &:nth-child(odd){ + background-color : @green; + } + } + } +} \ No newline at end of file diff --git a/shared/homebrewery/phb_style/phb.fonts.less b/shared/homebrewery/phb_style/phb.fonts.less index 976972f..e6ec1a8 100644 --- a/shared/homebrewery/phb_style/phb.fonts.less +++ b/shared/homebrewery/phb_style/phb.fonts.less @@ -53,18 +53,3 @@ font-weight: normal; font-style: normal; } - -//TODO: move the useSansSerif into here - -.useSansSerif(){ - font-family : ScalySans; - em{ - font-family : ScalySans; - font-style : italic; - } - strong{ - font-family : ScalySans; - font-weight : 800; - letter-spacing : -0.02em; - } -} \ No newline at end of file diff --git a/shared/homebrewery/phb_style/phb.img.less b/shared/homebrewery/phb_style/phb.img.less index 00f1bf0..5328fa2 100644 --- a/shared/homebrewery/phb_style/phb.img.less +++ b/shared/homebrewery/phb_style/phb.img.less @@ -1,4 +1,5 @@ @footerImg : url('/assets/homebrewery/phb_style/img/footer.png'); +@footerFlipImg : url('/assets/homebrewery/phb_style/img/footer_flip.png'); @dividerImg : url('/assets/homebrewery/phb_style/img/divider.png'); @frameBorder : url('/assets/homebrewery/phb_style/img/frame_border.png'); diff --git a/shared/homebrewery/phb_style/phb.less b/shared/homebrewery/phb_style/phb.less index 35c4e8b..e9adf63 100644 --- a/shared/homebrewery/phb_style/phb.less +++ b/shared/homebrewery/phb_style/phb.less @@ -1,3 +1,6 @@ + +//TODO: Remove this +/* @media print { .phb.v2{ .descriptive, blockquote{ @@ -5,29 +8,16 @@ } } } - +*/ .phb.v2{ + @import './phb.mixins.less'; @import './phb.fonts.less'; @import './phb.colors.less'; @import './phb.img.less'; @import './phb.blocks.less'; - - - @page { margin: 0; } //TODO: ???? - - - .useColumns(){ - column-count : 2; - column-fill : auto; - column-gap : 1cm; - column-width : 8cm; - } - & *{ - -webkit-print-color-adjust : exact; - } - .useColumns(); + @import './phb.elements.less'; counter-increment : phb-page-numbers; position : relative; z-index : 15; @@ -37,6 +27,10 @@ width : 215.9mm; padding : 1.0cm 1.7cm; padding-bottom : 1.5cm; + column-count : 2; + column-fill : auto; + column-gap : 1cm; + column-width : 8cm; background-color : @background; background-image : @phbBG; font-family : BookInsanity; @@ -44,167 +38,56 @@ text-rendering : optimizeLegibility; page-break-before : always; page-break-after : always; - - - /* CODE */ - pre{ - font-family : monospace; - background-color : @yellow; - padding : 12px; - border: 1px solid #bfbfbf; - white-space: pre-wrap; - color : #333; - -webkit-column-break-inside : avoid; - column-break-inside : avoid; + @page { margin: 0; } //TODO: ???? + & *{ + -webkit-print-color-adjust : exact; + } + //***************************** + // * FOOTER + // *****************************/ + &:after{ + content : "Made with The Homebrewery"; + position : absolute; + bottom : 0px; + left : 0px; + z-index : 100; + height : 50px; + width : 100%; + background-image : @footerImg; + background-size : cover; + padding: 28px 63px; + box-sizing: border-box; + color : lighten(@gold, 0%); + font-size: 0.7em; + } + &:nth-child(even){ + &:after{ + background-image: @footerFlipImg; + text-align: right; + } + &:before{ + left : 2px; + } + .footnote{ + left : 80px; + text-align : left; + } } + &:before{ + content : counter(phb-page-numbers); + position : absolute; + right : 2px; + bottom : 22px; + width : 50px; + font-size : 0.9em; + color : @gold; + text-align : center; + } //***************************** // * BASE // *****************************/ - p{ - padding-bottom : 0.8em; - line-height : 1.3em; - &+p{ - margin-top : -0.8em; - } - } - ul{ - margin-bottom : 0.8em; - padding-left : 1.4em; - line-height : 1.3em; - list-style-position : outside; - list-style-type : disc; - } - ol{ - margin-bottom : 0.8em; - padding-left : 1.4em; - line-height : 1.3em; - list-style-position : outside; - list-style-type : decimal; - } - //Indents after p or lists - p+p, ul+p, ol+p{ - text-indent : 1em; - } - img{ - z-index : -1; - } - strong{ - font-weight : bold; - letter-spacing : 0.03em; - } - em{ - font-style : italic; - } - sup{ - vertical-align : super; - font-size : smaller; - line-height : 0; - } - sub{ - vertical-align : sub; - font-size : smaller; - line-height : 0; - } - //***************************** - // * HEADERS - // *****************************/ - h1,h2,h3,h4{ - margin-top : 0.2em; - margin-bottom : 0.2em; - font-family : MrEaves; - font-weight : 800; - color : @headerText; - } - h1{ - column-span : all; - font-size : 0.987cm; - -webkit-column-span : all; - -moz-column-span : all; - &+p::first-letter{ - float : left; - font-family : Solbera; - font-size : 10em; - color : #222; - line-height : 0.8em; - } - } - h2{ - font-size : 0.705cm; - } - h3{ - font-size : 0.529cm; - border-bottom : 2px solid @headerUnderline; - } - h4{ - margin-bottom : 0.00em; - font-size : 0.458cm; - } - h5{ - margin-bottom : 0.2em; - font-family : ScalySansSmallCaps; - font-size : 0.423cm; - font-weight : 900; - } - - hr{ - visibility : visible; - height : 6px; - margin : 4px 0px; - background-image : @dividerImg; - background-size : 100% 100%; - border : none; - } - //***************************** - // * TABLE - // *****************************/ - table{ - .useSansSerif(); - width : 100%; - margin-bottom : 1em; - font-size : 10pt; - thead{ - font-weight : 800; - th{ - vertical-align : bottom; - padding-bottom : 0.3em; - padding-right : 0.1em; - padding-left : 0.1em; - } - } - tbody{ - tr{ - td{ - padding : 0.3em 0.1em; - } - &:nth-child(odd){ - background-color : @noteGreen; - } - } - } - } - //***************************** - // * NOTE - // *****************************/ - /* - blockquote{ - .useSansSerif(); - box-sizing : border-box; - margin-bottom : 1em; - padding : 5px 10px; - background-color : @noteGreen; - border-style : solid; - border-width : 11px; - border-image : @noteBorder 11; - border-image-outset : 9px 0px; - box-shadow : 1px 4px 14px #888; - p, ul{ - font-size : 0.352cm; - line-height : 1.1em; - } - } - */ //If a note starts a column, give it space at the top to render border //pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote { // margin-top : 13px; @@ -212,6 +95,7 @@ //***************************** // * MONSTER STAT BLOCK // *****************************/ + /* hr+blockquote{ position : relative; padding-top : 15px; @@ -271,62 +155,10 @@ border : none; } } - //Full Width - hr+hr+blockquote{ - //.useColumns(0.96); - } - //***************************** - // * FOOTER - // *****************************/ - &:after{ - content : ""; - position : absolute; - bottom : 0px; - left : 0px; - z-index : 100; - height : 50px; - width : 100%; - background-image : @footerImg; - background-size : cover; - } - &:nth-child(even){ - &:after{ - transform : scaleX(-1); - } - .pageNumber{ - left : 2px; - } - .footnote{ - left : 80px; - text-align : left; - } - } - .pageNumber{ - position : absolute; - right : 2px; - bottom : 22px; - width : 50px; - font-size : 0.9em; - color : #c9ad6a; - text-align : center; - &.auto::after { - content : counter(phb-page-numbers); - } - } - .footnote{ - position : absolute; - right : 80px; - bottom : 32px; - z-index : 150; - width : 200px; - font-size : 0.8em; - color : #c9ad6a; - text-align : right; - } + //***************************** // * EXTRAS // *****************************/ - //Modified unorder list, used in spells // hr+ul{ // margin-bottom : 0.5em; @@ -350,7 +182,6 @@ -webkit-column-break-inside : avoid; column-break-inside : avoid; overflow: hidden; /* Firefox fix */ - //Better spacing for spell blocks // h4+p+hr+ul{ // margin-top : -0.5em @@ -360,15 +191,6 @@ // 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; - column-break-inside : avoid; - } - //***************************** // * SPELL LIST // *****************************/ @@ -403,7 +225,6 @@ // box-shadow : none; // } // } - //***************************** // * WIDE // *****************************/ @@ -468,41 +289,15 @@ margin-top : 8px; } */ - //***************************** - // * TABLE OF CONTENTS - // *****************************/ - .toc{ - -webkit-column-break-inside : avoid; - column-break-inside : avoid; - a{ - color : black; - text-decoration : none; - &:hover{ - text-decoration : underline; - } - } - ul{ - padding-left : 0; - list-style-type : none; - } - &>ul>li{ - margin-bottom : 10px; - } - } - - - //***************************** // * Old Stuff // *****************************/ - // //Double hr for full width elements // hr+hr+blockquote{ // column-span : all; // -webkit-column-span : all; // -moz-column-span : all; // } - //***************************** // * CLASS TABLE // *****************************/ diff --git a/shared/homebrewery/phb_style/phb.mixins.less b/shared/homebrewery/phb_style/phb.mixins.less new file mode 100644 index 0000000..9e0abaa --- /dev/null +++ b/shared/homebrewery/phb_style/phb.mixins.less @@ -0,0 +1,29 @@ +.breakAvoid(){ + column-break-inside : avoid; + -webkit-column-break-inside : avoid; +} +.pseudoBorder(){ + position : relative; + &:before{ + content : ''; + position : absolute; + z-index : -1; + box-sizing : border-box; + border-style : solid; + border-image-repeat : round; + } +} + + +.useSansSerif(){ + font-family : ScalySans; + em{ + font-family : ScalySans; + font-style : italic; + } + strong{ + font-family : ScalySans; + font-weight : 800; + letter-spacing : -0.02em; + } +} \ No newline at end of file diff --git a/statics/faq.md b/statics/faq.md index 9aa79d1..ef045cf 100644 --- a/statics/faq.md +++ b/statics/faq.md @@ -15,7 +15,11 @@ How to make spacers - +- How to skip page numbers +- How to set page number +- How to hide footers +#p1:before, #p1:after{ display:none } +#p2:before{ counter-reset: phb-page-numbers 30; } ## Changing backgrounds