0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-27 20:12:40 +00:00
Files
homebrewery/themes/V3/5ePHB/style.less
David Bolack fbe65a4e93 Resolve indentation errors in TOC Generation, adjust partCover class
This fixes an error in the recusion that was failing to add children under existing parents.
Index generation now does not overindent when levels are skipped.
PartCover less code as suggesred by CC.
2024-06-01 00:32:25 -05:00

966 lines
23 KiB
Plaintext

@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
}
.useSansSerif() {
font-family : 'ScalySansRemake';
font-size : 0.318cm;
line-height : 1.2em;
p,dl,ul,ol { line-height : 1.2em; }
ul, ol { padding-left : 1em; }
em { font-style : italic; }
strong {
font-weight : 800;
letter-spacing : -0.02em;
}
h5 + * { margin-top : 0.1cm; }
}
.useColumns(@multiplier : 1, @fillMode: auto) {
column-count : 2;
column-fill : @fillMode;
column-gap : 0.9cm;
column-width : 8cm * @multiplier;
-webkit-column-count : 2;
-moz-column-count : 2;
-webkit-column-width : 8cm * @multiplier;
-moz-column-width : 8cm * @multiplier;
-webkit-column-gap : 0.9cm;
-moz-column-gap : 0.9cm;
}
.page {
.useColumns();
font-family : 'BookInsanityRemake';
font-size : 0.34cm;
background-image : @backgroundImage;
}
// *****************************
// * BASE
// *****************************/
.page {
p {
line-height : 1.25em;
& + * { margin-top : 0.325cm; } //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
& + p { margin-top : 0; }
}
ul {
padding-left : 1.4em;
margin-bottom : 0.8em;
line-height : 1.25em;
}
ol {
padding-left : 1.4em;
margin-bottom : 0.8em;
line-height : 1.25em;
}
//Indents after p or lists
p + p, ul + p, ol + p { text-indent : 1em; }
img { z-index : -1; }
strong {
font-weight : bold;
letter-spacing : -0.02em;
}
// *****************************
// * HEADERS
// *****************************/
h1,h2,h3,h4 {
font-family : 'MrEavesRemake';
color : var(--HB_Color_HeaderText);
}
h1 {
margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE
column-span : all;
font-size : 0.89cm;
line-height : 1em;
-webkit-column-span : all;
-moz-column-span : all;
& + p::first-letter {
float : left;
padding-bottom : 2px;
padding-left : 40px; //Allow background color to extend into margins
margin-top : -0.3cm;
margin-bottom : -20px;
margin-left : -40px;
font-family : 'SolberaImitationRemake';
font-size : 3.5cm;
line-height : 1em;
color : rgba(0, 0, 0, 0);
background-image : linear-gradient(-45deg, #322814, #998250, #322814);
-webkit-background-clip : text;
background-clip : text;
}
& + p::first-line { font-variant : small-caps; }
}
h2 {
//margin-top : 0px; //Font is misaligned. Shift up slightly
//margin-bottom : 0.05cm;
font-size : 0.75cm;
line-height : 0.988em; //Font is misaligned. Shift up slightly
}
h3 {
//margin-top : -0.1cm; //Font is misaligned. Shift up slightly
//margin-bottom : 0.1cm;
font-size : 0.575cm;;
line-height : 0.995em; //Font is misaligned. Shift up slightly
border-bottom : 2px solid var(--HB_Color_HeaderUnderline);
& + * { margin-top : 0.17cm; }
}
* + h3 {
margin-top : 0.155cm; //(0.325 - 0.17)
}
h4 {
//margin-top : -0.02cm; //Font is misaligned. Shift up slightly
//margin-bottom : 0.02cm;
font-size : 0.458cm;
line-height : 0.971em; //Font is misaligned. Shift up slightly
& + * { margin-top : 0.09cm; }
}
* + h4 {
margin-top : 0.235cm; //(0.325 - 0.09)
}
h5 {
//margin-top : -0.02cm; //Font is misaligned. Shift up slightly
//margin-bottom : 0.02cm;
font-family : 'ScalySansSmallCapsRemake';
font-size : 0.423cm;
line-height : 0.951em; //Font is misaligned. Shift up slightly
& + * { margin-top : 0.2cm; }
}
// *****************************
// * TABLE
// *****************************/
table {
.useSansSerif();
line-height : 16px;
& + * { margin-top : 0.325cm; }
thead {
display : table-row-group;
font-weight : 800;
th {
//padding : 0.14em 0.4em;
padding : 0px 1.5px; // Both of these are temporary, just to force
vertical-align : bottom;
//line-height : 16px; // PDF to render at same height until Chrome 108
}
}
tbody {
tr {
td {
//padding : 0.14em 0.4em;
padding : 0px 1.5px; // Both of these are temporary, just to force
//line-height : 16px; // PDF to render at same height until Chrome 108
}
&:nth-child(odd) { background-color : var(--HB_Color_Accent); }
}
}
}
// *****************************
// * QUOTE
// *****************************/
.quote {
& > p {
font-style : italic;
line-height : 0.54cm;
&:first-child::first-line {
font-size : 0.38cm;
font-style : normal;
font-variant : small-caps;
}
}
p + .attribution { margin-top : 0; }
.attribution {
display : block;
font-style : normal;
line-height : 0.54cm;
text-align : right;
&::before {
margin-right : 0.2em;
content : '---';
}
}
& + * { margin-top : 0.54cm; }
}
// *****************************
// * NOTE
// *****************************/
.note {
.useSansSerif();
padding : 0.13cm 0.16cm;
background-color : var(--HB_Color_Accent);
border-style : solid;
border-width : 1px;
border-image : @noteBorderImage 12 stretch;
border-image-width : 11px;
border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888888;
.page :where(&) {
margin-top : 9px; //Prevent top border getting cut off on colbreak
}
& + * { margin-top : 0.45cm; }
h5 { font-size : 0.375cm; }
p {
display : block;
padding-bottom : 0px;
}
:last-child { margin-bottom : 0; }
}
// ************************************
// * DESCRIPTIVE TEXT BOX
// ************************************/
.descriptive {
.useSansSerif();
padding : 0.1em;
background-color : #FAF7EA;
border-style : solid;
border-width : 7px;
border-image : @descriptiveBoxImage 12 stretch;
border-image-outset : 4px;
box-shadow : 0 0 6px #FAF7EA;
.page :where(&) {
margin-top : 4px; //Prevent top border getting cut off on colbreak
}
& + * { margin-top : 0.45cm; }
h5 { font-size : 0.375cm; }
p {
display : block;
padding-bottom : 0px;
line-height : 1.5em;
}
:last-child { margin-bottom : 0; }
}
// *****************************
// * Images Snippets
// *****************************/
/* Arist Credit */
.artist {
position : absolute;
width : auto;
font-family : 'WalterTurncoat';
font-size : 0.27cm;
color : var(--HB_Color_CaptionText);
text-align : center;
p, p + p {
margin : unset;
line-height : 1em;
text-indent : unset;
}
h5 {
font-family : 'WalterTurncoat';
font-size : 1.3em;
}
a {
color : inherit;
text-decoration : unset;
&:hover { text-decoration : underline; }
}
}
/* Watermark */
.watermark { color : black; }
/* Watercolor */
.watercolor1 { --wc : @watercolor1; }
.watercolor2 { --wc : @watercolor2; }
.watercolor3 { --wc : @watercolor3; }
.watercolor4 { --wc : @watercolor4; }
.watercolor5 { --wc : @watercolor5; }
.watercolor6 { --wc : @watercolor6; }
.watercolor7 { --wc : @watercolor7; }
.watercolor8 { --wc : @watercolor8; }
.watercolor9 { --wc : @watercolor9; }
.watercolor10 { --wc : @watercolor10; }
.watercolor11 { --wc : @watercolor11; }
.watercolor12 { --wc : @watercolor12; }
// *****************************
// * MONSTER STAT BLOCK
// *****************************/
.monster {
.useSansSerif();
&.frame {
width : calc(100% + 0.32cm);
padding : 4px 2px;
margin-right : -0.16cm;
margin-left : -0.16cm;
background-color : var(--HB_Color_MonsterStatBackground);
background-image : @monsterBlockBackground;
background-blend-mode : overlay;
border-style : solid;
border-width : 7px 6px;
border-image : @monsterBorderImage 14 round;
border-image-outset : 0px 2px;
box-shadow : 1px 4px 14px #888888;
}
position : relative;
padding : 0px;
margin-bottom : 0.325cm;
//Headers
h2 {
margin : 0;
font-size : 0.62cm;
line-height : 1em;
& + p {
margin-bottom : 0;
font-size : 0.304cm; //Monster size and type subtext
}
}
h3 {
font-family : 'ScalySansSmallCapsRemake';
font-size : 0.45cm;
border-bottom : 1.5px solid var(--HB_Color_HeaderText);
}
//Triangle dividers
hr {
height : 6px;
margin : 0.12cm 0cm;
visibility : visible;
background-image : @redTriangleImage;
background-size : 100% 100%;
border : none;
}
//Attribute Lists - All text between HRs is red
hr ~ :is(dl,p) { color : var(--HB_Color_HeaderText); }
hr:last-of-type {
& ~ :is(dl,p) {
color : inherit; // After the HRs, reset text to black
}
& + * {
margin-top : 0.325cm; // Space after last HR
}
}
.bonus {
float: right;
padding-right: 0.5em;
}
// Monster Ability table
hr + table:first-of-type {
margin : 0;
column-span : none;
color : var(--HB_Color_HeaderText);
background-color : transparent;
border-style : none;
border-image : none;
-webkit-column-span : none;
tr { background-color : transparent; }
td,th { padding : 0px; }
}
//indent fix after bulleted lists
:is(ul,ol) + p { text-indent : 0; }
:last-child { margin-bottom : 0; }
}
//Full Width
.monster.wide {
.useColumns(0.96, @fillMode: balance);
}
// *****************************
// * FOOTER
// *****************************/
&::after {
position : absolute;
bottom : 0px;
left : 0px;
z-index : 100;
width : 100%;
height : 50px;
content : '';
background-image : @footerAccentImage;
background-size : cover;
}
&:nth-child(even) {
&::after { transform : scaleX(-1); }
.pageNumber { left : 2px; }
.footnote {
left : 80px;
text-align : left;
}
}
.pageNumber {
right : 2px;
bottom : 22px;
color : var(--HB_Color_Footnotes);
}
.footnote {
position : absolute;
right : 80px;
bottom : 32px;
z-index : 150;
width : 200px;
font-size : 0.8em;
color : var(--HB_Color_Footnotes);
text-align : right;
}
// ************************************
// * CODE BLOCKS
// ************************************/
code {
padding : 0px 4px;
font-size : 0.325cm;
color : #58180D;
background-color : #FAF7EA;
border-radius : 4px;
}
pre code {
padding : 0.15cm;
margin-bottom : 2px;
border-style : solid;
border-width : 1px;
border-radius : 12px;
border-image : @codeBorderImage 26 stretch;
border-image-width : 10px;
border-image-outset : 2px;
.page :where(&) {
margin-top : 2px; //Prevent top border getting cut off on colbreak
}
& + * { margin-top : 0.325cm; }
}
// *****************************
// * EXTRAS
// *****************************/
hr {
margin : 0px;
visibility : hidden;
}
//Text indent right after table
table + p { text-indent : 1em; }
// Nested lists
ul ul,ol ol,ul ol,ol ul {
margin-bottom : 0px;
margin-left : 1.5em;
}
}
// *****************************
// * SPELL LIST
// *****************************/
.page .spellList {
.useSansSerif();
column-count : 2;
ul + h5 { margin-top : 15px; }
p, ul {
font-size : 0.352cm;
line-height : 1.265em;
}
ul {
padding-left : 1em;
margin-bottom : 0.5em;
text-indent : -1em;
list-style-type : none;
-webkit-column-break-inside : auto;
page-break-inside : auto;
break-inside : auto;
}
&.wide { column-count : 4; }
}
// *****************************
// * CLASS TABLE
// *****************************/
.page .classTable {
th[colspan]:not([rowspan]) { white-space : nowrap; }
&.frame {
width : calc(100% + 0.2cm);
margin-top : 0.7cm;
margin-right : -0.1cm;
margin-bottom : 0.9cm;
margin-left : -0.1cm;
border-collapse : separate;
background-color : white;
border : initial;
border-style : solid;
border-image-source : @frameBorderImage;
border-image-slice : 200;
border-image-width : 47px;
border-image-outset : 0.4cm 0.3cm;
border-image-repeat : stretch;
&.wide:first-child { margin-top : 0.12cm; }
& + * { margin-top : 0; }
}
&.decoration { position : relative; }
&.decoration::before {
position : absolute;
top : 50%;
left : 50%;
z-index : -1;
width : 7.75cm;
height : calc(100% + 3.3cm);
content : '';
background-image : @classTableDecoration,
@classTableDecoration;
filter : drop-shadow(0px 0px 1px #C8C5C080);
background-repeat : no-repeat, no-repeat;
background-position : top, bottom;
background-size : contain, contain;
transform : translateY(-50%) translateX(-50%);
}
&.decoration.wide::before {
width : calc(100% + 3.3cm);
height : 7.75cm;
background-position : left, right;
}
h5 + table { margin-top : 0.2cm; }
}
// *****************************
// * FRONT COVER PAGE
// *****************************/
.page:has(.frontCover) {
columns : 1;
text-align : center;
&::after { display : none; }
h1 {
margin-top : 1.2cm;
margin-bottom : 0;
font-family : 'NodestoCapsCondensed';
font-size : 2.245cm;
font-weight : normal;
line-height : 1.9cm;
color : white;
text-shadow : unset;
text-transform : uppercase;
-webkit-text-stroke: 0.2cm black;
paint-order:stroke;
}
h2 {
font-family : 'NodestoCapsCondensed';
font-size : 0.85cm;
font-weight : normal;
color : white;
letter-spacing : 0.1cm;
-webkit-text-stroke: 0.14cm black;
paint-order:stroke;
}
hr {
position : relative;
display : block;
width : 12cm;
height : 0.5cm;
margin : auto;
visibility : visible;
background-image : @horizontalRule;
filter : drop-shadow(0 0 3px black);
background-size : 100% 100%;
border : none;
}
.banner {
position : absolute;
bottom : 4.2cm;
left : 0;
display : flex;
flex-direction : column;
justify-content : center;
width : 10.5cm;
height : 1.7cm;
padding-top : 0.1cm;
padding-left : 1cm;
font-family : 'NodestoCapsCondensed';
font-size : 1cm;
font-weight : normal;
color : white;
text-align : left;
letter-spacing : 0.014cm;
background-image : url('/assets/coverPageBanner.svg');
filter : drop-shadow(2px 2px 2px black);
}
.footnote {
position : absolute;
right : 0;
bottom : 1.3cm;
left : 0;
width : 70%;
margin-right : auto;
margin-left : auto;
font-family : 'Overpass';
font-size : 0.496cm;
color : white;
text-align : center;
-webkit-text-stroke: 0.1cm black;
paint-order:stroke;
}
.logo {
position : absolute;
top : 0.5cm;
right : 0;
left : 0;
filter : drop-shadow(0 0 0.075cm black);
img {
width : 100%;
height : 2cm;
}
}
}
// *****************************
// * INSIDE COVER PAGE
// *****************************/
.page:has(.insideCover) {
columns : 1;
text-align : center;
&::after { display : none; }
h1 {
margin-top : 1.2cm;
margin-bottom : 0;
font-family : 'NodestoCapsCondensed';
font-size : 2.1cm;
font-weight : normal;
line-height : 1.785cm;
text-transform : uppercase;
}
h2 {
font-family : 'NodestoCapsCondensed';
font-size : 0.85cm;
font-weight : normal;
letter-spacing : 0.5cm;
}
hr {
position : relative;
display : block;
width : 12cm;
height : 0.5cm;
margin : auto;
visibility : visible;
background-image : @horizontalRule;
background-size : 100% 100%;
border : none;
}
.logo {
position : absolute;
right : 0;
bottom : 1cm;
left : 0;
height : 2cm;
img {
width : 100%;
height : 2cm;
}
}
}
// *****************************
// * BACK COVER
// *****************************/
.page:has(.backCover) {
padding : 2.25cm 1.3cm 2cm 1.3cm;
color : #FFFFFF;
columns : 1;
&::after { display : none; }
.columnWrapper { width : 7.6cm; }
.backCover {
position : absolute;
inset : 0;
z-index : -1;
width : 11cm;
background-image : @backCover;
background-repeat : no-repeat;
background-size : contain;
}
.blank { height : 1.4em; }
h1 {
margin-bottom : 0.3cm;
font-family : 'NodestoCapsCondensed';
font-size : 1.35cm;
line-height : 1.28cm;
color : #ED1C24;
text-align : center;
}
h1 + p::first-line,
h1 + p::first-letter { all : unset; }
img {
position : absolute;
top : 0px;
z-index : -2;
height : 100%;
}
hr {
width : 4.5cm;
height : 0.53cm;
margin-top : 1.1cm;
margin-right : auto;
margin-left : auto;
visibility : visible;
background-image : @horizontalRule;
background-size : 100% 100%;
border : none;
}
p {
font-family : 'Overpass';
font-size : 0.332cm;
line-height : 0.35cm;
}
hr + p {
margin-top : 0.6cm;
text-align : center;
}
.logo {
position : absolute;
bottom : 2cm;
left : 1.2cm;
z-index : 0;
width : 7.6cm;
height : 1.5cm;
img {
position : relative;
z-index : 0;
width : 100%;
height : 1.5cm;
}
p {
position : relative;
width : 100%;
font-family : 'NodestoCapsWide';
font-size : 0.4cm;
line-height : 1em;
line-height : 1.28cm;
color : #FFFFFF;
text-align : center;
text-indent : 0;
}
}
}
// *****************************
// * PART COVER
// *****************************/
.page:has(.partCover) {
padding-top : 0;
text-align : center;
columns : 1;
.partCover {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 6cm;
background-image : @partCoverHeaderPHB;
background-repeat : no-repeat;
background-size : 100%;
}
h1 {
position : relative;
margin-top : 0.4cm;
font-family : 'NodestoCapsCondensed';
font-size : 2.3cm;
text-align : center;
text-transform : uppercase;
}
h2 {
position : relative;
margin-top : -0.7em;
margin-right : auto;
margin-left : auto;
font-family : 'Overpass';
font-size : 0.45cm;
line-height : 0.495cm;
}
}
// *****************************
// * TABLE OF CONTENTS
// *****************************/
// Default Exclusions
// Anything not exlcuded is included, default Headers are H1, H2, and H3.
h4,
h5,
h6,
.page:has(.frontCover),
.page:has(.backCover),
.page:has(.insideCover),
.monster,
.noToC,
.toc { --TOC: exclude; }
.tocDepthH2 :is(h1, h2) {--TOC: include; }
.tocDepthH3 :is(h1, h2, h3) {--TOC: include; }
.tocDepthH4 :is(h1, h2, h3, h4) {--TOC: include; }
.tocDepthH5 :is(h1, h2, h3, h4, h5) {--TOC: include; }
.tocDepthH6 :is(h1, h2, h3, h4, h5, h6) {--TOC: include; }
.tocIncludeH1 h1 {--TOC: include; }
.tocIncludeH2 h2 {--TOC: include; }
.tocIncludeH3 h3 {--TOC: include; }
.tocIncludeH4 h4 {--TOC: include; }
.tocIncludeH5 h5 {--TOC: include; }
.tocIncludeH6 h6 {--TOC: include; }
.page:has(.partCover) {
--TOC: exclude;
&h1 {
--TOC: include;
}
}
.page {
&:has(.toc)::after { display : none; }
.toc {
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
h1 {
margin-bottom : 0.3cm;
text-align : center;
}
a {
display : inline;
color : inherit;
text-decoration : none;
&:hover { text-decoration : underline; }
}
h4 {
margin-top : 0.2cm;
line-height : 0.4cm;
& + ul li { line-height : 1.2em; }
}
ul {
padding-left : 0;
margin-top : 0;
list-style-type : none;
a {
display : flex;
flex-flow : row nowrap;
justify-content : space-between;
width : 100%;
}
li + li h3 {
margin-top : 0.26cm;
line-height : 1em;
}
h3 span:first-child::after { border : none; }
span {
display : contents;
&:first-child::after {
bottom : 0.08cm;
flex : 1;
margin-right : 0.16cm;
margin-bottom : 0.08cm;
margin-left : 0.08cm; /* Spacing before dot leaders */
content : '';
border-bottom : 0.05cm dotted #000000;
}
&:last-child {
display : inline-block;
align-self : flex-end;
font-family : 'BookInsanityRemake';
font-size : 0.34cm;
font-weight : normal;
color : #000000;
}
}
ul { /* List indent */
margin-left : 1em;
}
}
&.wide {
.useColumns(0.96, @fillMode: balance);
}
}
}
// *****************************
// * DEFINITION LISTS
// *****************************/
.page {
dl {
line-height : 1.25em;
& + * { margin-top : 0.17cm; }
}
p + dl { margin-top : 0.17cm; }
dt {
margin-right : 5px;
margin-left : -1em;
}
}
// *****************************
// * WIDE
// *****************************/
.page .wide { margin-bottom : 0.325cm; }
.page h1 + * { margin-top : 0; }
//*****************************
// * RUNE TABLE
// *****************************/
.page {
.runeTable {
margin-block : 0.7cm;
table {
font-family : inherit;
tbody tr { background : unset; }
th, td {
width : 1.3cm;
height : 1.3cm;
font-weight : normal;
text-transform : uppercase;
vertical-align : middle;
outline : 1px solid #000000;
}
th {
font-family : 'BookInsanityRemake';
font-size : 0.45cm;
}
td { font-size : 0.7cm; }
}
&.frame {
border : initial;
border-style : solid;
border-image-source : @scriptBorder;
border-image-slice : 170;
border-image-width : 1.4cm;
border-image-outset : 0.45cm 0.35cm 0.4cm 0.4cm;
border-image-repeat : stretch;
}
}
}
// *****************************
// * INDEX
// *****************************/
.page {
.index {
font-size : 0.218cm;
ul ul { margin : 0; }
ul {
padding-left : 0;
text-indent : 0;
list-style-type : none;
}
& > ul > li {
padding-left : 1.5em;
text-indent : -1.5em;
}
}
}