- This brew is currently in your Trash folder on Google Drive!
If you want to keep it, make sure to move it before it is deleted permanently!
-
- }
-
If you want to keep it, make sure to move it before it is deleted permanently!
-
- OK
-
-
+ return `);
+ });
+
+ 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 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('');
+ });
+
+ 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('
`);
+ });
+
+ // it('renders a list with with a style injected into the
{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/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(`text
{{}}
`); + }); + + 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(`Sample text.
Sample text.
Sample text.
Sample text.
Sample text.
Sample text.
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
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('text
text
text
text
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 |
- 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
-
+ // });
+
+ 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/V3/5ePHB/snippets.js b/themes/V3/5ePHB/snippets.js index 0a9005ddf..56ce0628c 100644 --- a/themes/V3/5ePHB/snippets.js +++ b/themes/V3/5ePHB/snippets.js @@ -3,7 +3,7 @@ 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 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'); @@ -171,9 +171,15 @@ module.exports = [ gen : MonsterBlockGen.monster('monster,frame,wide', 4), }, { - name : 'Cover Page', + name : 'Front Cover Page', icon : 'fac book-front-cover', - gen : CoverPageGen, + gen : CoverPageGen.front, + experimental : true + }, + { + name : 'Inside Cover Page', + icon : 'fac book-inside-cover', + gen : CoverPageGen.inside, experimental : true }, { diff --git a/themes/V3/5ePHB/snippets/coverpage.gen.js b/themes/V3/5ePHB/snippets/coverpage.gen.js index 5351f5db5..7f9d0cd2a 100644 --- a/themes/V3/5ePHB/snippets/coverpage.gen.js +++ b/themes/V3/5ePHB/snippets/coverpage.gen.js @@ -13,7 +13,7 @@ const titles = [ 'The Living Dead Above the Fearful Cage', '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', + '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', @@ -23,7 +23,7 @@ const titles = [ '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', 'White Greatness III', + 'Vyse\'s Skies', 'Blue Greatness III', 'Yellow Divinity', 'Zidane\'s Ghost' ]; @@ -68,23 +68,43 @@ const footnote = [ 'In an amazing kingdom, in an age of sorcery and lost souls, eight space pirates quest for freedom.' ]; -module.exports = ()=>{ - return dedent` - {{coverPage }} +module.exports = { - {{logo }} + front : function() { + return dedent` + {{frontCover}} - # ${_.sample(titles)} - ## ${_.sample(subtitles)} - __________ + {{logo }} - {{banner HOMEBREW}} + # ${_.sample(titles)} + ## ${_.sample(subtitles)} + ___ - {{footnote - ${_.sample(footnote)} - }} + {{banner HOMEBREW}} -  + {{footnote + ${_.sample(footnote)} + }} - \page`; + {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 + {height:100%} + }} + + {{logo }} + + \page`; + } }; diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index ebb677b72..e3c09780f 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -1,739 +1,827 @@ -@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; + line-height : 1.2em; + p,dl,ul,ol { + line-height : 1.2em; } - - @page { - margin: 0; + ul, ol { + padding-left : 1em; } - - body { - counter-reset: phb-page-numbers; + em{ + font-style : italic; } - - * { - -webkit-print-color-adjust: exact; + strong{ + font-weight : 800; + letter-spacing : -0.02em; } - - .useSansSerif() { - font-family: ScalySansRemake; - font-size: 0.318cm; - line-height: 1.2em; - - p, - dl, - ul, - ol { - line-height: 1.2em; - } - - ul, - ol { - padding-left: 1em; - } - - em { - font-style: italic; - } - - strong { - font-weight: 800; - letter-spacing: -0.02em; - } - - h5+* { - margin-top: 0.1cm; - } + 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; - } - +} +.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; - } - - &+p { - margin-top: 0; +.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 } } - - 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; + 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); + } } } - - 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 + } + //***************************** + // * 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 } - - 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; - } + & + * { + margin-top : 0.45cm; } - - *+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; - } + font-size : 0.375cm; } - - //***************************** - // * 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); - } - } - } + 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 + // *****************************/ - //***************************** - // * 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 + /* 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; } - - &+* { - 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; - } - - //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; } } + /* 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; + } + //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 +// *****************************/ +.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) { @@ -791,394 +879,160 @@ } } - - //***************************** - // * 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; +//***************************** +// * 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); + } +} +} - //***************************** - // * CLASS TABLE - // *****************************/ - .page .classTable { - th[colspan]:not([rowspan]) { - white-space: nowrap; +//***************************** +// * 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 { - 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-outset: .45cm .35cm .4cm .4cm; 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; + border-image-slice: 170; + border-image-source: @scriptBorder; + border-image-width: 1.4cm; } } - - //***************************** - // * COVER PAGE - // *****************************/ - .page:has(.coverPage) { - columns: 1; - text-align: center; - - &:after { - all: unset; - } - - .logo { - position: absolute; - top: 0.5cm; - left: 0; - right: 0; - filter: drop-shadow(0 0 0.075cm black); - - img { - height: 2cm; - width: 100%; - } - } - - .columnWrapper>p img { - position: absolute; - bottom: 0; - left: 0; - height: 100%; - min-width: 100%; - z-index: -1; - } - - 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; - display: block; - 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; - } - } - - - //***************************** - // * 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; - } - } - } -} \ No newline at end of file +} diff --git a/themes/V3/Blank/snippets/imageMask.gen.js b/themes/V3/Blank/snippets/imageMask.gen.js index 5ddef7a2a..323f89a1f 100644 --- a/themes/V3/Blank/snippets/imageMask.gen.js +++ b/themes/V3/Blank/snippets/imageMask.gen.js @@ -2,9 +2,9 @@ const _ = require('lodash'); const dedent = require('dedent-tabs').default; module.exports = { - center :()=>{ + center : ()=>{ return dedent` - {{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0; + {{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0 {height:100%} }}outer text
inner text
- ? Currently injects into last