0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-31 08:42:40 +00:00
This commit is contained in:
Victor Losada Hernandez
2023-01-30 20:34:15 +01:00
12 changed files with 2035 additions and 2023 deletions

View File

@@ -134,7 +134,7 @@ const BrewRenderer = createClass({
renderStyle : function() { renderStyle : function() {
if(!this.props.style) return; if(!this.props.style) return;
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />; return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
}, },
renderPage : function(pageText, index){ renderPage : function(pageText, index){

View File

@@ -219,12 +219,13 @@ const ListPage = createClass({
render : function(){ render : function(){
return <div className='listPage sitePage'> return <div className='listPage sitePage'>
<style>@layer V3_5ePHB, bundle;</style>
<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/> <link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
{this.props.navItems} {this.props.navItems}
{this.renderSortOptions()} {this.renderSortOptions()}
<div className='content V3'> <div className='content V3'>
<div className='phb page'> <div className='page'>
{this.renderBrewCollection(this.state.brewCollection)} {this.renderBrewCollection(this.state.brewCollection)}
</div> </div>
</div> </div>

View File

@@ -10,14 +10,14 @@
-moz-column-width : auto; -moz-column-width : auto;
-webkit-column-gap : auto; -webkit-column-gap : auto;
-moz-column-gap : auto; -moz-column-gap : auto;
height : auto;
min-height : 279.4mm;
margin : 20px auto;
} }
.listPage{ .listPage{
.content{ .content{
.phb{ .page{
.noColumns(); .noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
height : auto;
min-height : 279.4mm;
margin : 20px auto;
&::after{ &::after{
display : none; display : none;
} }

View File

@@ -60,7 +60,7 @@ const PrintPage = createClass({
renderStyle : function() { renderStyle : function() {
if(!this.state.brew.style) return; if(!this.state.brew.style) return;
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.state.brew.style} </style>` }} />; return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
}, },
renderPages : function(){ renderPages : function(){

28
package-lock.json generated
View File

@@ -46,8 +46,8 @@
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git" "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^8.32.0", "eslint": "^8.33.0",
"eslint-plugin-react": "^7.32.1", "eslint-plugin-react": "^7.32.2",
"jest": "^29.4.1", "jest": "^29.4.1",
"supertest": "^6.3.3" "supertest": "^6.3.3"
}, },
@@ -6186,9 +6186,9 @@
} }
}, },
"node_modules/eslint": { "node_modules/eslint": {
"version": "8.32.0", "version": "8.33.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
"integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==", "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@eslint/eslintrc": "^1.4.1", "@eslint/eslintrc": "^1.4.1",
@@ -6242,9 +6242,9 @@
} }
}, },
"node_modules/eslint-plugin-react": { "node_modules/eslint-plugin-react": {
"version": "7.32.1", "version": "7.32.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
"integrity": "sha512-vOjdgyd0ZHBXNsmvU+785xY8Bfe57EFbTYYk8XrROzWpr9QBvpjITvAXt9xqcE6+8cjR/g1+mfumPToxsl1www==", "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"array-includes": "^3.1.6", "array-includes": "^3.1.6",
@@ -21434,9 +21434,9 @@
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==" "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
}, },
"eslint": { "eslint": {
"version": "8.32.0", "version": "8.33.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
"integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==", "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@eslint/eslintrc": "^1.4.1", "@eslint/eslintrc": "^1.4.1",
@@ -21553,9 +21553,9 @@
} }
}, },
"eslint-plugin-react": { "eslint-plugin-react": {
"version": "7.32.1", "version": "7.32.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.1.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
"integrity": "sha512-vOjdgyd0ZHBXNsmvU+785xY8Bfe57EFbTYYk8XrROzWpr9QBvpjITvAXt9xqcE6+8cjR/g1+mfumPToxsl1www==", "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
"dev": true, "dev": true,
"requires": { "requires": {
"array-includes": "^3.1.6", "array-includes": "^3.1.6",

View File

@@ -104,8 +104,8 @@
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git" "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^8.32.0", "eslint": "^8.33.0",
"eslint-plugin-react": "^7.32.1", "eslint-plugin-react": "^7.32.2",
"jest": "^29.4.1", "jest": "^29.4.1",
"supertest": "^6.3.3" "supertest": "^6.3.3"
} }

View File

@@ -20,7 +20,8 @@ const transforms = {
}; };
const build = async ({ bundle, render, ssr })=>{ const build = async ({ bundle, render, ssr })=>{
const css = await lessTransform.generate({ paths: './shared' }); let css = await lessTransform.generate({ paths: './shared' });
css = `@layer bundle {\n${css}\n}`;
await fs.outputFile('./build/homebrew/bundle.css', css); await fs.outputFile('./build/homebrew/bundle.css', css);
await fs.outputFile('./build/homebrew/bundle.js', bundle); await fs.outputFile('./build/homebrew/bundle.js', bundle);
await fs.outputFile('./build/homebrew/ssr.js', ssr); await fs.outputFile('./build/homebrew/ssr.js', ssr);

View File

@@ -1,497 +1,499 @@
@import (less) './themes/fonts/5e legacy/fonts.less'; @layer Legacy_5ePHB {
@import (less) './themes/assets/assets.less'; @import (less) './themes/fonts/5e legacy/fonts.less';
@import (less) './themes/phb.depricated.less'; @import (less) './themes/assets/assets.less';
//Colors @import (less) './themes/phb.depricated.less';
@background : #EEE5CE; // Light parchment //Colors
@noteGreen : #e0e5c1; // Pastel green @background : #EEE5CE; // Light parchment
@headerUnderline : #c9ad6a; // Gold @noteGreen : #e0e5c1; // Pastel green
@horizontalRule : #9c2b1b; // Maroon @headerUnderline : #c9ad6a; // Gold
@headerText : #58180D; // Dark maroon @horizontalRule : #9c2b1b; // Maroon
@monsterStatBackground : #FDF1DC; // Lighter parchment @headerText : #58180D; // Dark maroon
@captionText : #766649; // Brown @monsterStatBackground : #FDF1DC; // Lighter parchment
@page { margin: 0; } @captionText : #766649; // Brown
body { @page { margin: 0; }
counter-reset : phb-page-numbers; body {
} counter-reset : phb-page-numbers;
*{ }
-webkit-print-color-adjust : exact; *{
} -webkit-print-color-adjust : exact;
.useSansSerif(){ }
font-family : ScalySans; .useSansSerif(){
em{
font-family : ScalySans; font-family : ScalySans;
font-style : italic; em{
} font-family : ScalySans;
strong{ font-style : italic;
font-family : ScalySans; }
font-weight : 800; strong{
letter-spacing : -0.02em; font-family : ScalySans;
} font-weight : 800;
} letter-spacing : -0.02em;
.useColumns(@multiplier : 1){
column-count : 2;
column-fill : auto;
column-gap : 1cm;
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 : 1cm;
-moz-column-gap : 1cm;
}
.phb{
.useColumns();
counter-increment : phb-page-numbers;
position : relative;
z-index : 15;
box-sizing : border-box;
overflow : hidden;
height : 279.4mm;
width : 215.9mm;
padding : 1.0cm 1.7cm;
padding-bottom : 1.5cm;
background-color : @background;
background-image : @backgroundImage;
font-family : BookSanity;
font-size : 0.317cm;
text-rendering : optimizeLegibility;
page-break-before : always;
page-break-after : always;
contain : size;
//*****************************
// * BASE
// *****************************/
p{
padding-bottom : 0.8em;
line-height : 1.269em;
&+p{
margin-top : -0.8em;
} }
} }
ul{ .useColumns(@multiplier : 1){
margin-bottom : 0.8em; column-count : 2;
padding-left : 1.4em; column-fill : auto;
line-height : 1.269em; column-gap : 1cm;
list-style-position : outside; column-width : 8cm * @multiplier;
list-style-type : disc; -webkit-column-count : 2;
-moz-column-count : 2;
-webkit-column-width : 8cm * @multiplier;
-moz-column-width : 8cm * @multiplier;
-webkit-column-gap : 1cm;
-moz-column-gap : 1cm;
} }
ol{ .phb{
margin-bottom : 0.8em; .useColumns();
padding-left : 1.4em; counter-increment : phb-page-numbers;
line-height : 1.269em; position : relative;
list-style-position : outside; z-index : 15;
list-style-type : decimal; box-sizing : border-box;
} overflow : hidden;
//Indents after p or lists height : 279.4mm;
p+p, ul+p, ol+p{ width : 215.9mm;
text-indent : 1em; padding : 1.0cm 1.7cm;
} padding-bottom : 1.5cm;
img{ background-color : @background;
z-index : -1; background-image : @backgroundImage;
} font-family : BookSanity;
strong{ font-size : 0.317cm;
font-weight : bold; text-rendering : optimizeLegibility;
letter-spacing : 0.03em; page-break-before : always;
} page-break-after : always;
em{ contain : size;
font-style : italic; //*****************************
} // * BASE
sup{ // *****************************/
vertical-align : super; p{
font-size : smaller; padding-bottom : 0.8em;
line-height : 0; line-height : 1.269em;
}
sub{
vertical-align : sub;
font-size : smaller;
line-height : 0;
}
//*****************************
// * HEADERS
// *****************************/
h1,h2,h3,h4{
margin-top : 0.2em;
margin-bottom : 0.2em;
font-family : MrJeeves;
font-weight : 800;
color : @headerText;
}
h1{
column-span : all;
font-size : 0.987cm;
-webkit-column-span : all;
-moz-column-span : all;
&+p::first-letter{
float : left;
font-family : Solberry;
font-size : 10em;
color : #222;
line-height : 0.795em;
}
}
h2{
font-size : 0.705cm;
}
h3{
font-size : 0.529cm;
border-bottom : 2px solid @headerUnderline;
}
h4{
margin-bottom : 0.00em;
font-size : 0.458cm;
}
h5{
margin-bottom : 0.2em;
font-family : ScalySansSmallCaps;
font-size : 0.423cm;
font-weight : 900;
}
//*****************************
// * TABLE
// *****************************/
table{
.useSansSerif();
width : 100%;
margin-bottom : 1em;
font-size : 10pt;
thead{
display: table-row-group;
font-weight : 800;
th{
vertical-align : bottom;
padding-bottom : 0.3em;
padding-right : 0.1em;
padding-left : 0.1em;
}
}
tbody{
tr{
td{
padding : 0.3em 0.1em;
}
&:nth-child(odd){
background-color : @noteGreen;
}
}
}
}
//*****************************
// * NOTE
// *****************************/
blockquote{
.useSansSerif();
box-sizing : border-box;
margin-bottom : 1em;
padding : 5px 10px;
background-color : @noteGreen;
border-style : solid;
border-width : 11px;
border-image : @noteBorderImage 11;
border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888;
p, ul{
font-size : 0.352cm;
line-height : 1.083em;
}
}
//If a note starts a column, give it space at the top to render border
pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
margin-top : 13px;
}
//*****************************
// * MONSTER STAT BLOCK
// *****************************/
hr+blockquote{
position : relative;
padding-top : 15px;
background-color : @monsterStatBackground;
border-style : solid;
border-width : 10px;
border-image : @monsterBorderImageLegacy 10;
h2{
margin-top : -8px;
margin-bottom : 0px;
&+p{ &+p{
padding-bottom : 0px; margin-top : -0.8em;
} }
} }
h3{
font-family : ScalySans;
font-weight : 400;
border-bottom : 1px solid @headerText;
}
hr+ul{
color : @headerText;
}
ul{ ul{
.useSansSerif(); margin-bottom : 0.8em;
padding-left : 1em; padding-left : 1.4em;
font-size : 0.352cm; line-height : 1.269em;
list-style-position : outside;
list-style-type : disc;
} }
// Monster Ability table ol{
hr+table{ margin-bottom : 0.8em;
margin : 0; padding-left : 1.4em;
background-color : transparent; line-height : 1.269em;
border-style : none; list-style-position : outside;
border-image : none; 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.03em;
}
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{
margin-top : 0.2em;
margin-bottom : 0.2em;
font-family : MrJeeves;
font-weight : 800;
color : @headerText;
}
h1{
column-span : all;
font-size : 0.987cm;
-webkit-column-span : all;
-moz-column-span : all;
&+p::first-letter{
float : left;
font-family : Solberry;
font-size : 10em;
color : #222;
line-height : 0.795em;
}
}
h2{
font-size : 0.705cm;
}
h3{
font-size : 0.529cm;
border-bottom : 2px solid @headerUnderline;
}
h4{
margin-bottom : 0.00em;
font-size : 0.458cm;
}
h5{
margin-bottom : 0.2em;
font-family : ScalySansSmallCaps;
font-size : 0.423cm;
font-weight : 900;
}
//*****************************
// * TABLE
// *****************************/
table{
.useSansSerif();
width : 100%;
margin-bottom : 1em;
font-size : 10pt;
thead{
display: table-row-group;
font-weight : 800;
th{
vertical-align : bottom;
padding-bottom : 0.3em;
padding-right : 0.1em;
padding-left : 0.1em;
}
}
tbody{ tbody{
tr:nth-child(odd), tr:nth-child(even){ tr{
background-color : transparent; td{
padding : 0.3em 0.1em;
}
&:nth-child(odd){
background-color : @noteGreen;
}
} }
} }
} }
table{ //*****************************
color : @headerText; // * NOTE
// *****************************/
blockquote{
.useSansSerif();
box-sizing : border-box;
margin-bottom : 1em;
padding : 5px 10px;
background-color : @noteGreen;
border-style : solid;
border-width : 11px;
border-image : @noteBorderImage 11;
border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888;
p, ul{
font-size : 0.352cm;
line-height : 1.083em;
}
} }
p+p{ //If a note starts a column, give it space at the top to render border
margin-top : 0em; pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
padding-bottom : 0.5em; margin-top : 13px;
text-indent : 0em;
} }
//Triangle dividers //*****************************
hr{ // * MONSTER STAT BLOCK
visibility : visible; // *****************************/
height : 6px; hr+blockquote{
margin : 4px 0px; position : relative;
background-image : @redTriangleImage; padding-top : 15px;
background-size : 100% 100%; background-color : @monsterStatBackground;
border : none; border-style : solid;
border-width : 10px;
border-image : @monsterBorderImageLegacy 10;
h2{
margin-top : -8px;
margin-bottom : 0px;
&+p{
padding-bottom : 0px;
}
}
h3{
font-family : ScalySans;
font-weight : 400;
border-bottom : 1px solid @headerText;
}
hr+ul{
color : @headerText;
}
ul{
.useSansSerif();
padding-left : 1em;
font-size : 0.352cm;
}
// Monster Ability table
hr+table{
margin : 0;
background-color : transparent;
border-style : none;
border-image : none;
tbody{
tr:nth-child(odd), tr:nth-child(even){
background-color : transparent;
}
}
}
table{
color : @headerText;
}
p+p{
margin-top : 0em;
padding-bottom : 0.5em;
text-indent : 0em;
}
//Triangle dividers
hr{
visibility : visible;
height : 6px;
margin : 4px 0px;
background-image : @redTriangleImage;
background-size : 100% 100%;
border : none;
}
} }
} //Full Width
//Full Width hr+hr+blockquote{
hr+hr+blockquote{ .useColumns(0.96);
.useColumns(0.96); }
} //*****************************
//***************************** // * FOOTER
// * 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){
&:after{ &: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{ .pageNumber{
left : 2px; position : absolute;
right : 2px;
bottom : 22px;
width : 50px;
font-size : 0.9em;
color : #c9ad6a;
text-align : center;
&.auto::after {
content : counter(phb-page-numbers);
}
} }
.footnote{ .footnote{
left : 80px; position : absolute;
text-align : left; right : 80px;
bottom : 32px;
z-index : 150;
width : 200px;
font-size : 0.8em;
color : #c9ad6a;
text-align : right;
} }
} //*****************************
.pageNumber{ // * EXTRAS
position : absolute; // *****************************/
right : 2px; hr{
bottom : 22px; visibility : hidden;
width : 50px; margin : 0px;
font-size : 0.9em; }
color : #c9ad6a; //Modified unorder list, used in spells
text-align : center; hr+ul{
&.auto::after { margin-bottom : 0.5em;
content : counter(phb-page-numbers); padding-left : 1em;
text-indent : -1em;
list-style-type : none;
}
//Column Break
pre, code{
visibility : hidden;
-webkit-column-break-after : always;
break-after : always;
-moz-column-break-after : always;
}
//Avoid breaking up
p,blockquote,table{
z-index : 15;
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
}
//Better spacing for spell blocks
h4+p+hr+ul{
margin-top : -0.5em
}
//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;
} }
}
.footnote{
position : absolute;
right : 80px;
bottom : 32px;
z-index : 150;
width : 200px;
font-size : 0.8em;
color : #c9ad6a;
text-align : right;
} }
//***************************** //*****************************
// * EXTRAS // * SPELL LIST
// *****************************/ // *****************************/
hr{ .phb .spellList{
visibility : hidden; .useSansSerif();
margin : 0px; column-count : 4;
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
ul+h5{
margin-top : 15px;
}
p, ul{
font-size : 0.352cm;
line-height : 1.263em;
}
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;
}
} }
//Modified unorder list, used in spells //*****************************
hr+ul{ // * WIDE
margin-bottom : 0.5em; // *****************************/
padding-left : 1em; .phb .wide{
text-indent : -1em; column-span : all;
list-style-type : none; -webkit-column-span : all;
-moz-column-span : all;
} }
//Column Break //*****************************
pre, code{ // * CLASS TABLE
visibility : hidden; // *****************************/
-webkit-column-break-after : always; .phb .classTable{
break-after : always; margin-top : 25px;
-moz-column-break-after : always; margin-bottom : 40px;
border-collapse : separate;
background-color : white;
border : initial;
border-style : solid;
border-image-outset : 25px 17px;
border-image-repeat : stretch;
border-image-slice : 150 200 150 200;
border-image-source : @frameBorderImage;
border-image-width : 47px;
h5{
margin-bottom : 10px;
}
} }
//Avoid breaking up //************************************
p,blockquote,table{ // * DESCRIPTIVE TEXT BOX
z-index : 15; // ************************************/
-webkit-column-break-inside : avoid; .phb .descriptive{
page-break-inside : avoid; margin-bottom : 1em;
break-inside : avoid; background-color : #faf7ea;
font-family : ScalySans;
border-style : solid;
border-width : 7px;
border-image : @descriptiveBoxImage 12 stretch;
border-image-outset : 4px;
box-shadow : 0px 0px 6px #faf7ea;
p{
display : block;
padding-bottom : 0px;
line-height : 1.47em;
}
p + p {
padding-top : .8em;
}
em {
font-family : ScalySans;
font-style : italic;
}
strong {
font-family : ScalySans;
font-weight : 800;
letter-spacing : -0.02em;
}
} }
//Better spacing for spell blocks .phb pre+.descriptive{
h4+p+hr+ul{ margin-top : 8px;
margin-top : -0.5em
} }
//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
// *****************************/
.phb .spellList{
.useSansSerif();
column-count : 4;
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
ul+h5{
margin-top : 15px;
}
p, ul{
font-size : 0.352cm;
line-height : 1.263em;
}
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
// *****************************/
.phb .wide{
column-span : all;
-webkit-column-span : all;
-moz-column-span : all;
}
//*****************************
// * CLASS TABLE
// *****************************/
.phb .classTable{
margin-top : 25px;
margin-bottom : 40px;
border-collapse : separate;
background-color : white;
border : initial;
border-style : solid;
border-image-outset : 25px 17px;
border-image-repeat : stretch;
border-image-slice : 150 200 150 200;
border-image-source : @frameBorderImage;
border-image-width : 47px;
h5{
margin-bottom : 10px;
}
}
//************************************
// * DESCRIPTIVE TEXT BOX
// ************************************/
.phb .descriptive{
margin-bottom : 1em;
background-color : #faf7ea;
font-family : ScalySans;
border-style : solid;
border-width : 7px;
border-image : @descriptiveBoxImage 12 stretch;
border-image-outset : 4px;
box-shadow : 0px 0px 6px #faf7ea;
p{
display : block;
padding-bottom : 0px;
line-height : 1.47em;
}
p + p {
padding-top : .8em;
}
em {
font-family : ScalySans;
font-style : italic;
}
strong {
font-family : ScalySans;
font-weight : 800;
letter-spacing : -0.02em;
}
}
.phb pre+.descriptive{
margin-top : 8px;
}
//***************************** //*****************************
// * ARTIST CREDIT BLOCK // * ARTIST CREDIT BLOCK
// *****************************/ // *****************************/
.phb { .phb {
.artist { .artist {
position : absolute; position : absolute;
text-align : center; text-align : center;
font-family : WalterTurncoat;
font-size : 0.27cm;
color : @captionText;
p, p + p {
margin : unset;
text-indent : unset;
line-height : 0.941em;
}
h5 {
font-size : 1.3em;
font-family : WalterTurncoat; font-family : WalterTurncoat;
font-size : 0.27cm;
color : @captionText;
p, p + p {
margin : unset;
text-indent : unset;
line-height : 0.941em;
}
h5 {
font-size : 1.3em;
font-family : WalterTurncoat;
}
a{
color : inherit;
text-decoration : unset;
&:hover {
text-decoration : underline;
}
}
} }
}
//*****************************
// * TABLE OF CONTENTS
// *****************************/
.phb .toc{
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
a{ a{
color : inherit; color : black;
text-decoration : unset; text-decoration : none;
&:hover { &:hover{
text-decoration : underline; text-decoration : underline;
} }
} }
} ul{
} padding-left : 0;
//***************************** list-style-type : none;
// * TABLE OF CONTENTS }
// *****************************/ &>ul>li{
.phb .toc{ margin-bottom : 10px;
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
a{
color : black;
text-decoration : none;
&:hover{
text-decoration : underline;
} }
} }
ul{
padding-left : 0;
list-style-type : none;
}
&>ul>li{
margin-bottom : 10px;
}
} }

View File

@@ -1,19 +1,21 @@
:root { @layer V3_5eDMG {
//Colors :root {
--HB_Color_Accent : #EBCEC3; // Salmon //Colors
--HB_Color_Footnotes : #5C5C5C; // Dark gray --HB_Color_Accent : #EBCEC3; // Salmon
} --HB_Color_Footnotes : #5C5C5C; // Dark gray
.page {
background-image : url(/assets/DMG_background.png);
background-size : cover;
&:after {
background-image : url(/assets/DMG_footerAccent.png);
height: 58px;
} }
.footnote { .page {
bottom : 40px; background-image : url(/assets/DMG_background.png);
background-size : cover;
&:after {
background-image : url(/assets/DMG_footerAccent.png);
height: 58px;
}
.footnote {
bottom : 40px;
}
} }
} }

File diff suppressed because it is too large Load Diff

View File

@@ -1,276 +1,278 @@
@import (less) './themes/fonts/5e/fonts.less'; @layer V3_Blank {
@import (less) './themes/assets/assets.less'; @import (less) './themes/fonts/5e/fonts.less';
@import (less) './themes/assets/assets.less';
:root { :root {
//Colors //Colors
--HB_Color_Background : #FFFFFF; // White --HB_Color_Background : #FFFFFF; // White
--HB_Color_WatercolorStain : #000000; // Black --HB_Color_WatercolorStain : #000000; // Black
}
@page { margin: 0; }
body {
counter-reset : phb-page-numbers;
}
*{
-webkit-print-color-adjust : exact;
}
.useColumns(@multiplier : 1, @fillMode: balance){
column-fill : @fillMode;
column-count : 2;
}
.columnWrapper{
max-height : 100%;
column-span : all;
columns : inherit;
column-gap : inherit;
}
.page{
.useColumns();
height : 279.4mm;
width : 215.9mm;
padding : 1.4cm 1.9cm 1.7cm;
counter-increment : phb-page-numbers;
background-color : var(--HB_Color_Background);
position : relative;
z-index : 15;
box-sizing : border-box;
overflow : hidden;
text-rendering : optimizeLegibility;
page-break-before : always;
page-break-after : always;
contain : size;
}
//*****************************
// * BASE
// *****************************/
.page{
p{
overflow-wrap : break-word;
display : block;
}
strong{
font-weight : bold;
}
em{
font-style : italic;
}
sup{
vertical-align : super;
font-size : smaller;
line-height : 0;
}
sub{
vertical-align : sub;
font-size : smaller;
line-height : 0;
}
ul {
list-style-position : outside; //Needed for multiline list items
list-style-type : disc;
padding-left : 1.4em;
}
ol {
list-style-position : outside;
list-style-type : decimal;
padding-left : 1.4em;
}
img{
z-index : -1;
} }
//***************************** @page { margin: 0; }
// * HEADERS body {
// *****************************/ counter-reset : phb-page-numbers;
h1,h2,h3,h4,h5,h6{
font-weight : bold;
line-height : 1.2em;
} }
h1{ *{
font-size : 2em; -webkit-print-color-adjust : exact;
} }
h2{
font-size : 1.5em; .useColumns(@multiplier : 1, @fillMode: balance){
column-fill : @fillMode;
column-count : 2;
} }
h3{ .columnWrapper{
font-size : 1.17em; max-height : 100%;
column-span : all;
columns : inherit;
column-gap : inherit;
} }
h4{ .page{
font-size : 1em; .useColumns();
height : 279.4mm;
width : 215.9mm;
padding : 1.4cm 1.9cm 1.7cm;
counter-increment : phb-page-numbers;
background-color : var(--HB_Color_Background);
position : relative;
z-index : 15;
box-sizing : border-box;
overflow : hidden;
text-rendering : optimizeLegibility;
page-break-before : always;
page-break-after : always;
contain : size;
} }
h5{ //*****************************
font-size : 0.83em; // * BASE
} // *****************************/
//***************************** .page{
// * TABLE p{
// *****************************/ overflow-wrap : break-word;
table{ display : block;
width : 100%; }
thead{ strong{
display : table-row-group;
font-weight : bold; font-weight : bold;
} }
} em{
div:not(.columnWrapper) > table + table { // Side-by-side tables should not font-style : italic;
margin-top : 0; // have vertical spacing. }
} sup{
vertical-align : super;
font-size : smaller;
line-height : 0;
}
sub{
vertical-align : sub;
font-size : smaller;
line-height : 0;
}
ul {
list-style-position : outside; //Needed for multiline list items
list-style-type : disc;
padding-left : 1.4em;
}
ol {
list-style-position : outside;
list-style-type : decimal;
padding-left : 1.4em;
}
img{
z-index : -1;
}
/* Watermark */ //*****************************
.watermark { // * HEADERS
display : grid !important; // *****************************/
place-items : center; h1,h2,h3,h4,h5,h6{
justify-content : center; font-weight : bold;
position : absolute; line-height : 1.2em;
margin : 0; }
top : 0; h1{
left : 0; font-size : 2em;
width : 100%; }
height : 100%; h2{
font-size : 120px; font-size : 1.5em;
text-transform : uppercase; }
color : black; h3{
mix-blend-mode : overlay; font-size : 1.17em;
opacity : 30%; }
transform : rotate(-45deg); h4{
z-index : 500; font-size : 1em;
p { }
margin-bottom : none; h5{
font-size : 0.83em;
}
//*****************************
// * TABLE
// *****************************/
table{
width : 100%;
thead{
display : table-row-group;
font-weight : bold;
}
}
div:not(.columnWrapper) > table + table { // Side-by-side tables should not
margin-top : 0; // have vertical spacing.
}
/* Watermark */
.watermark {
display : grid !important;
place-items : center;
justify-content : center;
position : absolute;
margin : 0;
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; }
//************************************
// * CODE BLOCKS
// ************************************/
code{
font-family : "Courier New", Courier, monospace;
white-space : pre-wrap;
overflow-wrap : break-word;
}
pre code{
width : 100%;
display : inline-block;
}
//*****************************
// * EXTRAS
// *****************************/
.columnSplit {
visibility : hidden;
-webkit-column-break-after : always;
break-after : always;
-moz-column-break-after : always;
margin-top : 0;
& + * {
margin-top : 0;
}
}
//Avoid breaking up
blockquote,table{
z-index : 15;
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
}
// 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;
} }
} }
/* 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; }
//************************************
// * CODE BLOCKS
// ************************************/
code{
font-family : "Courier New", Courier, monospace;
white-space : pre-wrap;
overflow-wrap : break-word;
}
pre code{
width : 100%;
display : inline-block;
}
//***************************** //*****************************
// * EXTRAS // * MUSTACHE DIVS/SPANS
// *****************************/ // *****************************/
.columnSplit { .page {
visibility : hidden; .block {
-webkit-column-break-after : always; break-inside : avoid;
break-after : always; display : inline-block;
-moz-column-break-after : always; width : 100%;
margin-top : 0; }
& + * { .inline-block {
margin-top : 0; display : inline-block;
text-indent : initial;
} }
} }
//Avoid breaking up
blockquote,table{
z-index : 15;
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
}
// 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;
}
}
//***************************** //*****************************
// * MUSTACHE DIVS/SPANS // * DEFINITION LISTS
// *****************************/ // *****************************/
.page { .page {
.block { dl {
break-inside : avoid; padding-left : 1em;
display : inline-block; white-space : pre-line;
width : 100%; }
dt {
display : inline;
margin-right : 0.5ch;
margin-left : -1em;
}
dd {
display : inline;
margin-left : 0;
text-indent : 0;
}
} }
.inline-block {
display : inline-block;
text-indent : initial;
}
}
//***************************** //*****************************
// * DEFINITION LISTS // * BLANK LINE
// *****************************/ // *****************************/
.page { .page {
dl { .blank {
padding-left : 1em; height : 1em;
white-space : pre-line;
}
dt {
display : inline;
margin-right : 0.5ch;
margin-left : -1em;
}
dd {
display : inline;
margin-left : 0;
text-indent : 0;
}
}
//*****************************
// * BLANK LINE
// *****************************/
.page {
.blank {
height : 1em;
margin-top : 0;
& + * {
margin-top : 0;
}
}
}
//*****************************
// * WIDE
// *****************************/
.page {
.wide{
column-span : all;
display : block;
margin-bottom : 1em;
&+* {
margin-top : 0; margin-top : 0;
& + * {
margin-top : 0;
}
}
}
//*****************************
// * WIDE
// *****************************/
.page {
.wide{
column-span : all;
display : block;
margin-bottom : 1em;
&+* {
margin-top : 0;
}
} }
} }
} }

File diff suppressed because it is too large Load Diff