drakosfire's picture
LLM dictionary to text and back to dictionary for inventory, html templates
760ff9a
raw
history blame
23.7 kB
@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 : unset;
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
// *****************************/
.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;
}
}
}