diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less
index f41a2fc83..dc1809543 100644
--- a/client/icons/customIcons.less
+++ b/client/icons/customIcons.less
@@ -13,3 +13,6 @@
.position-bottom-right {
content: url('../icons/position-bottom-right.svg');
}
+.fa-file-c {
+ content: url('../icons/fa-file-c.svg');
+}
\ No newline at end of file
diff --git a/client/icons/fa-file-c.svg b/client/icons/fa-file-c.svg
new file mode 100644
index 000000000..3e914decf
--- /dev/null
+++ b/client/icons/fa-file-c.svg
@@ -0,0 +1,30 @@
+
+
+
diff --git a/themes/V3/5ePHB/snippets.js b/themes/V3/5ePHB/snippets.js
index bea2a1da3..51b91e6b0 100644
--- a/themes/V3/5ePHB/snippets.js
+++ b/themes/V3/5ePHB/snippets.js
@@ -170,7 +170,7 @@ module.exports = [
},
{
name : 'Cover Page',
- icon : 'fas fa-file-word',
+ icon : 'fac fa-file-c',
gen : CoverPageGen,
},
{
diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less
index 17d78ee2b..b1738e328 100644
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -1,624 +1,625 @@
-@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 {
+ @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;
- }
- 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: 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;
-}
- //*****************************
- // * 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,dl,ul,ol {
+ line-height : 1.2em;
}
- &+p{
- margin-top : 0;
+ ul, ol {
+ padding-left : 1em;
+ }
+ em{
+ font-style : italic;
+ }
+ strong{
+ font-weight : 800;
+ letter-spacing : -0.02em;
+ }
+ h5 + * {
+ margin-top : 0.1cm;
}
}
- ul{
- margin-bottom : 0.8em;
- padding-left : 1.4em;
- line-height : 1.25em;
- list-style-position : outside;
- list-style-type : disc;
+ .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;
}
- ol{
- margin-bottom : 0.8em;
- padding-left : 1.4em;
- line-height : 1.25em;
- list-style-position : outside;
- list-style-type : decimal;
+ .columnWrapper{
+ max-height : 100%;
+ column-span : all;
+ columns : inherit;
+ column-gap : inherit;
}
- //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;
- 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);
- }
-
+ .page{
+ .useColumns();
+ counter-increment : phb-page-numbers;
position : relative;
- padding : 0px;
- margin-bottom : 0.325cm;
+ 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
+ // *****************************/
- //Headers
+ .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{
- font-size : 0.62cm;
- line-height : 1em;
- margin : 0;
- &+p {
- font-size : 0.304cm; //Monster size and type subtext
+ //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;
}
}
- 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
+ //************************************
+ // * 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.325cm; // Space after last HR
+ 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;
+ }
}
}
- // 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;
+ /* 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;
}
}
- :last-child {
- margin-bottom : 0;
+ /* 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;
}
- }
- //Full Width
- .monster.wide{
- .useColumns(0.96, @fillMode: balance);
- }
+ .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; }
- //*****************************
- // * 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){
+ //*****************************
+ // * 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{
- transform : scaleX(-1);
+ 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{
- left : 2px;
+ 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{
- left : 80px;
- text-align : left;
+ position : absolute;
+ right : 80px;
+ bottom : 32px;
+ z-index : 150;
+ width : 200px;
+ font-size : 0.8em;
+ color : var(--HB_Color_Footnotes);
+ text-align : right;
}
- }
- .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);
+ //************************************
+ // * 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;
}
- }
- .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
+ 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;
+ }
}
- & + * {
- 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;
}
}
//*****************************
- // * EXTRAS
+ // * SPELL LIST
// *****************************/
- hr{
- visibility : hidden;
- margin : 0px;
+ .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;
+ }
}
- .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;
- }
-}
-//*****************************
-// * 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
@@ -688,7 +689,7 @@ body {
.coverPage {
position: absolute;
inset: 0;
- padding: 90px 0px;
+ padding: 125px 0px;
display: flex;
flex-direction: column;
align-items: center;
@@ -705,17 +706,17 @@ body {
min-width: 100%;
}
&:before {
- background-image: @coverPageLogo;
+ background-image: @homebreweryLogo;
background-position: center;
- background-size: 60px;
+ background-size: 75px;
background-repeat: no-repeat;
position: absolute;
top: 15px;
content: '';
display: block;
- height: 70px;
+ height: 90px;
width: 100%;
- filter: drop-shadow(0 0 10px black);
+ filter: drop-shadow(0 0 5px black);
}
h1 {
--shadow-x0: #000 0px 0px 3.5px;
@@ -737,13 +738,14 @@ body {
hr {
position: relative;
top: -16px;
- background-image: @coverPageHorizontalRule;
+ background-image: @horizontalRule;
background-size: 100% 100%;
visibility: visible;
height: 64px;
width: 450px;
border: none;
margin: 2px auto -24px;
+ filter: drop-shadow(0 0 5px black);
}
h2 {
--shadow-x0: #000 0px 0px 2.5px;
@@ -771,7 +773,7 @@ body {
display: block;
height: 67px;
width: 50%;
-
+
p {
position: absolute;
top: 60%;
@@ -883,43 +885,44 @@ body {
}
}
-//*****************************
-// * DEFINITION LISTS
-// *****************************/
-.page {
- dl {
- line-height : 1.25em;
- padding-left : 1em;
- white-space : pre-line;
- & + * {
- margin-top : 0.28cm;
+ //*****************************
+ // * 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;
+ }
}
- dl + * {
- margin-top : 0.17cm;
- }
- p + dl {
- margin-top: 0.17cm;
+
+ //*****************************
+ // * WIDE
+ // *****************************/
+ .page .wide{
+ margin-bottom : 0.325cm;
}
- 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;
+ .page h1 + *{
+ margin-top : 0;
+ }
}
diff --git a/themes/assets/assets.less b/themes/assets/assets.less
index 280722dc0..ad7f4ac73 100644
--- a/themes/assets/assets.less
+++ b/themes/assets/assets.less
@@ -10,9 +10,9 @@
@monsterBorderImage : url('/assets/monsterBorderFancy.png');
@codeBorderImage : url('/assets/codeBorder.png');
@classTableDecoration : url('/assets/classTableDecoration.png');
-@coverPageLogo : url('/assets/coverPageLogo.png');
-@coverPageBanner : url('/assets/coverPageBanner.png');
-@coverPageHorizontalRule : url('/assets/coverPageHorizontalRule.png');
+@homebreweryLogo : url('/assets/homebreweryLogo.svg');
+@coverPageBanner : url('/assets/coverPageBanner.svg');
+@horizontalRule : url('/assets/horizontalRule.svg');
// Watercolor Images
@watercolor1 : url('/assets/watercolor/watercolor1.png');
diff --git a/themes/assets/coverPageBanner.png b/themes/assets/coverPageBanner.png
deleted file mode 100644
index b1dfeadb1..000000000
Binary files a/themes/assets/coverPageBanner.png and /dev/null differ
diff --git a/themes/assets/coverPageBanner.svg b/themes/assets/coverPageBanner.svg
new file mode 100644
index 000000000..8e7c4acc2
--- /dev/null
+++ b/themes/assets/coverPageBanner.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/themes/assets/coverPageHorizonalRule.png b/themes/assets/coverPageHorizonalRule.png
deleted file mode 100644
index da706d8c0..000000000
Binary files a/themes/assets/coverPageHorizonalRule.png and /dev/null differ
diff --git a/themes/assets/coverPageLogo.png b/themes/assets/coverPageLogo.png
deleted file mode 100644
index 18ecc6438..000000000
Binary files a/themes/assets/coverPageLogo.png and /dev/null differ
diff --git a/themes/assets/homebreweryLogo.svg b/themes/assets/homebreweryLogo.svg
new file mode 100644
index 000000000..b3e79d7ea
--- /dev/null
+++ b/themes/assets/homebreweryLogo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/themes/assets/horizontalRule.svg b/themes/assets/horizontalRule.svg
new file mode 100644
index 000000000..9fce47809
--- /dev/null
+++ b/themes/assets/horizontalRule.svg
@@ -0,0 +1 @@
+
\ No newline at end of file