Spaces:
Sleeping
Sleeping
| @import (less) './themes/fonts/Journal/fonts.less'; | |
| @import (less) './themes/assets/assets.less'; | |
| :root { | |
| //Colors | |
| --HB_Color_Background : unset; // Light parchment | |
| --HB_Color_Text : #412121; // Dark Maroon Brown | |
| --HB_Color_Text2 : #261C13CC; //Dark Brown | |
| --HB_Color_HeaderText : #58180D; // Dark Maroon | |
| --HB_Color_CaptionText : #766649; // Brown | |
| --HB_Color_WatercolorStain : #BBAD82; // Light brown | |
| } | |
| .useSansSerif(){ | |
| font-family : PermanentMarker; | |
| font-size : 0.3cm; | |
| line-height : 1.2em; | |
| color : var(--HB_Color_Text2); | |
| p,dl,ul,ol { | |
| line-height : 1.2em; | |
| } | |
| ul, ol { | |
| padding-left : 1em; | |
| } | |
| em{ | |
| font-style : italic; | |
| } | |
| strong{ | |
| font-weight : 800; | |
| font-size : 1.1em; | |
| } | |
| h5 + * { | |
| margin-top : 0.1cm; | |
| } | |
| } | |
| .useColumns(@multiplier : 1, @fillMode: balance){ | |
| column-gap : 0.5cm; | |
| } | |
| .page{ | |
| background-size : 200% 100%; | |
| background-repeat : no-repeat; | |
| filter : drop-shadow(1px 4px 14px black); | |
| background-image : url(/assets/Journal/Background1.webp); | |
| padding : 2.1cm 1.9cm 1.7cm 3.8cm; | |
| &:nth-of-type(2n + 1) { | |
| background-position : left; | |
| } | |
| &:nth-of-type(2n) { | |
| background-position : right; | |
| padding : 2.1cm 3.9cm 1.7cm 1.8cm; | |
| } | |
| &:nth-of-type(2) { | |
| background-image : url(/assets/Journal/Background2.webp); //Only first page should show ribbon | |
| } | |
| & .columnWrapper { | |
| //transform: rotate(-0.5deg); // Breaks absolute positioning of images/footers. Wait for Chrome fix | |
| } | |
| } | |
| //***************************** | |
| // * BASE | |
| // *****************************/ | |
| .page{ | |
| color : var(--HB_Color_Text); | |
| font-family : ReenieBeanie; | |
| font-size : 0.53cm; | |
| line-height : 0.8em; | |
| p + * { | |
| margin-top : 0.325cm; | |
| } | |
| p + p{ | |
| margin-top : 0; | |
| } | |
| ul{ | |
| margin-bottom : 0.8em; | |
| } | |
| ol{ | |
| margin-bottom : 0.8em; | |
| } | |
| em{ | |
| text-decoration : underline; | |
| font-style : unset; | |
| } | |
| del{ | |
| text-decoration-style: double; | |
| } | |
| //Indents after p or lists | |
| p+p, ul+p, ol+p{ | |
| text-indent : 1em; | |
| } | |
| //***************************** | |
| // * HEADERS | |
| // *****************************/ | |
| h1,h2,h3,h4,h5{ | |
| font-family : FrederickaTheGreat; | |
| font-weight : unset; | |
| color : var(--HB_Color_HeaderText); | |
| } | |
| h1{ | |
| margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE | |
| font-size : 0.89cm; | |
| line-height : 1em; | |
| font-variant : small-caps; | |
| &+p::first-letter{ | |
| float : left; | |
| font-family : FrederickaTheGreat; | |
| line-height : 1em; | |
| font-size : 1.9em; | |
| padding-left : 40px; //Allow background color to extend into margins | |
| margin-top : -0.3cm; | |
| margin-bottom : -20px; | |
| margin-left : -40px; | |
| margin-right : 0.1em; | |
| padding-top : 0.3em; | |
| padding-bottom : 2px; | |
| } | |
| &+p::first-line{ | |
| font-variant : small-caps; | |
| } | |
| } | |
| h2{ | |
| font-size : 0.62cm; | |
| line-height : 0.988em; //Font is misaligned. Shift up slightly | |
| } | |
| h3{ | |
| font-size : 0.575cm; | |
| line-height : 0.995em; //Font is misaligned. Shift up slightly | |
| margin-left : -0.9em; | |
| } | |
| h4{ | |
| font-size : 0.55cm; | |
| line-height : 0.971em; //Font is misaligned. Shift up slightly | |
| color : var(--HB_Color_Text); | |
| padding-bottom : 5px; | |
| transform:rotate(0deg); | |
| &:nth-of-type(2n) { | |
| transform:rotate(1deg); | |
| } | |
| &:nth-of-type(3n) { | |
| transform:rotate(-1.5deg); | |
| } | |
| } | |
| h5{ | |
| font-family : PermanentMarker; | |
| font-size : 0.4cm; | |
| color : var(--HB_Color_Text2); | |
| font-weight : bold; | |
| line-height : 0.951em; //Font is misaligned. Shift up slightly | |
| & + * { | |
| margin-top : 0.2cm; | |
| } | |
| } | |
| //***************************** | |
| // * TABLE | |
| // *****************************/ | |
| table{ | |
| .useSansSerif(); | |
| & + * { | |
| margin-top : 0.325cm; | |
| } | |
| thead{ | |
| th{ | |
| vertical-align : bottom; | |
| padding : 0.14em 0; | |
| } | |
| } | |
| tbody{ | |
| tr{ | |
| td{ | |
| padding : 0.14em 0; | |
| } | |
| &:nth-child(odd){ | |
| background-image : linear-gradient(to left, #41212100, #41212122, #41212100); | |
| } | |
| } | |
| } | |
| } | |
| //***************************** | |
| // * NOTE | |
| // *****************************/ | |
| .note{ | |
| .useSansSerif(); | |
| border-style : solid; | |
| border-width : 1px; | |
| border-image-source : url(/assets/Journal/Border1.png); | |
| border-image-slice : 18 18 18 18; | |
| border-image-width : 6px 6px 6px 6px; | |
| border-image-outset : 5px 5px 5px 5px; | |
| border-image-repeat : stretch stretch; | |
| background-image : url(/assets/Journal/HashMarks.png), | |
| linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100); | |
| background-size : 120% 120%; | |
| background-repeat : no-repeat; | |
| background-position : center; | |
| padding : 0.2cm; | |
| :where(&) { | |
| margin-top : 9px; //Prevent top border getting cut off on colbreak | |
| } | |
| & + * { | |
| margin-top : 0.45cm; | |
| } | |
| h5 { | |
| font-size : 0.375cm; | |
| } | |
| p{ | |
| padding-bottom : 0px; | |
| } | |
| :last-child { | |
| margin-bottom : 0; | |
| } | |
| } | |
| //************************************ | |
| // * DESCRIPTIVE TEXT BOX | |
| // ************************************/ | |
| * + .descriptive { | |
| margin-top : 0.6cm; | |
| } | |
| .descriptive{ | |
| .useSansSerif(); | |
| border-style : solid; | |
| border-width : 1px; | |
| border-image-source : url('/assets/Journal/Border2.png'); | |
| border-image-slice : 48 48 48 48; | |
| border-image-width : 20px; | |
| border-image-outset : 16px 20px 16px 20px; | |
| border-image-repeat : stretch stretch; | |
| background-image : url(/assets/Journal/HashMarks.png), | |
| linear-gradient(to bottom right, #ff000000, #41212114, #41212100); | |
| background-size : 120% 120%; | |
| background-repeat : no-repeat; | |
| background-position : center; | |
| padding : 0.2cm; | |
| :where(&) { | |
| margin-top : 4px; //Prevent top border getting cut off on colbreak | |
| } | |
| & + * { | |
| margin-top : 0.45cm; | |
| } | |
| h5 { | |
| font-size : 0.375cm; | |
| } | |
| p{ | |
| padding-bottom : 0px; | |
| } | |
| :last-child { | |
| margin-bottom : 0; | |
| } | |
| } | |
| //***************************** | |
| // * Images Snippets | |
| // *****************************/ | |
| /* Arist Credit */ | |
| .artist { | |
| position : absolute; | |
| width : auto; | |
| text-align : center; | |
| font-family : WalterTurncoat; | |
| font-size : 0.27cm; | |
| color : var(--HB_Color_CaptionText); | |
| p, p + p { | |
| margin : unset; | |
| text-indent : unset; | |
| line-height : 1em; | |
| } | |
| h5 { | |
| font-size : 1.3em; | |
| font-family : WalterTurncoat; | |
| } | |
| a{ | |
| color : inherit; | |
| text-decoration : unset; | |
| &:hover { | |
| text-decoration : underline; | |
| } | |
| } | |
| } | |
| //***************************** | |
| // * MONSTER STAT BLOCK | |
| // *****************************/ | |
| .monster { | |
| .useSansSerif(); | |
| &.frame { | |
| border-style : solid; | |
| border-width : 7px 6px; | |
| border-image-source : url('/assets/Journal/Border3.png'); | |
| border-image-slice : 63 74 63 74; | |
| border-image-width : 15px 20px 15px 20px; | |
| border-image-outset : 12px 12px 12px 12px; | |
| border-image-repeat : stretch round; | |
| background-image : url('/assets/Journal/HashMarks.png'), | |
| linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100); | |
| background-blend-mode : screen multiply; | |
| background-size : 100%; | |
| padding : 0.2cm; | |
| } | |
| color: var(--HB_Color_Text); | |
| position : relative; | |
| padding : 0px; | |
| margin-bottom : 0.325cm; | |
| //Headers | |
| h2{ | |
| font-size : 0.62cm; | |
| line-height : 1em; | |
| margin : 0; | |
| &+p { | |
| margin-bottom : 0; //Monster size and type subtext | |
| } | |
| } | |
| h3{ | |
| margin-left : 0; | |
| font-variant : small-caps; | |
| padding-bottom : 0.05cm; | |
| } | |
| hr{ | |
| visibility : visible; | |
| height : 6px; | |
| margin : 0.12cm 0cm; | |
| background-image : url('/assets/Journal/HorizontalRule.png'); | |
| background-size : 100% 100%; | |
| } | |
| hr:last-of-type + * { | |
| margin-top : 0.325cm; // Space after last HR | |
| } | |
| // Monster Ability table | |
| hr + table:first-of-type{ | |
| margin : 0; | |
| column-span : none; | |
| background-image : none; | |
| border-style : none; | |
| border-image : none; | |
| color : inherit; | |
| tr { | |
| background-image : none; | |
| } | |
| td,th { | |
| padding: 0px; | |
| } | |
| } | |
| :last-child { | |
| margin-bottom : 0; | |
| } | |
| strong, em { | |
| font-style : normal; | |
| text-decoration : none; | |
| } | |
| } | |
| //Full Width | |
| .monster.wide{ | |
| .useColumns(0.96, @fillMode: balance); | |
| } | |
| //***************************** | |
| // * FOOTER | |
| // *****************************/ | |
| &:nth-child(odd){ | |
| .pageNumber{ | |
| left : 3cm; | |
| } | |
| .footnote{ | |
| left : 4.5cm; | |
| text-align : left; | |
| } | |
| } | |
| .pageNumber{ | |
| font-family : FrederickaTheGreat; | |
| position : absolute; | |
| right : 3cm; | |
| bottom : 1.25cm; | |
| width : 50px; | |
| font-size : 0.9em; | |
| color : var(--HB_Color_HeaderText); | |
| text-align : center; | |
| text-indent : 0; | |
| &.auto::after { | |
| content : counter(phb-page-numbers); | |
| } | |
| } | |
| .footnote{ | |
| position : absolute; | |
| right : 4.5cm; | |
| bottom : 1.25cm; | |
| z-index : 150; | |
| width : 200px; | |
| font-size : 0.8em; | |
| color : var(--HB_Color_HeaderText); | |
| text-align : right; | |
| } | |
| //************************************ | |
| // * CODE BLOCKS | |
| // ************************************/ | |
| code{ | |
| font-size : 0.3cm; | |
| padding : 0px 4px; | |
| color : var(--HB_Color_Text); | |
| vertical-align : middle; | |
| background-color : #faf7ea; | |
| border-radius : 4px; | |
| } | |
| pre code{ | |
| border-style : solid; | |
| border-width : 1px; | |
| border-image : @codeBorderImage 26 stretch; | |
| border-image-width : 10px; | |
| border-image-outset : 2px; | |
| border-radius : 12px; | |
| margin-bottom : 2px; | |
| padding : 0.15cm; | |
| .page :where(&) { | |
| margin-top : 2px; //Prevent top border getting cut off on colbreak | |
| } | |
| & + * { | |
| margin-top : 0.325cm; | |
| } | |
| } | |
| //***************************** | |
| // * EXTRAS | |
| // *****************************/ | |
| hr{ | |
| visibility : hidden; | |
| border : none; | |
| margin : 0px; | |
| } | |
| //Text indent right after table | |
| table+p{ | |
| text-indent : 1em; | |
| } | |
| a, a:visited, a:hover { | |
| color: var(--HB_Color_Text); | |
| transition:all 1s ease; | |
| } | |
| a:hover { | |
| color:red; | |
| } | |
| } | |
| //***************************** | |
| // * SPELL LIST | |
| // *****************************/ | |
| .page .spellList{ | |
| .useSansSerif(); | |
| font-family : PermanentMarker; | |
| column-count : 2; | |
| ul+h5{ | |
| margin-top : 15px; | |
| } | |
| ul{ | |
| margin-bottom : 0.5em; | |
| padding-left : 1em; | |
| text-indent : -1em; | |
| list-style-type : none; | |
| -webkit-column-break-inside : auto; | |
| page-break-inside : auto; | |
| break-inside : auto; | |
| } | |
| &.wide{ | |
| column-count : 4; | |
| } | |
| } | |
| //***************************** | |
| // * CLASS TABLE | |
| // *****************************/ | |
| .page .classTable{ | |
| th[colspan]:not([rowspan]) { | |
| white-space : nowrap; | |
| } | |
| h5 + table{ | |
| margin-top : 0.2cm; | |
| } | |
| } | |
| //***************************** | |
| // * TABLE OF CONTENTS | |
| // *****************************/ | |
| .page .toc{ | |
| -webkit-column-break-inside : avoid; | |
| page-break-inside : avoid; | |
| break-inside : avoid; | |
| h1 { | |
| text-align : center; | |
| margin-bottom : 0.3cm; | |
| } | |
| a{ | |
| display : inline; | |
| color : inherit; | |
| text-decoration : none; | |
| &:hover{ | |
| text-decoration : underline; | |
| } | |
| } | |
| h4 { | |
| margin-top : 0.2cm; | |
| line-height : 0.4cm; | |
| & + ul li { | |
| line-height: 1.2em; | |
| } | |
| } | |
| ul{ | |
| padding-left : 0; | |
| list-style-type : none; | |
| li + li h3 { | |
| margin-top : 0.26cm; | |
| line-height : 1em | |
| } | |
| h3 span:first-child::after { | |
| border : none; | |
| } | |
| span { | |
| display : table-cell; | |
| &:first-child { | |
| position : relative; | |
| overflow : hidden; | |
| &::after { | |
| content : ""; | |
| position : absolute; | |
| bottom : 0.08cm; | |
| margin-left : 0.06cm; /* Spacing before dot leaders */ | |
| width : 100%; | |
| border-bottom : 0.05cm dotted #000; | |
| } | |
| } | |
| &:last-child { | |
| font-family : ReenieBeanie; | |
| font-size : 0.34cm; | |
| font-weight : normal; | |
| color : black; | |
| text-align : right; | |
| vertical-align : bottom; /* Keep page number bottom-aligned */ | |
| width : 1%; | |
| padding-left : 0.06cm; /* Spacing after dot leaders */ | |
| /*white-space : nowrap; /* Uncomment if needed */ | |
| } | |
| } | |
| ul { /*List indent*/ | |
| margin-left : 1em; | |
| } | |
| } | |
| &.wide{ | |
| .useColumns(0.96, @fillMode: balance); | |
| } | |
| } | |
| //***************************** | |
| // * WIDE | |
| // *****************************/ | |
| .page .wide { | |
| margin-bottom : 0.45cm; | |
| } | |