+ return
{this.props.children}
;
}
diff --git a/shared/naturalcrit/nav/nav.less b/shared/naturalcrit/nav/nav.less
index 43eaa0819..e01715a95 100644
--- a/shared/naturalcrit/nav/nav.less
+++ b/shared/naturalcrit/nav/nav.less
@@ -13,6 +13,7 @@ nav{
position : relative;
display : flex;
justify-content : space-between;
+ z-index : 2;
}
.navSection{
display : flex;
diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less
index 700d383d5..bba4c21c1 100644
--- a/shared/naturalcrit/splitPane/splitPane.less
+++ b/shared/naturalcrit/splitPane/splitPane.less
@@ -22,7 +22,7 @@
vertical-align : middle;
text-align : center;
i{
- display : block;
+ display : block !important;
margin : 10px 0px;
font-size : 6px;
color : #666;
diff --git a/tests/markdown/basic.test.js b/tests/markdown/basic.test.js
index 174e43d7e..459bb22c4 100644
--- a/tests/markdown/basic.test.js
+++ b/tests/markdown/basic.test.js
@@ -13,3 +13,9 @@ test('Processes the markdown within an HTML block if its just a class wrapper',
const rendered = Markdown.render(source);
expect(rendered).toBe('
');
});
+
+test('Check markdown is using the custom renderer; specifically that it adds target=_self attribute to internal links in HTML blocks', function() {
+ const source = '
[Has _self Attribute?](#p1)
';
+ const rendered = Markdown.render(source);
+ expect(rendered).toBe('
');
+});
diff --git a/tests/markdown/mustache-span.test.js b/tests/markdown/mustache-span.test.js
deleted file mode 100644
index 6d249ebcb..000000000
--- a/tests/markdown/mustache-span.test.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/* eslint-disable max-lines */
-
-const Markdown = require('naturalcrit/markdown.js');
-
-test('Renders a mustache span with text only', function() {
- const source = '{{ text}}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
text ');
-});
-
-test('Renders a mustache span with text only, but with spaces', function() {
- const source = '{{ this is a text}}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
this is a text ');
-});
-
-test('Renders an empty mustache span', function() {
- const source = '{{}}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
');
-});
-
-test('Renders a mustache span with just a space', function() {
- const source = '{{ }}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
');
-});
-
-test('Renders a mustache span with a few spaces only', function() {
- const source = '{{ }}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
');
-});
-
-test('Renders a mustache span with text and class', function() {
- const source = '{{my-class text}}';
- const rendered = Markdown.render(source);
- // FIXME: why do we have those two extra spaces after closing "?
- expect(rendered).toBe('
text ');
-});
-
-test('Renders a mustache span with text and two classes', function() {
- const source = '{{my-class,my-class2 text}}';
- const rendered = Markdown.render(source);
- // FIXME: why do we have those two extra spaces after closing "?
- expect(rendered).toBe('
text ');
-});
-
-test('Renders a mustache span with text with spaces and class', function() {
- const source = '{{my-class this is a text}}';
- const rendered = Markdown.render(source);
- // FIXME: why do we have those two extra spaces after closing "?
- expect(rendered).toBe('
this is a text ');
-});
-
-test('Renders a mustache span with text and id', function() {
- const source = '{{#my-span text}}';
- const rendered = Markdown.render(source);
- // FIXME: why do we have that one extra space after closing "?
- expect(rendered).toBe('
text ');
-});
-
-test('Renders a mustache span with text and two ids', function() {
- const source = '{{#my-span,#my-favorite-span text}}';
- const rendered = Markdown.render(source);
- // FIXME: do we need to report an error here somehow?
- expect(rendered).toBe('
text ');
-});
-
-test('Renders a mustache span with text and css property', function() {
- const source = '{{color:red text}}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
text ');
-});
-
-test('Renders a mustache span with text and two css properties', function() {
- const source = '{{color:red,padding:5px text}}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
text ');
-});
-
-test('Renders a mustache span with text and css property which contains quotes', function() {
- const source = '{{font:"trebuchet ms" text}}';
- const rendered = Markdown.render(source);
- // FIXME: is it correct to remove quotes surrounding css property value?
- expect(rendered).toBe('
text ');
-});
-
-test('Renders a mustache span with text and two css properties which contains quotes', function() {
- const source = '{{font:"trebuchet ms",padding:"5px 10px" text}}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
text ');
-});
-
-
-test('Renders a mustache span with text with quotes and css property which contains quotes', function() {
- const source = '{{font:"trebuchet ms" text "with quotes"}}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
text “with quotes” ');
-});
-
-test('Renders a mustache span with text, id, class and a couple of css properties', function() {
- const source = '{{pen,#author,color:orange,font-family:"trebuchet ms" text}}';
- const rendered = Markdown.render(source);
- expect(rendered).toBe('
text ');
-});
-
-// TODO: add tests for ID with accordance to CSS spec:
-//
-// From https://drafts.csswg.org/selectors/#id-selectors:
-//
-// > An ID selector consists of a “number sign” (U+0023, #) immediately followed by the ID value, which must be a CSS identifier.
-//
-// From: https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier:
-//
-// > In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9]
-// > and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);
-// > they cannot start with a digit, two hyphens, or a hyphen followed by a digit.
-// > Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).
-// > For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
-// > Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).
-
-// TODO: add tests for class with accordance to CSS spec:
-//
-// From: https://drafts.csswg.org/selectors/#class-html:
-//
-// > The class selector is given as a full stop (. U+002E) immediately followed by an identifier.
-
diff --git a/tests/markdown/mustache-syntax.test.js b/tests/markdown/mustache-syntax.test.js
new file mode 100644
index 000000000..d9e1ce6f9
--- /dev/null
+++ b/tests/markdown/mustache-syntax.test.js
@@ -0,0 +1,375 @@
+/* eslint-disable max-lines */
+
+const dedent = require('dedent-tabs').default;
+const Markdown = require('naturalcrit/markdown.js');
+
+// Marked.js adds line returns after closing tags on some default tokens.
+// This removes those line returns for comparison sake.
+String.prototype.trimReturns = function(){
+ return this.replace(/\r?\n|\r/g, '');
+};
+
+// Adding `.failing()` method to `describe` or `it` will make failing tests "pass" as long as they continue to fail.
+// Remove the `.failing()` method once you have fixed the issue.
+
+describe('Inline: When using the Inline syntax {{ }}', ()=>{
+ it.failing('Renders a mustache span with text only', function() {
+ const source = '{{ text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a mustache span with text only, but with spaces', function() {
+ const source = '{{ this is a text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
this is a text ');
+ });
+
+ it.failing('Renders an empty mustache span', function() {
+ const source = '{{}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
');
+ });
+
+ it.failing('Renders a mustache span with just a space', function() {
+ const source = '{{ }}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
');
+ });
+
+ it.failing('Renders a mustache span with a few spaces only', function() {
+ const source = '{{ }}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
');
+ });
+
+ it.failing('Renders a mustache span with text and class', function() {
+ const source = '{{my-class text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds two extra \s before closing `>` in opening tag.
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a mustache span with text and two classes', function() {
+ const source = '{{my-class,my-class2 text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds two extra \s before closing `>` in opening tag.
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a mustache span with text with spaces and class', function() {
+ const source = '{{my-class this is a text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds two extra \s before closing `>` in opening tag
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
this is a text ');
+ });
+
+ it.failing('Renders a mustache span with text and id', function() {
+ const source = '{{#my-span text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s before closing `>` in opening tag, and another after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a mustache span with text and two ids', function() {
+ const source = '{{#my-span,#my-favorite-span text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s before closing `>` in opening tag, and another after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a mustache span with text and css property', function() {
+ const source = '{{color:red text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a mustache span with text and two css properties', function() {
+ const source = '{{color:red,padding:5px text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a mustache span with text and css property which contains quotes', function() {
+ const source = '{{font-family:"trebuchet ms" text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a mustache span with text and two css properties which contains quotes', function() {
+ const source = '{{font-family:"trebuchet ms",padding:"5px 10px" text}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+
+ it.failing('Renders a mustache span with text with quotes and css property which contains quotes', function() {
+ const source = '{{font-family:"trebuchet ms" text "with quotes"}}';
+ const rendered = Markdown.render(source);
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text “with quotes” ');
+ });
+
+ it('Renders a mustache span with text, id, class and a couple of css properties', function() {
+ const source = '{{pen,#author,color:orange,font-family:"trebuchet ms" text}}';
+ const rendered = Markdown.render(source);
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+});
+
+// BLOCK SYNTAX
+
+describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
+ it.failing('Renders a div with text only', function() {
+ const source = dedent`{{
+ text
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
`);
+ });
+
+ it.failing('Renders an empty div', function() {
+ const source = dedent`{{
+
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ // FIXME: adds extra \s after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
`);
+ });
+
+ it('Renders a single paragraph with opening and closing brackets', function() {
+ const source = dedent`{{
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ // this actually renders in HB as '{{ }}'...
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
{{}}
`);
+ });
+
+ it.failing('Renders a div with a single class', function() {
+ const source = dedent`{{cat
+
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ // FIXME: adds two extra \s before closing `>` in opening tag
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
`);
+ });
+
+ it.failing('Renders a div with a single class and text', function() {
+ const source = dedent`{{cat
+ Sample text.
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ // FIXME: adds two extra \s before closing `>` in opening tag
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
`);
+ });
+
+ it.failing('Renders a div with two classes and text', function() {
+ const source = dedent`{{cat,dog
+ Sample text.
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ // FIXME: adds two extra \s before closing `>` in opening tag
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
`);
+ });
+
+ it.failing('Renders a div with a style and text', function() {
+ const source = dedent`{{color:red
+ Sample text.
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ // FIXME: adds two extra \s before closing `>` in opening tag
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
`);
+ });
+
+ it.failing('Renders a div with a class, style and text', function() {
+ const source = dedent`{{cat,color:red
+ Sample text.
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ // FIXME: adds extra \s after the class attribute
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
`);
+ });
+
+ it('Renders a div with an ID, class, style and text (different order)', function() {
+ const source = dedent`{{color:red,cat,#dog
+ Sample text.
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
`);
+ });
+
+ it.failing('Renders a div with a single ID', function() {
+ const source = dedent`{{#cat,#dog
+ Sample text.
+ }}`;
+ const rendered = Markdown.render(source).trimReturns();
+ // FIXME: adds extra \s before closing `>` in opening tag, and another after class names
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
`);
+ });
+});
+
+// MUSTACHE INJECTION SYNTAX
+
+describe('Injection: When an injection tag follows an element', ()=>{
+ // FIXME: Most of these fail because injections currently replace attributes, rather than append to. Or just minor extra whitespace issues.
+ describe('and that element is an inline-block', ()=>{
+ it.failing('Renders a span "text" with no injection', function() {
+ const source = '{{ text}}{}';
+ const rendered = Markdown.render(source);
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a span "text" with injected Class name', function() {
+ const source = '{{ text}}{ClassName}';
+ const rendered = Markdown.render(source);
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a span "text" with injected style', function() {
+ const source = '{{ text}}{color:red}';
+ const rendered = Markdown.render(source);
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders a span "text" with two injected styles', function() {
+ const source = '{{ text}}{color:red,background:blue}';
+ const rendered = Markdown.render(source);
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('Renders an emphasis element with injected Class name', function() {
+ const source = '*emphasis*{big}';
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
emphasis
');
+ });
+
+ it.failing('Renders a code element with injected style', function() {
+ const source = '`code`{background:gray}';
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
code
');
+ });
+
+ it.failing('Renders an image element with injected style', function() {
+ const source = '{position:absolute}';
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
');
+ });
+
+ it.failing('Renders an element modified by only the first of two consecutive injections', function() {
+ const source = '{{ text}}{color:red}{background:blue}';
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text {background:blue}
');
+ });
+ });
+
+ describe('and that element is a block', ()=>{
+ it.failing('renders a div "text" with no injection', function() {
+ const source = '{{\ntext\n}}\n{}';
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
');
+ });
+
+ it.failing('renders a div "text" with injected Class name', function() {
+ const source = '{{\ntext\n}}\n{ClassName}';
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
');
+ });
+
+ it.failing('renders a div "text" with injected style', function() {
+ const source = '{{\ntext\n}}\n{color:red}';
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
');
+ });
+
+ it.failing('renders a div "text" with two injected styles', function() {
+ const source = dedent`{{
+ text
+ }}
+ {color:red,background:blue}`;
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
');
+ });
+
+ it.failing('renders an h2 header "text" with injected class name', function() {
+ const source = dedent`## text
+ {ClassName}`;
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('
text ');
+ });
+
+ it.failing('renders a table with injected class name', function() {
+ const source = dedent`| Experience Points | Level |
+ |:------------------|:-----:|
+ | 0 | 1 |
+ | 300 | 2 |
+
+ {ClassName}`;
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`
Experience Points Level 0 1 300 2
`);
+ });
+
+ // it('renders a list with with a style injected into the
tag', function() {
+ // const source = dedent`- Cursed Ritual of Bad Hair
+ // - Eliminate Vindictiveness in Gym Teacher
+ // - Ultimate Rite of the Confetti Angel
+ // - Dark Chant of the Dentists
+ // - Divine Spell of Crossdressing
+ // {color:red}`;
+ // const rendered = Markdown.render(source).trimReturns();
+ // expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`...`); // FIXME: expect this to be injected into ? Currently injects into last
+ // });
+
+ it.failing('renders an h2 header "text" with injected class name, and "secondInjection" as regular text on the next line.', function() {
+ const source = dedent`## text
+ {ClassName}
+ {secondInjection}`;
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('text {secondInjection}
');
+ });
+
+ it.failing('renders a div nested into another div, the inner with class=innerDiv and the other class=outerDiv', function() {
+ const source = dedent`{{
+ outer text
+ {{
+ inner text
+ }}
+ {innerDiv}
+ }}
+ {outerDiv}`;
+ const rendered = Markdown.render(source).trimReturns();
+ expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('');
+ });
+ });
+});
+
+
+// TODO: add tests for ID with accordance to CSS spec:
+//
+// From https://drafts.csswg.org/selectors/#id-selectors:
+//
+// > An ID selector consists of a “number sign” (U+0023, #) immediately followed by the ID value, which must be a CSS identifier.
+//
+// From: https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier:
+//
+// > In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9]
+// > and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);
+// > they cannot start with a digit, two hyphens, or a hyphen followed by a digit.
+// > Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).
+// > For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
+// > Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).
+
+// TODO: add tests for class with accordance to CSS spec:
+//
+// From: https://drafts.csswg.org/selectors/#class-html:
+//
+// > The class selector is given as a full stop (. U+002E) immediately followed by an identifier.
diff --git a/themes/Legacy/5ePHB/style.less b/themes/Legacy/5ePHB/style.less
index 2544ff77d..fa7539f16 100644
--- a/themes/Legacy/5ePHB/style.less
+++ b/themes/Legacy/5ePHB/style.less
@@ -1,499 +1,498 @@
-@layer Legacy_5ePHB {
- @import (less) './themes/fonts/5e legacy/fonts.less';
- @import (less) './themes/assets/assets.less';
- @import (less) './themes/phb.depricated.less';
- //Colors
- @background : #EEE5CE; // Light parchment
- @noteGreen : #e0e5c1; // Pastel green
- @headerUnderline : #c9ad6a; // Gold
- @horizontalRule : #9c2b1b; // Maroon
- @headerText : #58180D; // Dark maroon
- @monsterStatBackground : #FDF1DC; // Lighter parchment
- @captionText : #766649; // Brown
- @page { margin: 0; }
- body {
- counter-reset : phb-page-numbers;
- }
- *{
- -webkit-print-color-adjust : exact;
- }
- .useSansSerif(){
+@import (less) './themes/fonts/5e legacy/fonts.less';
+@import (less) './themes/assets/assets.less';
+@import (less) './themes/phb.depricated.less';
+//Colors
+@background : #EEE5CE; // Light parchment
+@noteGreen : #e0e5c1; // Pastel green
+@headerUnderline : #c9ad6a; // Gold
+@horizontalRule : #9c2b1b; // Maroon
+@headerText : #58180D; // Dark maroon
+@monsterStatBackground : #FDF1DC; // Lighter parchment
+@captionText : #766649; // Brown
+@page { margin: 0; }
+body {
+ counter-reset : phb-page-numbers;
+}
+*{
+ -webkit-print-color-adjust : exact;
+}
+.useSansSerif(){
+ font-family : ScalySans;
+ em{
font-family : ScalySans;
- em{
- font-family : ScalySans;
- font-style : italic;
- }
- strong{
- font-family : ScalySans;
- font-weight : 800;
- letter-spacing : -0.02em;
+ font-style : italic;
+ }
+ strong{
+ 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;
}
}
- .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;
+ ul{
+ margin-bottom : 0.8em;
+ padding-left : 1.4em;
+ line-height : 1.269em;
+ list-style-position : outside;
+ list-style-type : disc;
}
- .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;
+ ol{
+ margin-bottom : 0.8em;
+ padding-left : 1.4em;
+ line-height : 1.269em;
+ list-style-position : outside;
+ 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;
}
}
- ul{
- margin-bottom : 0.8em;
- padding-left : 1.4em;
- line-height : 1.269em;
- list-style-position : outside;
- list-style-type : disc;
- }
- ol{
- margin-bottom : 0.8em;
- padding-left : 1.4em;
- line-height : 1.269em;
- list-style-position : outside;
- 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{
+ tr{
+ td{
+ padding : 0.3em 0.1em;
+ }
+ &:nth-child(odd){
+ background-color : @noteGreen;
}
}
- 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{
- 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
- hr+hr+blockquote{
- .useColumns(0.96);
- }
- //*****************************
- // * 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{
- 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 : #c9ad6a;
- text-align : center;
- &.auto::after {
- content : counter(phb-page-numbers);
- }
- }
- .footnote{
- position : absolute;
- right : 80px;
- bottom : 32px;
- z-index : 150;
- width : 200px;
- font-size : 0.8em;
- color : #c9ad6a;
- text-align : right;
- }
- //*****************************
- // * EXTRAS
- // *****************************/
- hr{
- visibility : hidden;
- margin : 0px;
- }
- //Modified unorder list, used in spells
- hr+ul{
- margin-bottom : 0.5em;
- 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;
}
}
//*****************************
- // * SPELL LIST
+ // * NOTE
// *****************************/
- .phb .spellList{
+ blockquote{
.useSansSerif();
- column-count : 4;
- column-span : all;
- -webkit-column-span : all;
- -moz-column-span : all;
- ul+h5{
- margin-top : 15px;
- }
+ 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.263em;
+ 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{
+ padding-bottom : 0px;
+ }
+ }
+ h3{
+ font-family : ScalySans;
+ font-weight : 400;
+ border-bottom : 1px solid @headerText;
+ }
+ hr+ul{
+ color : @headerText;
}
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;
+ .useSansSerif();
+ padding-left : 1em;
+ font-size : 0.352cm;
}
- }
- //*****************************
- // * 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
- // *****************************/
- .phb {
- .artist {
- position : absolute;
- 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;
- }
- a{
- color : inherit;
- text-decoration : unset;
- &:hover {
- text-decoration : underline;
+ // 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
+ hr+hr+blockquote{
+ .useColumns(0.96);
+ column-fill : balance;
}
//*****************************
- // * TABLE OF CONTENTS
+ // * FOOTER
// *****************************/
- .phb .toc{
+ &: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{
+ 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 : #c9ad6a;
+ text-align : center;
+ &.auto::after {
+ content : counter(phb-page-numbers);
+ }
+ }
+ .footnote{
+ position : absolute;
+ right : 80px;
+ bottom : 32px;
+ z-index : 150;
+ width : 200px;
+ font-size : 0.8em;
+ color : #c9ad6a;
+ text-align : right;
+ }
+ //*****************************
+ // * EXTRAS
+ // *****************************/
+ hr{
+ visibility : hidden;
+ margin : 0px;
+ }
+ //Modified unorder list, used in spells
+ hr+ul{
+ margin-bottom : 0.5em;
+ 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;
+ }
+}
+//*****************************
+// * 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
+// *****************************/
+.phb {
+ .artist {
+ position : absolute;
+ 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;
+ }
a{
- color : black;
- text-decoration : none;
- &:hover{
+ color : inherit;
+ text-decoration : unset;
+ &:hover {
text-decoration : underline;
}
}
- ul{
- padding-left : 0;
- list-style-type : none;
- }
- &>ul>li{
- margin-bottom : 10px;
- }
+ }
+}
+//*****************************
+// * TABLE OF CONTENTS
+// *****************************/
+.phb .toc{
+ -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;
}
}
diff --git a/themes/V3/5eDMG/style.less b/themes/V3/5eDMG/style.less
index 02056a34b..ffc73d992 100644
--- a/themes/V3/5eDMG/style.less
+++ b/themes/V3/5eDMG/style.less
@@ -1,21 +1,28 @@
-@layer V3_5eDMG {
- :root {
- //Colors
- --HB_Color_Accent : #EBCEC3; // Salmon
- --HB_Color_Footnotes : #5C5C5C; // Dark gray
+@import (less) './themes/assets/assets.less';
+
+:root {
+ //Colors
+ --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;
}
- .page {
- background-image : url(/assets/DMG_background.png);
- background-size : cover;
-
- &:after {
- background-image : url(/assets/DMG_footerAccent.png);
- height: 58px;
- }
-
- .footnote {
- bottom : 40px;
- }
+ .footnote {
+ bottom : 40px;
}
}
+
+.page:has(.partCover) {
+
+ .partCover {
+ background-image: @partCoverHeaderDMG;
+ }
+}
\ No newline at end of file
diff --git a/themes/V3/5ePHB/snippets.js b/themes/V3/5ePHB/snippets.js
index bea2a1da3..4e88a7a22 100644
--- a/themes/V3/5ePHB/snippets.js
+++ b/themes/V3/5ePHB/snippets.js
@@ -3,8 +3,10 @@
const MagicGen = require('./snippets/magic.gen.js');
const ClassTableGen = require('./snippets/classtable.gen.js');
const MonsterBlockGen = require('./snippets/monsterblock.gen.js');
+const scriptGen = require('./snippets/script.gen.js');
const ClassFeatureGen = require('./snippets/classfeature.gen.js');
const CoverPageGen = require('./snippets/coverpage.gen.js');
+const PartCoverPageGen = require('./snippets/partcoverpage.gen.js');
const TableOfContentsGen = require('./snippets/tableOfContents.gen.js');
const dedent = require('dedent-tabs').default;
@@ -169,9 +171,22 @@ module.exports = [
gen : MonsterBlockGen.monster('monster,frame,wide', 4),
},
{
- name : 'Cover Page',
- icon : 'fas fa-file-word',
- gen : CoverPageGen,
+ name : 'Front Cover Page',
+ icon : 'fac book-front-cover',
+ gen : CoverPageGen.front,
+ experimental : true
+ },
+ {
+ name : 'Inside Cover Page',
+ icon : 'fac book-inside-cover',
+ gen : CoverPageGen.inside,
+ experimental : true
+ },
+ {
+ name : 'Part Cover Page',
+ icon : 'fac book-part-cover',
+ gen : CoverPageGen.part,
+ experimental : true
},
{
name : 'Magic Item',
@@ -231,7 +246,30 @@ module.exports = [
name : '1/3 Class Table (unframed)',
icon : 'fas fa-border-none',
gen : ClassTableGen.third('classTable'),
- }
+ },
+ {
+ name : 'Rune Table',
+ icon : 'fas fa-language',
+ gen : scriptGen.dwarvish,
+ experimental : true,
+ subsnippets : [
+ {
+ name : 'Dwarvish',
+ icon : 'fac davek',
+ gen : scriptGen.dwarvish,
+ },
+ {
+ name : 'Elvish',
+ icon : 'fac rellanic',
+ gen : scriptGen.elvish,
+ },
+ {
+ name : 'Draconic',
+ icon : 'fac iokharic',
+ gen : scriptGen.draconic,
+ },
+ ]
+ },
]
},
diff --git a/themes/V3/5ePHB/snippets/coverpage.gen.js b/themes/V3/5ePHB/snippets/coverpage.gen.js
index 0fb8ba7a4..bd52e1d9e 100644
--- a/themes/V3/5ePHB/snippets/coverpage.gen.js
+++ b/themes/V3/5ePHB/snippets/coverpage.gen.js
@@ -1,55 +1,46 @@
const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
const titles = [
- 'The Burning Gallows',
- 'The Ring of Nenlast',
- 'Below the Blind Tavern',
- 'Below the Hungering River',
- 'Before Bahamut\'s Land',
- 'The Cruel Grave from Within',
- 'The Strength of Trade Road',
- 'Through The Raven Queen\'s Worlds',
- 'Within the Settlement',
- 'The Crown from Within',
- 'The Merchant Within the Battlefield',
- 'Ioun\'s Fading Traveler',
- 'The Legion Ingredient',
- 'The Explorer Lure',
- 'Before the Charming Badlands',
- 'The Living Dead Above the Fearful Cage',
- 'Vecna\'s Hidden Sage',
- 'Bahamut\'s Demonspawn',
- 'Across Gruumsh\'s Elemental Chaos',
- 'The Blade of Orcus',
- 'Beyond Revenge',
- 'Brain of Insanity',
- 'Breed Battle!, A New Beginning',
- 'Evil Lake, A New Beginning',
- 'Invasion of the Gigantic Cat, Part II',
- 'Kraken War 2020',
- 'The Body Whisperers',
- 'The Diabolical Tales of the Ape-Women',
- 'The Doctor Immortal',
- 'The Doctor from Heaven',
- 'The Graveyard',
- 'Azure Core',
- 'Core Battle',
- 'Core of Heaven: The Guardian of Amazement',
- 'Deadly Amazement III',
- 'Dry Chaos IX',
- 'Gate Thunder',
- 'Guardian: Skies of the Dark Wizard',
- 'Lute of Eternity',
- 'Mercury\'s Planet: Brave Evolution',
- 'Ruby of Atlantis: The Quake of Peace',
- 'Sky of Zelda: The Thunder of Force',
- 'Vyse\'s Skies',
- 'White Greatness III',
- 'Yellow Divinity',
- 'Zidane\'s Ghost'
+ 'The Burning Gallows', 'The Ring of Nenlast',
+ 'Below the Blind Tavern', 'Below the Hungering River',
+ 'Before Bahamut\'s Land', 'The Cruel Grave from Within',
+ 'The Strength of Trade Road', 'Through The Raven Queen\'s Worlds',
+ 'Within the Settlement', 'The Crown from Within',
+ 'The Merchant Within the Battlefield', 'Ioun\'s Fading Traveler',
+ 'The Legion Ingredient', 'The Explorer Lure',
+ 'Before the Charming Badlands', 'Vecna\'s Hidden Sage',
+ 'The Living Dead Above the Fearful Cage', 'Bahamut\'s Demonspawn',
+ 'Across Gruumsh\'s Elemental Chaos', 'The Blade of Orcus',
+ 'Beyond Revenge', 'Brain of Insanity',
+ 'A New Beginning', 'Evil Lake of the Merfolk',
+ 'Invasion of the Gigantic Cat, Part II', 'Kraken War 2020',
+ 'The Body Whisperers', 'The Doctor from Heaven',
+ 'The Diabolical Tales of the Ape-Women', 'The Doctor Immortal',
+ 'Core of Heaven: Guardian of Amazement', 'The Graveyard',
+ 'Guardian: Skies of the Dark Wizard', 'Lute of Eternity',
+ 'Mercury\'s Planet: Brave Evolution', 'Azure Core',
+ 'Sky of Zelda: The Thunder of Force', 'Core Battle',
+ 'Ruby of Atlantis: The Quake of Peace', 'Deadly Amazement III',
+ 'Dry Chaos IX', 'Gate Thunder',
+ 'Vyse\'s Skies', 'Blue Greatness III',
+ 'Yellow Divinity', 'Zidane\'s Ghost'
];
const subtitles = [
+ 'Tomb of Shadows', 'Dragon\'s Lair',
+ 'Lost Caverns', 'The Necromancer',
+ 'Mystic Forest', 'Cursed Ruins',
+ 'The Dark Abyss', 'Enchanted Maze',
+ 'Haunted Castle', 'Sands of Fate',
+ 'Dragon\'s Hoard', 'Undead Menace',
+ 'Lost City Ruins', 'Goblin Ambush',
+ 'Enchanted Forest', 'Darkness Rising',
+ 'Quest for Glory', 'Ancient Prophecy',
+ 'Shadowy Depths', 'Mystic Isles'
+];
+
+const footnote = [
'In an ominous universe, a botanist opposes terrorism.',
'In a demon-haunted city, in an age of lies and hate, a physicist tries to find an ancient treasure and battles a mob of aliens.',
'In a land of corruption, two cyberneticists and a dungeon delver search for freedom.',
@@ -74,51 +65,60 @@ const subtitles = [
'On a planet of mysticism, three travelers and a fire fighter quest for the ultimate weapon and oppose evil.',
'In a wicked universe, five seers fight lawlessness.',
'In a kingdom of death, in an era of illusion and blood, four colonists search for fame.',
- 'In an amazing kingdom, in an age of sorcery and lost souls, eight space pirates quest for freedom.',
- 'In a cursed empire, five inventors oppose terrorism.',
- 'On a crime-ridden planet of conspiracy, a watchman and an artificial intelligence try to find love and oppose lawlessness.',
- 'In a forgotten land, a reporter and a spy try to stop the apocalypse.',
- 'In a forbidden land of prophecy, a scientist and an archivist oppose a cabal of barbarians intent on stealing the souls of the innocent.',
- 'On an infernal world of illusion, a grave robber and a watchman try to find revenge and combat a syndicate of mages intent on stealing the source of all magic.',
- 'In a galaxy of dark magic, four fighters seek freedom.',
- 'In an empire of deception, six tomb-robbers quest for the ultimate weapon and combat an army of raiders.',
- 'In a kingdom of corruption and lost souls, in an age of panic, eight planetologists oppose evil.',
- 'In a galaxy of misery and hopelessness, in a time of agony and pain, five planetologists search for vengance.',
- 'In a universe of technology and insanity, in a time of sorcery, a computer techician quests for hope.',
- 'On a planet of dark magic and barbarism, in an age of horror and blasphemy, seven librarians search for fame.',
- 'In an empire of dark magic, in a time of blood and illusions, four monks try to find the ultimate weapon and combat terrorism.',
- 'In a forgotten empire of dark magic, six kings try to prevent the destruction of mankind.',
- 'In a galaxy of dark magic and horror, in an age of hopelessness, four marines and an outlaw combat evil.',
- 'In a mysterious city of illusion, in an age of computerization, a witch-hunter tries to find the ultimate weapon and opposes an evil corporation.',
- 'In a damned kingdom of technology, a virtual reality programmer and a fighter seek fame.',
- 'In a hellish kingdom, in an age of blasphemy and blasphemy, an astrologer searches for fame.',
- 'In a damned world of devils, an alien and a ranger quest for love and oppose a syndicate of demons.',
- 'In a cursed galaxy, in a time of pain, seven librarians hope to avert the apocalypse.',
- 'In a crime-infested galaxy, in an era of hopelessness and panic, three champions and a grave robber try to solve the ultimate crime.'
+ 'In an amazing kingdom, in an age of sorcery and lost souls, eight space pirates quest for freedom.'
];
+module.exports = {
-module.exports = ()=>{
- return `
+ front : function() {
+ return dedent`
+ {{frontCover}}
-{{margin-top:225px}}
+ {{logo }}
-# ${_.sample(titles)}
+ # ${_.sample(titles)}
+ ## ${_.sample(subtitles)}
+ ___
-{{margin-top:25px}}
+ {{banner HOMEBREW}}
-{{wide
-##### ${_.sample(subtitles)}
-}}
+ {{footnote
+ ${_.sample(footnote)}
+ }}
-\\page`;
-};
\ No newline at end of file
+ {position:absolute,bottom:0,left:0,height:100%}
+
+ \page`;
+ },
+
+ inside : function() {
+ return dedent`
+ {{insideCover}}
+
+ # ${_.sample(titles)}
+ ## ${_.sample(subtitles)}
+ ___
+
+ {{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0
+ {position:absolute,bottom:0,left:0,height:100%}
+ }}
+
+ {{logo }}
+
+ \page`;
+ },
+
+ part : function() {
+ return dedent`
+ {{partCover}}
+
+ # PART X
+ ## ${_.sample(subtitles)}
+
+ {{imageMaskEdge${_.random(1, 8)},--offset:10cm,--rotation:180
+ {position:absolute,bottom:0,left:0,height:100%}
+ }}
+
+ \page`;
+ }
+};
diff --git a/themes/V3/5ePHB/snippets/partcoverpage.gen.js b/themes/V3/5ePHB/snippets/partcoverpage.gen.js
new file mode 100644
index 000000000..5b808aabb
--- /dev/null
+++ b/themes/V3/5ePHB/snippets/partcoverpage.gen.js
@@ -0,0 +1,50 @@
+const _ = require('lodash');
+
+var titles = [
+ 'Introduction to the World of DnD',
+ 'Creating Your Character',
+ 'The Rules of the Game',
+ 'Combat and Combat Strategies',
+ 'Magic and Spellcasting',
+ 'Adventuring and Exploration',
+ 'Dungeon Delving',
+ 'Campaign Building and World Building',
+ 'DM Techniques and Tips',
+ 'Appendix: Reference Material',
+ 'Monsters and Creatures',
+ 'Equipment and Treasure',
+ 'Non-Player Characters (NPCs)',
+ 'Experience and Leveling',
+ 'Races and Classes',
+ 'Skills and Abilities',
+ 'Alignment and Moral Choices',
+ 'Player-vs-Player Conflict',
+ 'Game Mastering 101',
+ 'Running a Successful Campaign',
+ 'Worldbuilding and Lore',
+ 'Designing Encounters and Adventures',
+ 'Managing Players and their Expectations',
+ 'Factions and Political Intrigue',
+ 'Adventure Hooks and Plot Ideas',
+ 'Building a Campaign Setting',
+ 'Handling Rules Disputes',
+ 'Running Large-Scale Battles',
+ 'Designing Unique Magic Systems',
+ 'Developing and Using NPCs',
+ 'Crafting Memorable Quests',
+ 'Improvising When Things Don\'t Go as Planned',
+ 'Managing Session Flow and Pacing',
+ 'Building a World That Feels Alive'
+];
+
+module.exports = ()=>{
+ return `{{partCover}}
+
+# PART X
+## ${_.sample(titles)}
+
+{{imageMaskEdge5,--offset:10cm,--rotation:180
+{height:100%}
+}}
+\\page`;
+};
diff --git a/themes/V3/5ePHB/snippets/script.gen.js b/themes/V3/5ePHB/snippets/script.gen.js
new file mode 100644
index 000000000..61f56ec5f
--- /dev/null
+++ b/themes/V3/5ePHB/snippets/script.gen.js
@@ -0,0 +1,48 @@
+const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
+
+module.exports = {
+ dwarvish : ()=>{
+ return dedent `##### Dwarvish Runes: Sample Alphabet
+ {{runeTable,wide,frame,font-family:Davek
+ | a | b | c | d | e | f | g | h | i | j | k | l | m |
+ |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+ | a | b | c | d | e | f | g | h | i | j | k | l | m |
+ :
+ | n | o | p | q | r | s | t | u | v | w | x | y | z |
+ |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+ | n | o | p | q | r | s | t | u | v | w | x | y | z |
+ }}\n\n`;
+ },
+ elvish : ()=>{
+ return dedent `##### Elvish Runes: Sample Alphabet
+ {{runeTable,wide,frame,font-family:Rellanic
+ | a | b | c | d | e | f | g | h | i | j | k | l | m |
+ |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+ | a | b | c | d | e | f | g | h | i | j | k | l | m |
+ :
+ | n | o | p | q | r | s | t | u | v | w | x | y | z |
+ |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+ | n | o | p | q | r | s | t | u | v | w | x | y | z |
+ }}\n\n`;
+ },
+ draconic : ()=>{
+ return dedent `##### Draconic Runes: Sample Alphabet
+ {{runeTable,wide,frame,font-family:Iokharic
+ | a | b | c | d | e | f | g | h | i | j | k | l | m |
+ |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+ | a | b | c | d | e | f | g | h | i | j | k | l | m |
+ :
+ | n | o | p | q | r | s | t | u | v | w | x | y | z |
+ |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+ | n | o | p | q | r | s | t | u | v | w | x | y | z |
+ }}\n\n`;
+ }
+
+
+};
+
+
+()=>{
+
+};
diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less
index 85dc566f4..e5be33ad1 100644
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -1,798 +1,1019 @@
-@layer V3_5ePHB {
- @import (less) './themes/fonts/5e/fonts.less';
- @import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/5e/fonts.less';
+@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
- }
+: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
+}
- @page { margin: 0; }
- body {
- counter-reset : phb-page-numbers;
- }
- *{
- -webkit-print-color-adjust : exact;
- }
- .useSansSerif(){
- font-family : ScalySansRemake;
- font-size : 0.318cm;
+@page { margin: 0; }
+body {
+ counter-reset : phb-page-numbers;
+}
+*{
+ -webkit-print-color-adjust : exact;
+}
+.useSansSerif(){
+ font-family : ScalySansRemake;
+ font-size : 0.318cm;
+ line-height : 1.2em;
+ p,dl,ul,ol {
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: balance){
+ 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;
+}
+.columnWrapper{
+ max-height : 100%;
+ column-span : all;
+ columns : inherit;
+ column-gap : inherit;
+}
+.page{
+ .useColumns();
+ counter-increment : phb-page-numbers;
+ position : relative;
+ z-index : 15;
+ box-sizing : border-box;
+ overflow : hidden;
+ height : 279.4mm;
+ width : 215.9mm;
+ background-color : var(--HB_Color_Background);
+ background-image : @backgroundImage;
+ padding : 1.4cm 1.9cm 1.7cm;
+ font-family : BookInsanityRemake;
+ font-size : 0.34cm;
+ text-rendering : optimizeLegibility;
+ page-break-before : always;
+ page-break-after : always;
+}
+ //*****************************
+ // * BASE
+ // *****************************/
+
+.page{
+ p{
+ overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
+ display : block;
+ line-height : 1.25em;
+ &+* {
+ margin-top : 0.325cm;
}
- ul, ol {
- padding-left : 1em;
- }
- em{
- font-style : italic;
- }
- strong{
- font-weight : 800;
- letter-spacing : -0.02em;
- }
- h5 + * {
- margin-top : 0.1cm;
+ &+p{
+ margin-top : 0;
}
}
- .useColumns(@multiplier : 1, @fillMode: balance){
- 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;
+ ul{
+ margin-bottom : 0.8em;
+ padding-left : 1.4em;
+ line-height : 1.25em;
+ list-style-position : outside;
+ list-style-type : disc;
}
- .columnWrapper{
- max-height : 100%;
- column-span : all;
- columns : inherit;
- column-gap : inherit;
+ ol{
+ margin-bottom : 0.8em;
+ padding-left : 1.4em;
+ line-height : 1.25em;
+ list-style-position : outside;
+ list-style-type : decimal;
}
- .page{
- .useColumns();
- counter-increment : phb-page-numbers;
- position : relative;
- z-index : 15;
- box-sizing : border-box;
- overflow : hidden;
- height : 279.4mm;
- width : 215.9mm;
- background-color : var(--HB_Color_Background);
- background-image : @backgroundImage;
- padding : 1.4cm 1.9cm 1.7cm;
- font-family : BookInsanityRemake;
- font-size : 0.34cm;
- text-rendering : optimizeLegibility;
- page-break-before : always;
- page-break-after : always;
+ //Indents after p or lists
+ p+p, ul+p, ol+p{
+ text-indent : 1em;
}
- //*****************************
- // * BASE
- // *****************************/
-
- .page{
- p{
- overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
- display : block;
- line-height : 1.25em;
- &+* {
- margin-top : 0.325cm;
- }
- &+p{
- margin-top : 0;
- }
- }
- ul{
- margin-bottom : 0.8em;
- padding-left : 1.4em;
- line-height : 1.25em;
- list-style-position : outside;
- list-style-type : disc;
- }
- ol{
- margin-bottom : 0.8em;
- padding-left : 1.4em;
- line-height : 1.25em;
- list-style-position : outside;
- 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.02em;
- }
- 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{
- font-family : MrEavesRemake;
- font-weight : 800;
- 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;
- font-family : SolberaImitationRemake;
- line-height : 1em;
- font-size : 3.5cm;
- padding-left : 40px; //Allow background color to extend into margins
- margin-left : -40px;
- margin-top : -0.3cm;
- padding-bottom : 2px;
- margin-bottom : -20px;
- background-image : linear-gradient(-45deg, #322814, #998250, #322814);
- background-clip : text;
- -webkit-background-clip : text;
- color : rgba(0, 0, 0, 0);
- }
- &+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;
- border-bottom : 2px solid var(--HB_Color_HeaderUnderline);;
- line-height : 0.995em; //Font is misaligned. Shift up slightly
- & + * {
- 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;
- font-weight : 900;
- line-height : 0.951em; //Font is misaligned. Shift up slightly
- & + * {
- margin-top : 0.2cm;
- }
- }
- //*****************************
- // * TABLE
- // *****************************/
- table{
- .useSansSerif();
- width : 100%;
- line-height : 16px;
- & + * {
- margin-top : 0.325cm;
- }
- thead{
- display: table-row-group;
- font-weight : 800;
- th{
- vertical-align : bottom;
- //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
- }
- }
- 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);
- }
- }
- }
- }
- //*****************************
- // * NOTE
- // *****************************/
- .note{
- .useSansSerif();
- background-color : var(--HB_Color_Accent);
- border-style : solid;
- border-width : 1px;
- border-image : @noteBorderImage 12 stretch;
- border-image-outset : 9px 0px;
- border-image-width : 11px;
- padding : 0.13cm 0.16cm;
- filter : drop-shadow(1px 4px 6px #888);
- .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();
- background-color : #faf7ea;
- border-style : solid;
- border-width : 7px;
- border-image : @descriptiveBoxImage 12 stretch;
- border-image-outset : 4px;
- padding : 0.1em;
- filter : drop-shadow(0 0 3px #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;
- text-align : center;
- font-family : WalterTurncoat;
- font-size : 0.27cm;
- color : var(--HB_Color_CaptionText);
- p, p + p {
- margin : unset;
- text-indent : unset;
- line-height : 1em;
- }
- h5 {
- font-size : 1.3em;
- font-family : WalterTurncoat;
- }
- a{
- color : inherit;
- text-decoration : unset;
- &:hover {
- text-decoration : underline;
- }
- }
- }
-
- /* Watermark */
- .watermark {
- display : grid !important;
- place-items : center;
- justify-content : center;
- position : absolute;
- 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; }
-
- //*****************************
- // * MONSTER STAT BLOCK
- // *****************************/
- .monster {
- .useSansSerif();
- &.frame {
- border-style : solid;
- border-width : 7px 6px;
- background-color : var(--HB_Color_MonsterStatBackground);
- background-image : @monsterBlockBackground;
- border-image : @monsterBorderImage 14 round;
- border-image-outset : 0px 2px;
- background-blend-mode : overlay;
- background-attachment : fixed;
- filter : drop-shadow(1px 4px 6px #888);
- padding : 4px 2px;
- margin-left : -0.16cm;
- margin-right : -0.16cm;
- width : calc(100% + 0.32cm);
- }
-
- position : relative;
- padding : 0px;
- margin-bottom : 0.325cm;
-
- //Headers
- h2{
- font-size : 0.62cm;
- line-height : 1em;
- margin : 0;
- &+p {
- font-size : 0.304cm; //Monster size and type subtext
- margin-bottom : 0;
- }
- }
- h3{
- font-family : ScalySansRemake;
- font-weight : 800;
- font-variant : small-caps;
- border-bottom : 2px solid var(--HB_Color_HeaderText);
- // margin-top : 0.05cm; //Font is misaligned. Shift up slightly
- padding-bottom : 0.05cm;
- }
-
- //Triangle dividers
- hr{
- visibility : visible;
- height : 6px;
- margin : 0.12cm 0cm;
- 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;
- }
- }
-
- :last-child {
- margin-bottom : 0;
- }
- }
-
- //Full Width
- .monster.wide{
- .useColumns(0.96, @fillMode: balance);
- }
-
- //*****************************
- // * 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{
- 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{
- font-family : "Courier New", Courier, monospace;
- font-size : 0.325;
- padding : 0px 4px;
- color : #58180d;
- background-color : #faf7ea;
- border-radius : 4px;
- white-space : pre-wrap;
- overflow-wrap : break-word;
- }
-
- pre code{
- width : 100%;
- display : inline-block;
- border-style : solid;
- border-width : 1px;
- border-image : @codeBorderImage 26 stretch;
- border-image-width : 10px;
- border-image-outset : 2px;
- border-radius : 12px;
- margin-bottom : 2px;
- padding : 0.15cm;
- .page :where(&) {
- margin-top : 2px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.325cm;
- }
- }
- //*****************************
- // * EXTRAS
- // *****************************/
- hr{
- visibility : hidden;
- margin : 0px;
- }
- .columnSplit {
- visibility : hidden;
- -webkit-column-break-after : always;
- break-after : always;
- -moz-column-break-after : always;
- }
- //Avoid breaking up
- blockquote,table{
- z-index : 15;
- -webkit-column-break-inside : avoid;
- page-break-inside : avoid;
- break-inside : avoid;
- }
- //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;
- }
+ img{
+ z-index : -1;
+ }
+ strong{
+ font-weight : bold;
+ letter-spacing : -0.02em;
+ }
+ em{
+ font-style : italic;
+ }
+ sup{
+ vertical-align : super;
+ font-size : smaller;
+ line-height : 0;
+ }
+ sub{
+ vertical-align : sub;
+ font-size : smaller;
+ line-height : 0;
}
//*****************************
- // * SPELL LIST
+ // * HEADERS
// *****************************/
- .page .spellList{
- .useSansSerif();
- column-count : 2;
- ul+h5{
- margin-top : 15px;
+ h1,h2,h3,h4{
+ font-family : MrEavesRemake;
+ font-weight : 800;
+ 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;
+ font-family : SolberaImitationRemake;
+ line-height : 1em;
+ font-size : 3.5cm;
+ padding-left : 40px; //Allow background color to extend into margins
+ margin-left : -40px;
+ margin-top : -0.3cm;
+ padding-bottom : 2px;
+ margin-bottom : -20px;
+ background-image : linear-gradient(-45deg, #322814, #998250, #322814);
+ background-clip : text;
+ -webkit-background-clip : text;
+ color : rgba(0, 0, 0, 0);
}
- p, ul{
- font-size : 0.352cm;
- line-height : 1.265em;
- }
- 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{
- column-count : 4;
+ &+p::first-line{
+ font-variant : small-caps;
}
}
-
- //*****************************
- // * CLASS TABLE
- // *****************************/
- .page .classTable{
- th[colspan]:not([rowspan]) {
- white-space : nowrap;
+ 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;
+ border-bottom : 2px solid var(--HB_Color_HeaderUnderline);;
+ line-height : 0.995em; //Font is misaligned. Shift up slightly
+ & + * {
+ margin-top: 0.17cm;
}
- &.frame {
- margin-top : 0.7cm;
- margin-bottom : 0.9cm;
- margin-left : -0.1cm;
- margin-right : -0.1cm;
- width : calc(100% + 0.2cm);
- border-collapse : separate;
- background-color : white;
- border : initial;
- border-style : solid;
- border-image-outset : 0.4cm 0.3cm;
- border-image-repeat : stretch;
- border-image-slice : 200;
- border-image-source : @frameBorderImage;
- border-image-width : 47px;
- &.wide:first-child {
- margin-top: 0.12cm;
- }
- & + * {
- margin-top: 0;
- }
+ }
+ * + 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;
}
- &.decoration {
- position:relative;
- }
- &.decoration::before {
- content :'';
- position : absolute;
- background-image : @classTableDecoration,
- @classTableDecoration;
- background-size : contain, contain;
- background-repeat : no-repeat, no-repeat;
- background-position : top, bottom;
- width : 7.75cm;
- height : calc(100% + 3.3cm);
- top : 50%;
- left : 50%;
- transform : translateY(-50%) translateX(-50%);
- filter : drop-shadow(0px 0px 1px #C8C5C080);
- z-index : -1;
- }
- &.decoration.wide::before {
- width : calc(100% + 3.3cm);
- height : 7.75cm;
- background-position : left, right;
- }
- h5 + table{
+ }
+ * + 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;
+ font-weight : 900;
+ line-height : 0.951em; //Font is misaligned. Shift up slightly
+ & + * {
margin-top : 0.2cm;
}
}
//*****************************
- // * TABLE OF CONTENTS
+ // * TABLE
// *****************************/
- .page {
- &:has(.toc):after {
- display: none;
+ table{
+ .useSansSerif();
+ width : 100%;
+ line-height : 16px;
+ & + * {
+ margin-top : 0.325cm;
}
- .toc {
+ thead{
+ display: table-row-group;
+ font-weight : 800;
+ th{
+ vertical-align : bottom;
+ //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
+ }
+ }
+ 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);
+ }
+ }
+ }
+ }
+ //*****************************
+ // * NOTE
+ // *****************************/
+ .note{
+ .useSansSerif();
+ background-color : var(--HB_Color_Accent);
+ border-style : solid;
+ border-width : 1px;
+ border-image : @noteBorderImage 12 stretch;
+ border-image-outset : 9px 0px;
+ border-image-width : 11px;
+ padding : 0.13cm 0.16cm;
+ box-shadow : 1px 4px 14px #888;
+ .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();
+ background-color : #faf7ea;
+ border-style : solid;
+ border-width : 7px;
+ border-image : @descriptiveBoxImage 12 stretch;
+ border-image-outset : 4px;
+ padding : 0.1em;
+ 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;
+ text-align : center;
+ font-family : WalterTurncoat;
+ font-size : 0.27cm;
+ color : var(--HB_Color_CaptionText);
+ p, p + p {
+ margin : unset;
+ text-indent : unset;
+ line-height : 1em;
+ }
+ h5 {
+ font-size : 1.3em;
+ font-family : WalterTurncoat;
+ }
+ a{
+ color : inherit;
+ text-decoration : unset;
+ &:hover {
+ text-decoration : underline;
+ }
+ }
+ }
+
+ /* Watermark */
+ .watermark {
+ display : grid !important;
+ place-items : center;
+ justify-content : center;
+ position : absolute;
+ 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; }
+
+ //*****************************
+ // * MONSTER STAT BLOCK
+ // *****************************/
+ .monster {
+ .useSansSerif();
+ &.frame {
+ border-style : solid;
+ border-width : 7px 6px;
+ background-color : var(--HB_Color_MonsterStatBackground);
+ background-image : @monsterBlockBackground;
+ border-image : @monsterBorderImage 14 round;
+ border-image-outset : 0px 2px;
+ background-blend-mode : overlay;
+ background-attachment : fixed;
+ box-shadow : 1px 4px 14px #888;
+ padding : 4px 2px;
+ margin-left : -0.16cm;
+ margin-right : -0.16cm;
+ width : calc(100% + 0.32cm);
+ }
+
+ position : relative;
+ padding : 0px;
+ margin-bottom : 0.325cm;
+
+ //Headers
+ h2{
+ font-size : 0.62cm;
+ line-height : 1em;
+ margin : 0;
+ &+p {
+ font-size : 0.304cm; //Monster size and type subtext
+ margin-bottom : 0;
+ }
+ }
+ h3{
+ font-family : ScalySansRemake;
+ font-weight : 800;
+ font-variant : small-caps;
+ border-bottom : 2px solid var(--HB_Color_HeaderText);
+ // margin-top : 0.05cm; //Font is misaligned. Shift up slightly
+ padding-bottom : 0.05cm;
+ }
+
+ //Triangle dividers
+ hr{
+ visibility : visible;
+ height : 6px;
+ margin : 0.12cm 0cm;
+ 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;
+ }
+ }
+
+ :last-child {
+ margin-bottom : 0;
+ }
+ }
+
+ //Full Width
+ .monster.wide{
+ .useColumns(0.96, @fillMode: balance);
+ }
+
+ //*****************************
+ // * 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{
+ 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{
+ font-family : "Courier New", Courier, monospace;
+ font-size : 0.325;
+ padding : 0px 4px;
+ color : #58180d;
+ background-color : #faf7ea;
+ border-radius : 4px;
+ white-space : pre-wrap;
+ overflow-wrap : break-word;
+ }
+
+ pre code{
+ width : 100%;
+ display : inline-block;
+ border-style : solid;
+ border-width : 1px;
+ border-image : @codeBorderImage 26 stretch;
+ border-image-width : 10px;
+ border-image-outset : 2px;
+ border-radius : 12px;
+ margin-bottom : 2px;
+ padding : 0.15cm;
+ .page :where(&) {
+ margin-top : 2px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.325cm;
+ }
+ }
+ //*****************************
+ // * EXTRAS
+ // *****************************/
+ hr{
+ visibility : hidden;
+ margin : 0px;
+ }
+ .columnSplit {
+ visibility : hidden;
+ -webkit-column-break-after : always;
+ break-after : always;
+ -moz-column-break-after : always;
+ }
+ //Avoid breaking up
+ blockquote,table{
+ z-index : 15;
-webkit-column-break-inside : avoid;
page-break-inside : avoid;
break-inside : avoid;
- h1 {
- text-align : center;
- margin-bottom : 0.3cm;
- }
- 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;
- list-style-type : none;
- margin-top : 0;
- a {
- width : 100%;
- display : flex;
- flex-flow : row nowrap;
- justify-content : space-between;
- }
- li + li h3 {
- margin-top : 0.26cm;
- line-height : 1em
- }
- h3 span:first-child::after {
- border : none;
- }
- span {
- display : contents;
- &:first-child::after {
- content : "";
- bottom : 0.08cm;
- flex : 1;
- margin-left : 0.08cm; /* Spacing before dot leaders */
- margin-right : 0.16cm;
- border-bottom : 0.05cm dotted #000;
- margin-bottom : 0.08cm;
- }
- &:last-child {
- display : inline-block;
- align-self : flex-end;
- font-family : "BookInsanityRemake";
- font-size : 0.34cm;
- font-weight : normal;
- color : #000;
- }
- }
- ul { /*List indent*/
- margin-left : 1em;
- }
- }
- &.wide{
- .useColumns(0.96, @fillMode: balance);
- }
- }
}
-
- //*****************************
- // * DEFINITION LISTS
- // *****************************/
- .page {
- dl {
- line-height : 1.25em;
- padding-left : 1em;
- white-space : pre-line;
- & + * {
- margin-top : 0.28cm;
- }
- }
- dl + * {
- margin-top : 0.17cm;
- }
- p + dl {
- margin-top: 0.17cm;
- }
- dt {
- display : inline;
- margin-right : 5px;
- margin-left : -1em;
- }
- dd {
- display : inline;
- margin-left : 0px;
- text-indent : 0px;
- }
+ //Text indent right after table
+ table+p{
+ text-indent : 1em;
}
-
- //*****************************
- // * WIDE
- // *****************************/
- .page .wide{
- margin-bottom : 0.325cm;
+ // Nested lists
+ ul ul,ol ol,ul ol,ol ul{
+ margin-bottom : 0px;
+ margin-left : 1.5em;
}
-
- .page h1 + *{
- margin-top : 0;
+ li{
+ -webkit-column-break-inside : avoid;
+ page-break-inside : avoid;
+ break-inside : avoid;
+ }
+}
+//*****************************
+// * SPELL LIST
+// *****************************/
+.page .spellList{
+ .useSansSerif();
+ column-count : 2;
+ ul+h5{
+ margin-top : 15px;
+ }
+ p, ul{
+ font-size : 0.352cm;
+ line-height : 1.265em;
+ }
+ 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{
+ column-count : 4;
+ }
+}
+
+//*****************************
+// * CLASS TABLE
+// *****************************/
+.page .classTable{
+th[colspan]:not([rowspan]) {
+ white-space : nowrap;
+}
+&.frame {
+ margin-top : 0.7cm;
+ margin-bottom : 0.9cm;
+ margin-left : -0.1cm;
+ margin-right : -0.1cm;
+ width : calc(100% + 0.2cm);
+ border-collapse : separate;
+ background-color : white;
+ border : initial;
+ border-style : solid;
+ border-image-outset : 0.4cm 0.3cm;
+ border-image-repeat : stretch;
+ border-image-slice : 200;
+ border-image-source : @frameBorderImage;
+ border-image-width : 47px;
+ &.wide:first-child {
+ margin-top: 0.12cm;
+ }
+ & + * {
+ margin-top: 0;
+ }
+}
+&.decoration {
+ position:relative;
+}
+&.decoration::before {
+ content :'';
+ position : absolute;
+ background-image : @classTableDecoration,
+ @classTableDecoration;
+ background-size : contain, contain;
+ background-repeat : no-repeat, no-repeat;
+ background-position : top, bottom;
+ width : 7.75cm;
+ height : calc(100% + 3.3cm);
+ top : 50%;
+ left : 50%;
+ transform : translateY(-50%) translateX(-50%);
+ filter : drop-shadow(0px 0px 1px #C8C5C080);
+ z-index : -1;
+}
+&.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 {
+ text-shadow: unset;
+ 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);
+ text-transform : uppercase;
+ font-weight : normal;
+ margin-top : 1.2cm;
+ margin-bottom : 0;
+ color : white;
+ font-family : NodestoCapsCondensed;
+ font-size : 2.245cm;
+ line-height : 0.85em;
+ }
+ h2 {
+ 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);
+ font-family : NodestoCapsCondensed;
+ font-weight : normal;
+ font-size : 0.85cm;
+ letter-spacing : 0.1cm;
+ color : white;
+ }
+ hr {
+ display : block;
+ position : relative;
+ background-image : @horizontalRule;
+ background-size : 100% 100%;
+ visibility : visible;
+ height : 0.5cm;
+ width : 12cm;
+ border : none;
+ margin : auto;
+ filter : drop-shadow(0 0 3px black);
+ }
+ .banner {
+ filter : drop-shadow(2px 2px 2px black);
+ position : absolute;
+ left : 0;
+ bottom : 4.2cm;
+ background-image : url('/assets/coverPageBanner.svg');
+ height : 1.7cm;
+ width : 10.5cm;
+ color : white;
+ font-family : NodestoCapsCondensed;
+ font-weight : normal;
+ font-size : 1cm;
+ letter-spacing : 0.014cm;
+ text-align : left;
+ padding-left : 1cm;
+ display : flex;
+ justify-content : center;
+ flex-direction : column;
+ padding-top : 0.1cm;
+ }
+ .footnote {
+ 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);
+ position : absolute;
+ text-align : center;
+ color : white;
+ font-size : 0.496cm;
+ bottom : 1.3cm;
+ left : 0;
+ right : 0;
+ margin-left : auto;
+ margin-right : auto;
+ width : 70%;
+ font-family : Overpass;
+ }
+ .logo {
+ position : absolute;
+ top : 0.5cm;
+ left : 0;
+ right : 0;
+ filter : drop-shadow(0 0 0.075cm black);
+ img {
+ height : 2cm;
+ width : 100%;
+ }
+ }
+}
+//*****************************
+// * INSIDE COVER PAGE
+// *****************************/
+.page:has(.insideCover) {
+ columns : 1;
+ text-align : center;
+ &:after {
+ all : unset;
+ }
+ h1 {
+ font-family : NodestoCapsCondensed;
+ font-weight : normal;
+ font-size : 2.1cm;
+ margin-top : 1.2cm;
+ margin-bottom : 0;
+ text-transform : uppercase;
+ line-height : 0.85em;
+ }
+ h2 {
+ font-family : NodestoCapsCondensed;
+ font-weight : normal;
+ font-size : 0.85cm;
+ letter-spacing : 0.5cm;
+ }
+ hr {
+ display : block;
+ position : relative;
+ background-image : @horizontalRule;
+ background-size : 100% 100%;
+ visibility : visible;
+ height : 0.5cm;
+ width : 12cm;
+ border : none;
+ margin : auto;
+ }
+ .logo {
+ position : absolute;
+ bottom : 1cm;
+ left : 0;
+ right : 0;
+ height : 2cm;
+ img {
+ height : 2cm;
+ width : 100%;
+ }
+ }
+}
+
+//*****************************
+ // * PART COVER
+ // *****************************/
+ .page:has(.partCover) {
+ columns : 1;
+ text-align : center;
+ padding-top: 0;
+
+ .partCover {
+ background-image: @partCoverHeaderPHB;
+ background-repeat: no-repeat;
+ position: absolute;
+ background-size: 100%;
+ top: 0;
+ left: 0;
+ height: 6cm;
+ width: 100%;
+ }
+
+ h1 {
+ position: relative;
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 2.3cm;
+ font-family: NodestoCapsCondensed;
+ margin-top: .4cm;
+ }
+
+ h2 {
+ font-family: Overpass;
+ font-size: 0.45cm;
+ position: relative;
+ margin-top: -0.7em;
+ line-height: 1.1em;
+ margin-left : auto;
+ margin-right : auto;
+ }
+ }
+
+//*****************************
+// * TABLE OF CONTENTS
+// *****************************/
+.page {
+&:has(.toc):after {
+ display: none;
+}
+.toc {
+-webkit-column-break-inside : avoid;
+page-break-inside : avoid;
+break-inside : avoid;
+ h1 {
+ text-align : center;
+ margin-bottom : 0.3cm;
+ }
+ 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;
+ list-style-type : none;
+ margin-top : 0;
+ a {
+ width : 100%;
+ display : flex;
+ flex-flow : row nowrap;
+ justify-content : space-between;
+ }
+ li + li h3 {
+ margin-top : 0.26cm;
+ line-height : 1em
+ }
+ h3 span:first-child::after {
+ border : none;
+ }
+ span {
+ display : contents;
+ &:first-child::after {
+ content : "";
+ bottom : 0.08cm;
+ flex : 1;
+ margin-left : 0.08cm; /* Spacing before dot leaders */
+ margin-right : 0.16cm;
+ border-bottom : 0.05cm dotted #000;
+ margin-bottom : 0.08cm;
+ }
+ &:last-child {
+ display : inline-block;
+ align-self : flex-end;
+ font-family : "BookInsanityRemake";
+ font-size : 0.34cm;
+ font-weight : normal;
+ color : #000;
+ }
+ }
+ ul { /*List indent*/
+ margin-left : 1em;
+ }
+ }
+ &.wide{
+ .useColumns(0.96, @fillMode: balance);
+ }
+}
+}
+
+//*****************************
+// * DEFINITION LISTS
+// *****************************/
+.page {
+ dl {
+ line-height : 1.25em;
+ padding-left : 1em;
+ white-space : pre-line;
+ & + * {
+ margin-top : 0.28cm;
+ }
+ }
+ dl + * {
+ margin-top : 0.17cm;
+ }
+ p + dl {
+ margin-top: 0.17cm;
+ }
+ dt {
+ display : inline;
+ margin-right : 5px;
+ margin-left : -1em;
+ }
+ dd {
+ display : inline;
+ margin-left : 0px;
+ text-indent : 0px;
+ }
+}
+
+//*****************************
+// * 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;
+ vertical-align: middle;
+ text-transform: uppercase;
+ outline: 1px solid #000;
+ font-weight: normal;
+ }
+ th{
+ font-family: BookInsanityRemake;
+ font-size: 0.45cm;
+ }
+ td {
+ font-size: 0.7cm;
+ }
+ }
+
+ &.frame {
+ border: initial;
+ border-style: solid;
+ border-image-outset: .45cm .35cm .4cm .4cm;
+ border-image-repeat: stretch;
+ border-image-slice: 170;
+ border-image-source: @scriptBorder;
+ border-image-width: 1.4cm;
+ }
}
}
diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js
index cd508cccb..9d64496c3 100644
--- a/themes/V3/Blank/snippets.js
+++ b/themes/V3/Blank/snippets.js
@@ -1,9 +1,8 @@
/* eslint-disable max-lines */
-const WatercolorGen = require('./snippets/watercolor.gen.js');
-const dedent = require('dedent-tabs').default;
-
-
+const WatercolorGen = require('./snippets/watercolor.gen.js');
+const ImageMaskGen = require('./snippets/imageMask.gen.js');
+const dedent = require('dedent-tabs').default;
module.exports = [
@@ -102,6 +101,68 @@ module.exports = [
icon : 'fas fa-fill-drip',
gen : WatercolorGen,
},
+ {
+ name : 'Watercolor Center',
+ icon : 'fac mask-center',
+ gen : ImageMaskGen.center,
+ experimental : true,
+ },
+ {
+ name : 'Watercolor Edge',
+ icon : 'fac mask-edge',
+ gen : ImageMaskGen.edge('bottom'),
+ experimental : true,
+ subsnippets : [
+ {
+ name : 'Top',
+ icon : 'fac position-top',
+ gen : ImageMaskGen.edge('top'),
+ },
+ {
+ name : 'Right',
+ icon : 'fac position-right',
+ gen : ImageMaskGen.edge('right'),
+ },
+ {
+ name : 'Bottom',
+ icon : 'fac position-bottom',
+ gen : ImageMaskGen.edge('bottom'),
+ },
+ {
+ name : 'Left',
+ icon : 'fac position-left',
+ gen : ImageMaskGen.edge('left'),
+ },
+ ]
+ },
+ {
+ name : 'Watercolor Corner',
+ icon : 'fac mask-corner',
+ gen : ImageMaskGen.corner,
+ experimental : true,
+ subsnippets : [
+ {
+ name : 'Top-Left',
+ icon : 'fac position-top-left',
+ gen : ImageMaskGen.corner('top', 'left'),
+ },
+ {
+ name : 'Top-Right',
+ icon : 'fac position-top-right',
+ gen : ImageMaskGen.corner('top', 'right'),
+ },
+ {
+ name : 'Bottom-Left',
+ icon : 'fac position-bottom-left',
+ gen : ImageMaskGen.corner('bottom', 'left'),
+ },
+ {
+ name : 'Bottom-Right',
+ icon : 'fac position-bottom-right',
+ gen : ImageMaskGen.corner('bottom', 'right'),
+ }
+ ]
+ },
{
name : 'Watermark',
icon : 'fas fa-id-card',
diff --git a/themes/V3/Blank/snippets/imageMask.gen.js b/themes/V3/Blank/snippets/imageMask.gen.js
new file mode 100644
index 000000000..323f89a1f
--- /dev/null
+++ b/themes/V3/Blank/snippets/imageMask.gen.js
@@ -0,0 +1,46 @@
+const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
+
+module.exports = {
+ center : ()=>{
+ return dedent`
+ {{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0
+ {height:100%}
+ }}
+ \n\n`;
+ },
+
+ edge : (side = 'bottom')=>{
+ const rotation = {
+ 'bottom' : 0,
+ 'top' : 180,
+ 'left' : 90,
+ 'right' : 270
+ }[side];
+ return dedent`
+ {{imageMaskEdge${_.random(1, 8)},--offset:0%,--rotation:${rotation}
+ {height:100%}
+ }}
+ \n\n`;
+ },
+
+ corner : (y = 'top', x = 'left')=>{
+ const offsetX = (x == 'left' ? '-50%' : '50%');
+ const offsetY = (y == 'top' ? '50%' : '-50%');
+ return dedent`
+ {{imageMaskCorner${_.random(1, 37)},--offsetX:${offsetX},--offsetY:${offsetY},--rotation:0
+ {height:100%}
+ }}
+ \n\n`;
+ }
+
+};
+
+()=>{
+
+};
diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less
index 387b6612f..38aa42f20 100644
--- a/themes/V3/Blank/style.less
+++ b/themes/V3/Blank/style.less
@@ -1,278 +1,464 @@
-@layer V3_Blank {
- @import (less) './themes/fonts/5e/fonts.less';
- @import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/5e/fonts.less';
+@import (less) './themes/assets/assets.less';
- :root {
- //Colors
- --HB_Color_Background : #FFFFFF; // White
- --HB_Color_WatercolorStain : #000000; // Black
- }
+:root {
+ //Colors
+ --HB_Color_Background : #FFFFFF; // White
+ --HB_Color_WatercolorStain : #000000; // Black
+}
- @page { margin: 0; }
- body {
- counter-reset : phb-page-numbers;
- }
- *{
- -webkit-print-color-adjust : exact;
- }
+@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;
+//*****************************
+// * MUSTACHE DIVS/SPANS
+// *****************************/
+.page {
+ .block {
+ break-inside : avoid;
+ display : inline-block;
+ width : 100%;
+ img {
+ z-index : 0;
}
- strong{
+ }
+ .inline-block {
+ display : inline-block;
+ text-indent : initial;
+ }
+}
+
+.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;
+ }
+
+ //*****************************
+ // * HEADERS
+ // *****************************/
+ h1,h2,h3,h4,h5,h6{
+ font-weight : bold;
+ line-height : 1.2em;
+ }
+ h1{
+ font-size : 2em;
+ }
+ h2{
+ font-size : 1.5em;
+ }
+ h3{
+ font-size : 1.17em;
+ }
+ h4{
+ font-size : 1em;
+ }
+ h5{
+ font-size : 0.83em;
+ }
+ //*****************************
+ // * TABLE
+ // *****************************/
+ table{
+ width : 100%;
+ thead{
+ display : table-row-group;
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;
- }
-
- //*****************************
- // * HEADERS
- // *****************************/
- h1,h2,h3,h4,h5,h6{
- font-weight : bold;
- line-height : 1.2em;
- }
- h1{
- font-size : 2em;
- }
- h2{
- font-size : 1.5em;
- }
- h3{
- font-size : 1.17em;
- }
- h4{
- font-size : 1em;
- }
- 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;
- }
+ }
+ div:not(.columnWrapper) > table + table { // Side-by-side tables should not
+ margin-top : 0; // have vertical spacing.
}
- //*****************************
- // * MUSTACHE DIVS/SPANS
- // *****************************/
- .page {
- .block {
- break-inside : avoid;
- display : inline-block;
- width : 100%;
- }
- .inline-block {
- display : inline-block;
- text-indent : initial;
- }
+ //************************************
+ // * CODE BLOCKS
+ // ************************************/
+ code{
+ font-family : "Courier New", Courier, monospace;
+ white-space : pre-wrap;
+ overflow-wrap : break-word;
}
- //*****************************
- // * DEFINITION LISTS
- // *****************************/
- .page {
- dl {
- padding-left : 1em;
- white-space : pre-line;
- }
- dt {
- display : inline;
- margin-right : 0.5ch;
- margin-left : -1em;
- }
- dd {
- display : inline;
- margin-left : 0;
- text-indent : 0;
- }
+ pre code{
+ width : 100%;
+ display : inline-block;
}
-
//*****************************
- // * BLANK LINE
+ // * EXTRAS
// *****************************/
- .page {
- .blank {
- height : 1em;
+ .columnSplit {
+ visibility : hidden;
+ -webkit-column-break-after : always;
+ break-after : always;
+ -moz-column-break-after : always;
+ margin-top : 0;
+ & + * {
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;
+ }
+
+ /* 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;
+ mix-blend-mode : overlay;
+ opacity : 30%;
+ transform : rotate(-45deg);
+ z-index : 500;
+ p {
+ margin-bottom : none;
}
}
- //*****************************
- // * WIDE
- // *****************************/
- .page {
- .wide{
- column-span : all;
- display : block;
- margin-bottom : 1em;
- &+* {
- margin-top : 0;
- }
+ /* 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; }
+
+ /* Image Masks */
+
+ [class*="imageMask"] {
+ position : absolute;
+ height : 200%;
+ width : 200%;
+ left : 50%;
+ bottom : 50%;
+ --rotation : 0;
+ --revealer : none;
+ --checkerboard : none;
+ --scaleX : 1;
+ --scaleY : 1;
+ -webkit-mask-image : var(--wc), var(--revealer);
+ -webkit-mask-repeat : repeat-x;
+ -webkit-mask-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
+ -webkit-mask-position : 50% calc(50% - var(--offset));
+ mask-image : var(--wc);
+ mask-repeat : repeat-x;
+ mask-size : 50%;
+ mask-position : 50% calc(50% - var(--offset));
+ background-image : var(--checkerboard);
+ background-size : 20px;
+ z-index : -1;
+ transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
+ & > p:has(img) {
+ position : absolute;
+ width : 50%;
+ height : 50%;
+ bottom : 50%;
+ left : 50%;
+ transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
+ }
+ & img {
+ position : absolute;
+ display : block;
+ bottom : 0;
+ }
+ &.bottom {
+ --rotation : 0;
+ & img {bottom: 0;}
+ }
+ &.top {
+ --rotation : 180;
+ & img {top: 0;}
+ }
+ &.left {
+ --rotation : 90;
+ & img {left: 0;}
+ }
+ &.right {
+ --rotation : -90;
+ & img {right: 0;}
+ }
+ &.revealImage {
+ --revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2));
+ --checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image
+ }
+ }
+
+ .imageMaskEdge {
+ &1 { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
+ &2 { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
+ &3 { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
+ &4 { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
+ &5 { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
+ &6 { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
+ &7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
+ &8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
+ }
+
+ [class*="imageMaskCenter"] {
+ width : 100%;
+ height : 100%;
+ left : calc(var(--offsetX));
+ bottom : calc(var(--offsetY));
+ -webkit-mask-image : var(--wc), var(--revealer);
+ -webkit-mask-repeat : no-repeat;
+ -webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
+ -webkit-mask-position : 0% 0%;
+ mask-image : var(--wc), var(--revealer);
+ mask-repeat : no-repeat;
+ mask-size : 100% 100%; //Scale both dimensions to fit page size
+ mask-position : 50% 50%;
+ transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
+
+ & > p:has(img) {
+ position : absolute;
+ width : 100%;
+ height : 100%;
+ bottom : 0;
+ left : 0;
+ transform : unset;
+ transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
+ rotate(calc(-1deg * var(--rotation)))
+ translateX(calc(-1 * var(--offsetX)))
+ translateY(calc(1 * var(--offsetY)));
+ }
+ }
+
+ .imageMaskCenter {
+ &1 { --wc : url(/assets/waterColorMasks/center/0001.webp); }
+ &2 { --wc : url(/assets/waterColorMasks/center/0002.webp); }
+ &3 { --wc : url(/assets/waterColorMasks/center/0003.webp); }
+ &4 { --wc : url(/assets/waterColorMasks/center/0004.webp); }
+ &5 { --wc : url(/assets/waterColorMasks/center/0005.webp); }
+ &6 { --wc : url(/assets/waterColorMasks/center/0006.webp); }
+ &7 { --wc : url(/assets/waterColorMasks/center/0007.webp); }
+ &8 { --wc : url(/assets/waterColorMasks/center/0008.webp); }
+ &9 { --wc : url(/assets/waterColorMasks/center/0009.webp); }
+ &10 { --wc : url(/assets/waterColorMasks/center/0010.webp); }
+ &11 { --wc : url(/assets/waterColorMasks/center/0011.webp); }
+ &12 { --wc : url(/assets/waterColorMasks/center/0012.webp); }
+ &13 { --wc : url(/assets/waterColorMasks/center/0013.webp); }
+ &14 { --wc : url(/assets/waterColorMasks/center/0014.webp); }
+ &15 { --wc : url(/assets/waterColorMasks/center/0015.webp); }
+ &16 { --wc : url(/assets/waterColorMasks/center/0016.webp); }
+ &special { --wc : url(/assets/waterColorMasks/center/special.webp); }
+ }
+
+
+ [class*="imageMaskCorner"] {
+ height : 200%;
+ width : 200%;
+ left : calc(-50% + var(--offsetX));
+ bottom : calc(-50% + var(--offsetY));
+ -webkit-mask-image : var(--wc), var(--revealer);
+ -webkit-mask-repeat : no-repeat;
+ -webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
+ -webkit-mask-position : 50% 50%;
+ mask-image : var(--wc), var(--revealer);
+ mask-repeat : no-repeat;
+ mask-size : 100% 100%; //Scale both dimensions to fit page size
+ mask-position : 50% 50%;
+ transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
+ & > p:has(img) {
+ width : 50%;
+ height : 50%; //Complex transform below to handle mix of % and cm offsets
+ left : 25%;
+ bottom : 25%;
+ transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
+ rotate(calc(-1deg * var(--rotation)))
+ translateX(calc(-1 * var(--offsetX)))
+ translateY(calc(1 * var(--offsetY)));
+ }
+ }
+ .imageMaskCorner {
+ &1 { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
+ &2 { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
+ &3 { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
+ &4 { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
+ &5 { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
+ &6 { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
+ &7 { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
+ &8 { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
+ &9 { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
+ &10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
+ &11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
+ &12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
+ &13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
+ &14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
+ &15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
+ &16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
+ &17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
+ &18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
+ &19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
+ &20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
+ &21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
+ &22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
+ &23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
+ &24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
+ &25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
+ &26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
+ &27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
+ &28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
+ &29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
+ &30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
+ &31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
+ &32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
+ &33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
+ &34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
+ &35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
+ &36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
+ &37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); }
+ }
+}
+
+//*****************************
+// * DEFINITION LISTS
+// *****************************/
+.page {
+ dl {
+ padding-left : 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;
}
}
}
diff --git a/themes/V3/Journal/style.less b/themes/V3/Journal/style.less
index f3b70cec2..2e2ada5c8 100644
--- a/themes/V3/Journal/style.less
+++ b/themes/V3/Journal/style.less
@@ -1,561 +1,559 @@
-@layer V3_Journal {
- @import (less) './themes/fonts/Journal/fonts.less';
- @import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/Journal/fonts.less';
+@import (less) './themes/assets/assets.less';
- :root {
- //Colors
- --HB_Color_Background : unset; // Light parchment
- --HB_Color_Text : #412121; // Dark Maroon Brown
- --HB_Color_Text2 : #261C13CC; //Dark Brown
- --HB_Color_HeaderText : #58180D; // Dark Maroon
- --HB_Color_CaptionText : #766649; // Brown
- --HB_Color_WatercolorStain : #BBAD82; // Light brown
- }
+:root {
+ //Colors
+ --HB_Color_Background : unset; // Light parchment
+ --HB_Color_Text : #412121; // Dark Maroon Brown
+ --HB_Color_Text2 : #261C13CC; //Dark Brown
+ --HB_Color_HeaderText : #58180D; // Dark Maroon
+ --HB_Color_CaptionText : #766649; // Brown
+ --HB_Color_WatercolorStain : #BBAD82; // Light brown
+}
- .useSansSerif(){
- font-family : PermanentMarker;
- font-size : 0.3cm;
+.useSansSerif(){
+ font-family : PermanentMarker;
+ font-size : 0.3cm;
+ line-height : 1.2em;
+ color : var(--HB_Color_Text2);
+ p,dl,ul,ol {
line-height : 1.2em;
- color : var(--HB_Color_Text2);
- p,dl,ul,ol {
- line-height : 1.2em;
- }
- ul, ol {
- padding-left : 1em;
- }
- em{
- font-style : italic;
- }
- strong{
- font-weight : 800;
- font-size : 1.1em;
- }
- h5 + * {
- margin-top : 0.1cm;
- }
}
- .useColumns(@multiplier : 1, @fillMode: balance){
- column-gap : 0.5cm;
+ ul, ol {
+ padding-left : 1em;
+ }
+ em{
+ font-style : italic;
+ }
+ strong{
+ font-weight : 800;
+ font-size : 1.1em;
+ }
+ h5 + * {
+ margin-top : 0.1cm;
+ }
+}
+.useColumns(@multiplier : 1, @fillMode: balance){
+ column-gap : 0.5cm;
+}
+
+.page{
+ background-size : 200% 100%;
+ background-repeat : no-repeat;
+ filter : drop-shadow(1px 4px 14px black);
+ background-image : url(/assets/Journal/Background1.webp);
+ padding : 2.1cm 1.9cm 1.7cm 3.8cm;
+ &:nth-of-type(2n + 1) {
+ background-position : left;
+ }
+ &:nth-of-type(2n) {
+ background-position : right;
+ padding : 2.1cm 3.9cm 1.7cm 1.8cm;
+ }
+ &:nth-of-type(2) {
+ background-image : url(/assets/Journal/Background2.webp); //Only first page should show ribbon
}
- .page{
- background-size : 200% 100%;
- background-repeat : no-repeat;
- filter : drop-shadow(1px 4px 14px black);
- background-image : url(/assets/Journal/Background1.webp);
- padding : 2.1cm 1.9cm 1.7cm 3.8cm;
- &:nth-of-type(2n + 1) {
- background-position : left;
+ & .columnWrapper {
+ //transform: rotate(-0.5deg); // Breaks absolute positioning of images/footers. Wait for Chrome fix
+ }
+}
+
+ //*****************************
+ // * BASE
+ // *****************************/
+.page{
+ color : var(--HB_Color_Text);
+ font-family : ReenieBeanie;
+ font-size : 0.53cm;
+ line-height : 0.8em;
+ p + * {
+ margin-top : 0.325cm;
+ }
+ p + p{
+ margin-top : 0;
+ }
+ ul{
+ margin-bottom : 0.8em;
+ }
+ ol{
+ margin-bottom : 0.8em;
+ }
+ em{
+ text-decoration : underline;
+ font-style : unset;
+ }
+ del{
+ text-decoration-style: double;
+ }
+
+ //Indents after p or lists
+ p+p, ul+p, ol+p{
+ text-indent : 1em;
+ }
+ //*****************************
+ // * HEADERS
+ // *****************************/
+ h1,h2,h3,h4,h5{
+ font-family : FrederickaTheGreat;
+ font-weight : unset;
+ color : var(--HB_Color_HeaderText);
+ }
+ h1{
+ margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE
+ font-size : 0.89cm;
+ line-height : 1em;
+ font-variant : small-caps;
+ &+p::first-letter{
+ float : left;
+ font-family : FrederickaTheGreat;
+ line-height : 1em;
+ font-size : 1.9em;
+ padding-left : 40px; //Allow background color to extend into margins
+ margin-top : -0.3cm;
+ margin-bottom : -20px;
+ margin-left : -40px;
+ margin-right : 0.1em;
+ padding-top : 0.3em;
+ padding-bottom : 2px;
}
+ &+p::first-line{
+ font-variant : small-caps;
+ }
+ }
+ h2{
+ font-size : 0.62cm;
+ line-height : 0.988em; //Font is misaligned. Shift up slightly
+ }
+ h3{
+ font-size : 0.575cm;
+ line-height : 0.995em; //Font is misaligned. Shift up slightly
+ margin-left : -0.9em;
+ }
+ h4{
+ font-size : 0.55cm;
+ line-height : 0.971em; //Font is misaligned. Shift up slightly
+ color : var(--HB_Color_Text);
+ padding-bottom : 5px;
+ transform:rotate(0deg);
&:nth-of-type(2n) {
- background-position : right;
- padding : 2.1cm 3.9cm 1.7cm 1.8cm;
+ transform:rotate(1deg);
}
- &:nth-of-type(2) {
- background-image : url(/assets/Journal/Background2.webp); //Only first page should show ribbon
- }
-
- & .columnWrapper {
- //transform: rotate(-0.5deg); // Breaks absolute positioning of images/footers. Wait for Chrome fix
+ &:nth-of-type(3n) {
+ transform:rotate(-1.5deg);
}
}
-
- //*****************************
- // * BASE
- // *****************************/
- .page{
- color : var(--HB_Color_Text);
- font-family : ReenieBeanie;
- font-size : 0.53cm;
- line-height : 0.8em;
- p + * {
- margin-top : 0.325cm;
- }
- p + p{
- margin-top : 0;
- }
- ul{
- margin-bottom : 0.8em;
- }
- ol{
- margin-bottom : 0.8em;
- }
- em{
- text-decoration : underline;
- font-style : unset;
- }
- del{
- text-decoration-style: double;
- }
-
- //Indents after p or lists
- p+p, ul+p, ol+p{
- text-indent : 1em;
- }
- //*****************************
- // * HEADERS
- // *****************************/
- h1,h2,h3,h4,h5{
- font-family : FrederickaTheGreat;
- font-weight : unset;
- color : var(--HB_Color_HeaderText);
- }
- h1{
- margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE
- font-size : 0.89cm;
- line-height : 1em;
- font-variant : small-caps;
- &+p::first-letter{
- float : left;
- font-family : FrederickaTheGreat;
- line-height : 1em;
- font-size : 1.9em;
- padding-left : 40px; //Allow background color to extend into margins
- margin-top : -0.3cm;
- margin-bottom : -20px;
- margin-left : -40px;
- margin-right : 0.1em;
- padding-top : 0.3em;
- padding-bottom : 2px;
- }
- &+p::first-line{
- font-variant : small-caps;
- }
- }
- h2{
- font-size : 0.62cm;
- line-height : 0.988em; //Font is misaligned. Shift up slightly
- }
- h3{
- font-size : 0.575cm;
- line-height : 0.995em; //Font is misaligned. Shift up slightly
- margin-left : -0.9em;
- }
- h4{
- font-size : 0.55cm;
- line-height : 0.971em; //Font is misaligned. Shift up slightly
- color : var(--HB_Color_Text);
- padding-bottom : 5px;
- transform:rotate(0deg);
- &:nth-of-type(2n) {
- transform:rotate(1deg);
- }
- &:nth-of-type(3n) {
- transform:rotate(-1.5deg);
- }
- }
- h5{
- font-family : PermanentMarker;
- font-size : 0.4cm;
- color : var(--HB_Color_Text2);
- font-weight : bold;
- line-height : 0.951em; //Font is misaligned. Shift up slightly
- & + * {
- margin-top : 0.2cm;
- }
- }
- //*****************************
- // * TABLE
- // *****************************/
- table{
- .useSansSerif();
- & + * {
- margin-top : 0.325cm;
- }
- thead{
- th{
- vertical-align : bottom;
- padding : 0.14em 0;
- }
- }
- tbody{
- tr{
- td{
- padding : 0.14em 0;
- }
- &:nth-child(odd){
- background-image : linear-gradient(to left, #41212100, #41212122, #41212100);
- }
- }
- }
- }
- //*****************************
- // * NOTE
- // *****************************/
- .note{
- .useSansSerif();
- border-style : solid;
- border-width : 1px;
- border-image-source : url(/assets/Journal/Border1.png);
- border-image-slice : 18 18 18 18;
- border-image-width : 6px 6px 6px 6px;
- border-image-outset : 5px 5px 5px 5px;
- border-image-repeat : stretch stretch;
- background-image : url(/assets/Journal/HashMarks.png),
- linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
- background-size : 120% 120%;
- background-repeat : no-repeat;
- background-position : center;
- padding : 0.2cm;
- :where(&) {
- margin-top : 9px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.45cm;
- }
- h5 {
- font-size : 0.375cm;
- }
- p{
- padding-bottom : 0px;
- }
- :last-child {
- margin-bottom : 0;
- }
- }
- //************************************
- // * DESCRIPTIVE TEXT BOX
- // ************************************/
- * + .descriptive {
- margin-top : 0.6cm;
- }
- .descriptive{
- .useSansSerif();
- border-style : solid;
- border-width : 1px;
- border-image-source : url('/assets/Journal/Border2.png');
- border-image-slice : 48 48 48 48;
- border-image-width : 20px;
- border-image-outset : 16px 20px 16px 20px;
- border-image-repeat : stretch stretch;
- background-image : url(/assets/Journal/HashMarks.png),
- linear-gradient(to bottom right, #ff000000, #41212114, #41212100);
- background-size : 120% 120%;
- background-repeat : no-repeat;
- background-position : center;
- padding : 0.2cm;
- :where(&) {
- margin-top : 4px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.45cm;
- }
- h5 {
- font-size : 0.375cm;
- }
- p{
- padding-bottom : 0px;
- }
- :last-child {
- margin-bottom : 0;
- }
- }
- //*****************************
- // * Images Snippets
- // *****************************/
-
- /* Arist Credit */
- .artist {
- position : absolute;
- width : auto;
- text-align : center;
- font-family : WalterTurncoat;
- font-size : 0.27cm;
- color : var(--HB_Color_CaptionText);
- p, p + p {
- margin : unset;
- text-indent : unset;
- line-height : 1em;
- }
- h5 {
- font-size : 1.3em;
- font-family : WalterTurncoat;
- }
- a{
- color : inherit;
- text-decoration : unset;
- &:hover {
- text-decoration : underline;
- }
- }
- }
-
- //*****************************
- // * MONSTER STAT BLOCK
- // *****************************/
- .monster {
- .useSansSerif();
- &.frame {
- border-style : solid;
- border-width : 7px 6px;
- border-image-source : url('/assets/Journal/Border3.png');
- border-image-slice : 63 74 63 74;
- border-image-width : 15px 20px 15px 20px;
- border-image-outset : 12px 12px 12px 12px;
- border-image-repeat : stretch round;
- background-image : url('/assets/Journal/HashMarks.png'),
- linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
- background-blend-mode : screen multiply;
- background-size : 100%;
- padding : 0.2cm;
- }
-
- color: var(--HB_Color_Text);
- position : relative;
- padding : 0px;
- margin-bottom : 0.325cm;
-
- //Headers
- h2{
- font-size : 0.62cm;
- line-height : 1em;
- margin : 0;
- &+p {
- margin-bottom : 0; //Monster size and type subtext
- }
- }
- h3{
- margin-left : 0;
- font-variant : small-caps;
- padding-bottom : 0.05cm;
- }
- hr{
- visibility : visible;
- height : 6px;
- margin : 0.12cm 0cm;
- background-image : url('/assets/Journal/HorizontalRule.png');
- background-size : 100% 100%;
- }
- hr:last-of-type + * {
- margin-top : 0.325cm; // Space after last HR
- }
-
- // Monster Ability table
- hr + table:first-of-type{
- margin : 0;
- column-span : none;
- background-image : none;
- border-style : none;
- border-image : none;
- color : inherit;
- tr {
- background-image : none;
- }
- td,th {
- padding: 0px;
- }
- }
-
- :last-child {
- margin-bottom : 0;
- }
-
- strong, em {
- font-style : normal;
- text-decoration : none;
- }
- }
-
- //Full Width
- .monster.wide{
- .useColumns(0.96, @fillMode: balance);
- }
-
- //*****************************
- // * FOOTER
- // *****************************/
- &:nth-child(odd){
- .pageNumber{
- left : 3cm;
- }
- .footnote{
- left : 4.5cm;
- text-align : left;
- }
- }
- .pageNumber{
- font-family : FrederickaTheGreat;
- position : absolute;
- right : 3cm;
- bottom : 1.25cm;
- width : 50px;
- font-size : 0.9em;
- color : var(--HB_Color_HeaderText);
- text-align : center;
- text-indent : 0;
- &.auto::after {
- content : counter(phb-page-numbers);
- }
- }
- .footnote{
- position : absolute;
- right : 4.5cm;
- bottom : 1.25cm;
- z-index : 150;
- width : 200px;
- font-size : 0.8em;
- color : var(--HB_Color_HeaderText);
- text-align : right;
- }
- //************************************
- // * CODE BLOCKS
- // ************************************/
- code{
- font-size : 0.3cm;
- padding : 0px 4px;
- color : var(--HB_Color_Text);
- vertical-align : middle;
- background-color : #faf7ea;
- border-radius : 4px;
- }
-
- pre code{
- border-style : solid;
- border-width : 1px;
- border-image : @codeBorderImage 26 stretch;
- border-image-width : 10px;
- border-image-outset : 2px;
- border-radius : 12px;
- margin-bottom : 2px;
- padding : 0.15cm;
- .page :where(&) {
- margin-top : 2px; //Prevent top border getting cut off on colbreak
- }
- & + * {
- margin-top : 0.325cm;
- }
- }
- //*****************************
- // * EXTRAS
- // *****************************/
- hr{
- visibility : hidden;
- border : none;
- margin : 0px;
- }
- //Text indent right after table
- table+p{
- text-indent : 1em;
- }
- a, a:visited, a:hover {
- color: var(--HB_Color_Text);
- transition:all 1s ease;
- }
- a:hover {
- color:red;
- }
- }
- //*****************************
- // * SPELL LIST
- // *****************************/
-
- .page .spellList{
- .useSansSerif();
- font-family : PermanentMarker;
- column-count : 2;
- ul+h5{
- margin-top : 15px;
- }
- 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{
- column-count : 4;
- }
- }
-
- //*****************************
- // * CLASS TABLE
- // *****************************/
- .page .classTable{
- th[colspan]:not([rowspan]) {
- white-space : nowrap;
- }
- h5 + table{
+ h5{
+ font-family : PermanentMarker;
+ font-size : 0.4cm;
+ color : var(--HB_Color_Text2);
+ font-weight : bold;
+ line-height : 0.951em; //Font is misaligned. Shift up slightly
+ & + * {
margin-top : 0.2cm;
}
}
//*****************************
- // * TABLE OF CONTENTS
+ // * TABLE
// *****************************/
- .page .toc{
- -webkit-column-break-inside : avoid;
- page-break-inside : avoid;
- break-inside : avoid;
- h1 {
- text-align : center;
- margin-bottom : 0.3cm;
+ table{
+ .useSansSerif();
+ & + * {
+ margin-top : 0.325cm;
+ }
+ thead{
+ th{
+ vertical-align : bottom;
+ padding : 0.14em 0;
+ }
+ }
+ tbody{
+ tr{
+ td{
+ padding : 0.14em 0;
+ }
+ &:nth-child(odd){
+ background-image : linear-gradient(to left, #41212100, #41212122, #41212100);
+ }
+ }
+ }
+ }
+ //*****************************
+ // * NOTE
+ // *****************************/
+ .note{
+ .useSansSerif();
+ border-style : solid;
+ border-width : 1px;
+ border-image-source : url(/assets/Journal/Border1.png);
+ border-image-slice : 18 18 18 18;
+ border-image-width : 6px 6px 6px 6px;
+ border-image-outset : 5px 5px 5px 5px;
+ border-image-repeat : stretch stretch;
+ background-image : url(/assets/Journal/HashMarks.png),
+ linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
+ background-size : 120% 120%;
+ background-repeat : no-repeat;
+ background-position : center;
+ padding : 0.2cm;
+ :where(&) {
+ margin-top : 9px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.45cm;
+ }
+ h5 {
+ font-size : 0.375cm;
+ }
+ p{
+ padding-bottom : 0px;
+ }
+ :last-child {
+ margin-bottom : 0;
+ }
+ }
+ //************************************
+ // * DESCRIPTIVE TEXT BOX
+ // ************************************/
+ * + .descriptive {
+ margin-top : 0.6cm;
+ }
+ .descriptive{
+ .useSansSerif();
+ border-style : solid;
+ border-width : 1px;
+ border-image-source : url('/assets/Journal/Border2.png');
+ border-image-slice : 48 48 48 48;
+ border-image-width : 20px;
+ border-image-outset : 16px 20px 16px 20px;
+ border-image-repeat : stretch stretch;
+ background-image : url(/assets/Journal/HashMarks.png),
+ linear-gradient(to bottom right, #ff000000, #41212114, #41212100);
+ background-size : 120% 120%;
+ background-repeat : no-repeat;
+ background-position : center;
+ padding : 0.2cm;
+ :where(&) {
+ margin-top : 4px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.45cm;
+ }
+ h5 {
+ font-size : 0.375cm;
+ }
+ p{
+ padding-bottom : 0px;
+ }
+ :last-child {
+ margin-bottom : 0;
+ }
+ }
+ //*****************************
+ // * Images Snippets
+ // *****************************/
+
+ /* Arist Credit */
+ .artist {
+ position : absolute;
+ width : auto;
+ text-align : center;
+ font-family : WalterTurncoat;
+ font-size : 0.27cm;
+ color : var(--HB_Color_CaptionText);
+ p, p + p {
+ margin : unset;
+ text-indent : unset;
+ line-height : 1em;
+ }
+ h5 {
+ font-size : 1.3em;
+ font-family : WalterTurncoat;
}
a{
- display : inline;
color : inherit;
- text-decoration : none;
- &:hover{
+ text-decoration : unset;
+ &:hover {
text-decoration : underline;
}
}
- h4 {
- margin-top : 0.2cm;
- line-height : 0.4cm;
- & + ul li {
- line-height: 1.2em;
- }
- }
- ul{
- padding-left : 0;
- list-style-type : none;
- li + li h3 {
- margin-top : 0.26cm;
- line-height : 1em
- }
- h3 span:first-child::after {
- border : none;
- }
- span {
- display : table-cell;
- &:first-child {
- position : relative;
- overflow : hidden;
- &::after {
- content : "";
- position : absolute;
- bottom : 0.08cm;
- margin-left : 0.06cm; /* Spacing before dot leaders */
- width : 100%;
- border-bottom : 0.05cm dotted #000;
- }
- }
- &:last-child {
- font-family : ReenieBeanie;
- font-size : 0.34cm;
- font-weight : normal;
- color : black;
- text-align : right;
- vertical-align : bottom; /* Keep page number bottom-aligned */
- width : 1%;
- padding-left : 0.06cm; /* Spacing after dot leaders */
- /*white-space : nowrap; /* Uncomment if needed */
- }
- }
- ul { /*List indent*/
- margin-left : 1em;
- }
- }
- &.wide{
- .useColumns(0.96, @fillMode: balance);
- }
}
//*****************************
- // * WIDE
+ // * MONSTER STAT BLOCK
// *****************************/
- .page .wide {
- margin-bottom : 0.45cm;
+ .monster {
+ .useSansSerif();
+ &.frame {
+ border-style : solid;
+ border-width : 7px 6px;
+ border-image-source : url('/assets/Journal/Border3.png');
+ border-image-slice : 63 74 63 74;
+ border-image-width : 15px 20px 15px 20px;
+ border-image-outset : 12px 12px 12px 12px;
+ border-image-repeat : stretch round;
+ background-image : url('/assets/Journal/HashMarks.png'),
+ linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
+ background-blend-mode : screen multiply;
+ background-size : 100%;
+ padding : 0.2cm;
+ }
+
+ color: var(--HB_Color_Text);
+ position : relative;
+ padding : 0px;
+ margin-bottom : 0.325cm;
+
+ //Headers
+ h2{
+ font-size : 0.62cm;
+ line-height : 1em;
+ margin : 0;
+ &+p {
+ margin-bottom : 0; //Monster size and type subtext
+ }
+ }
+ h3{
+ margin-left : 0;
+ font-variant : small-caps;
+ padding-bottom : 0.05cm;
+ }
+ hr{
+ visibility : visible;
+ height : 6px;
+ margin : 0.12cm 0cm;
+ background-image : url('/assets/Journal/HorizontalRule.png');
+ background-size : 100% 100%;
+ }
+ hr:last-of-type + * {
+ margin-top : 0.325cm; // Space after last HR
+ }
+
+ // Monster Ability table
+ hr + table:first-of-type{
+ margin : 0;
+ column-span : none;
+ background-image : none;
+ border-style : none;
+ border-image : none;
+ color : inherit;
+ tr {
+ background-image : none;
+ }
+ td,th {
+ padding: 0px;
+ }
+ }
+
+ :last-child {
+ margin-bottom : 0;
+ }
+
+ strong, em {
+ font-style : normal;
+ text-decoration : none;
+ }
+ }
+
+ //Full Width
+ .monster.wide{
+ .useColumns(0.96, @fillMode: balance);
+ }
+
+ //*****************************
+ // * FOOTER
+ // *****************************/
+ &:nth-child(odd){
+ .pageNumber{
+ left : 3cm;
+ }
+ .footnote{
+ left : 4.5cm;
+ text-align : left;
+ }
+ }
+ .pageNumber{
+ font-family : FrederickaTheGreat;
+ position : absolute;
+ right : 3cm;
+ bottom : 1.25cm;
+ width : 50px;
+ font-size : 0.9em;
+ color : var(--HB_Color_HeaderText);
+ text-align : center;
+ text-indent : 0;
+ &.auto::after {
+ content : counter(phb-page-numbers);
+ }
+ }
+ .footnote{
+ position : absolute;
+ right : 4.5cm;
+ bottom : 1.25cm;
+ z-index : 150;
+ width : 200px;
+ font-size : 0.8em;
+ color : var(--HB_Color_HeaderText);
+ text-align : right;
+ }
+ //************************************
+ // * CODE BLOCKS
+ // ************************************/
+ code{
+ font-size : 0.3cm;
+ padding : 0px 4px;
+ color : var(--HB_Color_Text);
+ vertical-align : middle;
+ background-color : #faf7ea;
+ border-radius : 4px;
+ }
+
+ pre code{
+ border-style : solid;
+ border-width : 1px;
+ border-image : @codeBorderImage 26 stretch;
+ border-image-width : 10px;
+ border-image-outset : 2px;
+ border-radius : 12px;
+ margin-bottom : 2px;
+ padding : 0.15cm;
+ .page :where(&) {
+ margin-top : 2px; //Prevent top border getting cut off on colbreak
+ }
+ & + * {
+ margin-top : 0.325cm;
+ }
+ }
+ //*****************************
+ // * EXTRAS
+ // *****************************/
+ hr{
+ visibility : hidden;
+ border : none;
+ margin : 0px;
+ }
+ //Text indent right after table
+ table+p{
+ text-indent : 1em;
+ }
+ a, a:visited, a:hover {
+ color: var(--HB_Color_Text);
+ transition:all 1s ease;
+ }
+ a:hover {
+ color:red;
}
}
+//*****************************
+// * SPELL LIST
+// *****************************/
+
+.page .spellList{
+ .useSansSerif();
+ font-family : PermanentMarker;
+ column-count : 2;
+ ul+h5{
+ margin-top : 15px;
+ }
+ 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{
+ column-count : 4;
+ }
+}
+
+//*****************************
+// * CLASS TABLE
+// *****************************/
+.page .classTable{
+ th[colspan]:not([rowspan]) {
+ white-space : nowrap;
+ }
+ h5 + table{
+ margin-top : 0.2cm;
+ }
+}
+//*****************************
+// * TABLE OF CONTENTS
+// *****************************/
+.page .toc{
+ -webkit-column-break-inside : avoid;
+ page-break-inside : avoid;
+ break-inside : avoid;
+ h1 {
+ text-align : center;
+ margin-bottom : 0.3cm;
+ }
+ 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;
+ list-style-type : none;
+ li + li h3 {
+ margin-top : 0.26cm;
+ line-height : 1em
+ }
+ h3 span:first-child::after {
+ border : none;
+ }
+ span {
+ display : table-cell;
+ &:first-child {
+ position : relative;
+ overflow : hidden;
+ &::after {
+ content : "";
+ position : absolute;
+ bottom : 0.08cm;
+ margin-left : 0.06cm; /* Spacing before dot leaders */
+ width : 100%;
+ border-bottom : 0.05cm dotted #000;
+ }
+ }
+ &:last-child {
+ font-family : ReenieBeanie;
+ font-size : 0.34cm;
+ font-weight : normal;
+ color : black;
+ text-align : right;
+ vertical-align : bottom; /* Keep page number bottom-aligned */
+ width : 1%;
+ padding-left : 0.06cm; /* Spacing after dot leaders */
+ /*white-space : nowrap; /* Uncomment if needed */
+ }
+ }
+ ul { /*List indent*/
+ margin-left : 1em;
+ }
+ }
+ &.wide{
+ .useColumns(0.96, @fillMode: balance);
+ }
+}
+
+//*****************************
+// * WIDE
+// *****************************/
+.page .wide {
+ margin-bottom : 0.45cm;
+}
diff --git a/themes/assets/assets.less b/themes/assets/assets.less
index 7df5db0f6..0547e8c70 100644
--- a/themes/assets/assets.less
+++ b/themes/assets/assets.less
@@ -10,6 +10,13 @@
@monsterBorderImage : url('/assets/monsterBorderFancy.png');
@codeBorderImage : url('/assets/codeBorder.png');
@classTableDecoration : url('/assets/classTableDecoration.png');
+@naturalCritLogo : url('/assets/naturalCritLogo.svg');
+@coverPageBanner : url('/assets/coverPageBanner.svg');
+@horizontalRule : url('/assets/horizontalRule.svg');
+@partCoverHeaderPHB : url('/assets/partCoverHeaderPHB.png');
+@partCoverHeaderDMG : url('/assets/partCoverHeaderDMG.svg');
+@insideCoverMask : url('/assets/insideCoverMask.png');
+@scriptBorder : url('/assets/scriptBorder.png');
// Watercolor Images
@watercolor1 : url('/assets/watercolor/watercolor1.png');
diff --git a/themes/assets/coverPageBanner.svg b/themes/assets/coverPageBanner.svg
new file mode 100644
index 000000000..8e7c4acc2
--- /dev/null
+++ b/themes/assets/coverPageBanner.svg
@@ -0,0 +1 @@
+Asset 2 Asset 2 NaturalCritLogo Asset 2 
- : 
- }
+ 
{this.state.confirmGoogleTransfer &&
