f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-01 13:02:43 +00:00
Code Wiki Activity
Files
b8ee696b69cd676c3adb4982c773e8f543fa5358
homebrewery/themes/V3/5ePHB/style.less
David Bolack b8ee696b69 Add manual exclusion classes for ToC exclusion.
2024-01-24 15:42:22 -06:00

965 lines
24 KiB
Plaintext
Raw Blame History

@import (less) './themes/fonts/5e/fonts.less';
@import (less) './themes/assets/assets.less';
@import (less) './themes/fonts/icon fonts/font-icons.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-attachment : fixed;
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 {
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 {
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 { all : unset; }
h1 {
margin-top : 1.2cm;
margin-bottom : 0;
font-family : 'NodestoCapsCondensed';
font-size : 2.245cm;
font-weight : normal;
line-height : 0.85em;
color : white;
text-shadow : unset;
text-transform : uppercase;
filter : drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
}
h2 {
font-family : 'NodestoCapsCondensed';
font-size : 0.85cm;
font-weight : normal;
color : white;
letter-spacing : 0.1cm;
filter : drop-shadow(0 0 1px black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
}
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;
filter : drop-shadow(0 0 0.7px black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
}
.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 { all : unset; }
h1 {
margin-top : 1.2cm;
margin-bottom : 0;
font-family : 'NodestoCapsCondensed';
font-size : 2.1cm;
font-weight : normal;
line-height : 0.85em;
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 { all : unset; }
.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 : 0.95em;
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 : 1.5em;
}
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;
color : #FFFFFF;
text-align : center;
text-indent : 0;
letter-spacing : 0.08em;
}
}
}
// *****************************
// * 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 : 1.1em;
}
}
// *****************************
// * TABLE OF CONTENTS
// *****************************/
// Default Exclusions
.page:has(.frontCover),
.page:has(.backCover),
.page:has(.insideCover),
.page:has(.partCover),
.monster,
.noToC,
.toc { --TOC: exclude; }
// Manual Inclusion classes
.addToC,
.addh1, .addh2, .addh3, .addh4, .addh5, .addh6, .addh1h2 h1, .addh1h2 h2,
.addh1h3 h1, .addh1h3 h2, .addh1h3 h3, .addh1h4 h1, .addh1h4 h2, .addh1h4 h3, .addh1h4 h4,
.addh1h5 h1, .addh1h5 h2, .addh1h5 h3, .addh1h5 h4, .addh1h5 h5 { --TOC: include; }
// Manual Exclusion classes
.noh1, .noh2, .noh3, .noh4, .noh5, .noh6, .noh1h2 h1, .noh1h2 h2,
.noh1h3 h1, .noh1h3 h2, .noh1h3 h3, .noh1h4 h1, .noh1h4 h2, .noh1h4 h3, .noh1h4 h4,
.noh1h5 h1, .noh1h5 h2, .noh1h5 h3, .noh1h5 h4, .noh1h5 h5 { --TOC: exclude; }
.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;
}
}
}
View Git Blame Copy Permalink