0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-30 21:52:43 +00:00
Files
homebrewery/themes/V3/5ePHB/style.less
David Bolack afb5ccec81 Slight Rearrange of ToC theme names and menu
Reorders ToC inclusion options with slight relabel for clarity.
Changes assumptions on H4, H5, and H6 snippets to assume H1-H3 class should be explicitly stated.

change naming of addToToCH# to tocH#

more explicitly define .addToC to h1 to h3 changes for --TOC var.
2024-05-12 12:00:55 -05:00

960 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
}
}
// 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
h4,
h5,
h6,
.page:has(.frontCover),
.page:has(.backCover),
.page:has(.insideCover),
.page:has(.partCover),
.monster,
.noToC,
.toc { --TOC: exclude; }
.tocH4 {
h4 { --TOC: include; }
}
.tocH5 {
h4 { --TOC: include; }
h5 { --TOC: include; }
}
.tocH6 {
h4 { --TOC: include; }
h5 { --TOC: include; }
h6 { --TOC: include; }
}
.addToC {
h1 {--TOC: include; }
h2 {--TOC: include; }
h3 {--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;
}
}
}