From 3f3aa6edd14322a20aae6a693de9977ae3cc207b Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 7 Sep 2021 00:21:45 -0400 Subject: [PATCH 1/7] Remove Old Styles --- themes/5ePhb.style.less | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index e17a9038e..f8dcaef08 100644 --- a/themes/5ePhb.style.less +++ b/themes/5ePhb.style.less @@ -537,13 +537,6 @@ body { 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; - } .columnSplit { visibility : hidden; -webkit-column-break-after : always; @@ -561,10 +554,6 @@ body { 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; From 57df6aa32177a2e89ae45e1852b01143c758450a Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 7 Sep 2021 15:43:52 -0400 Subject: [PATCH 2/7] Clarify in Intro that Legacy cannot directly transfer to V3 --- client/homebrew/pages/homePage/welcome_msg_v3.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/pages/homePage/welcome_msg_v3.md b/client/homebrew/pages/homePage/welcome_msg_v3.md index 553d7aa2e..a0be467ed 100644 --- a/client/homebrew/pages/homePage/welcome_msg_v3.md +++ b/client/homebrew/pages/homePage/welcome_msg_v3.md @@ -47,7 +47,7 @@ If you want to save ink or have a monochrome printer, add the {{fas,fa-tint}} ** ## New in V3.0.0 With the latest major update to *The Homebrewery* we've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like `div` and `span` in most cases. No raw HTML tags should be needed in a brew, and going forward, raw HTML will no longer receive debugging support (*but can still be used if you insist*). -All brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew. Much of the syntax and styling has changed in V3, so code in one version may be broken in the other. +Much of the syntax and styling has changed in V3. Code in one version may be broken in the other, and updating an older brew to V3 will require more than just a copy and paste. *However*, all brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "Legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew at any time. Scroll down to the next page for a brief summary of the changes and new features available in V3! From 7a44e37970fc4f3a89f6c1b6b78b92266f166609 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 7 Sep 2021 23:52:38 -0400 Subject: [PATCH 3/7] Fix "block"s to be inline-block, width 100% * Use border-image-width to allow border to encroach into text area without using ::before element for the border. * Rearrange things so .wide is last; makes sure wide is always displayed as `block` with priority over mustache divs default `inline-block` * Fix main page column-gap * adjust font size inside .note and .descriptive --- themes/5ePhb.style.less | 96 +++++++++++++++++++---------------------- 1 file changed, 45 insertions(+), 51 deletions(-) diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index f8dcaef08..58880c5a9 100644 --- a/themes/5ePhb.style.less +++ b/themes/5ePhb.style.less @@ -19,7 +19,7 @@ body { } .useSansSerif(){ font-family : ScalySansRemake; - font-size : 0.325cm; + font-size : 0.318cm; line-height : 1.2em; p,dl,ul,ol { line-height : 1.2em; @@ -51,6 +51,7 @@ body { max-height : 100%; column-span : all; columns : inherit; + column-gap : inherit; } .page{ .useColumns(); @@ -209,29 +210,21 @@ body { // * NOTE // *****************************/ .note{ - &::before{ - content : ""; - box-sizing : border-box; - border-style : solid; - border-width : 11px; - border-image : @noteBorderImage 12; - border-image-outset : 9px 0px; - position : absolute; - width : 100%; - height : 100%; - top : 0; - left : 0; - } .useSansSerif(); - position : relative; - margin-top : 1.3em; - margin-left : -0.1em; - margin-right : -0.1em; background-color : @noteGreen; + border-style : solid; + border-width : 1px; + border-image : @noteBorderImage 12 stretch; + border-image-outset : 9px 0px; + border-image-width : 11px; + margin-top : 9px; //Prevent top border getting cut off on colbreak + padding : 0.13cm 0.16cm; filter : drop-shadow(1px 4px 6px #888); - padding : 0.5em 0.6em; & + * { - margin-top : 1.3em; + margin-top : 0.45cm; + } + h5 { + font-size : 0.375cm; } p{ display : block; @@ -241,7 +234,7 @@ body { padding-top : .8em; } :last-child { - margin-bottom : 0em; + margin-bottom : 0; } } //************************************ @@ -249,18 +242,19 @@ body { // ************************************/ .descriptive{ .useSansSerif(); - display : inline-block; - margin-top : 1.4em; background-color : #faf7ea; - font-family : ScalySansRemake; border-style : solid; border-width : 7px; border-image : @descriptiveBoxImage 12 stretch; border-image-outset : 4px; - filter : drop-shadow(0 0 3px #faf7ea); + margin-top : 4px; //Prevent top border getting cut off on colbreak padding : 0.1em; + filter : drop-shadow(0 0 3px #faf7ea); & + * { - margin-top : 1.4em; + margin-top : 0.45cm; + } + h5 { + font-size : 0.375cm; } p{ display : block; @@ -271,7 +265,7 @@ body { padding-top : .8em; } :last-child { - margin-bottom : 0em; + margin-bottom : 0; } } //***************************** @@ -380,7 +374,6 @@ body { margin : 0px -6px 1em; } - //-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns, but breaks internal columns... position : relative; padding : 0px; margin-bottom : 1em; @@ -520,12 +513,15 @@ body { pre code{ width : 100%; - display : block; - border : 4px solid; + 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-top : 2px; //Prevent top border getting cut off on colbreak + margin-bottom : 2px; & + * { margin-top : 1em; } @@ -543,9 +539,6 @@ body { break-after : always; -moz-column-break-after : always; break-before : column; - &+* { - margin-top: 0; - } } //Avoid breaking up blockquote,table{ @@ -595,19 +588,7 @@ body { break-inside : auto; } } -//***************************** -// * WIDE -// *****************************/ -.page .wide{ - column-span : all; - -webkit-column-span : all; - -moz-column-span : all; - display : block; - margin-bottom : 0.34cm; - &+* { - margin-top : 0; - } -} + //***************************** // * CLASS TABLE // *****************************/ @@ -733,16 +714,15 @@ body { // *****************************/ .page { .block { - break-inside : avoid; - -webkit-transform : translateZ(0); //Prevents shadows from breaking across columns + break-inside : avoid; + display : inline-block; + min-width : 100%; + -webkit-transform : translateZ(0); //Prevents shadows from breaking across columns } .inline-block { display : inline-block; text-indent : initial; } - div { - column-gap : 0.5cm; //Default spacing if a div uses multicolumns - } } //***************************** @@ -788,3 +768,17 @@ body { margin-top: -1em; } } + +//***************************** +// * WIDE +// *****************************/ +.page .wide{ + column-span : all; + -webkit-column-span : all; + -moz-column-span : all; + display : block; + margin-bottom : 0.34cm; + &+* { + margin-top : 0; + } +} From 4fae5332fc59158e89c23ec085793a2a9f007765 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 9 Sep 2021 00:25:52 -0400 Subject: [PATCH 4/7] Change margin spacings between blocks from em to cm --- themes/5ePhb.style.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index 58880c5a9..f30adb21e 100644 --- a/themes/5ePhb.style.less +++ b/themes/5ePhb.style.less @@ -185,7 +185,7 @@ body { .useSansSerif(); width : 100%; & + * { - margin-top : 1em; + margin-top : 0.27cm; } thead{ display: table-row-group; @@ -523,7 +523,7 @@ body { margin-top : 2px; //Prevent top border getting cut off on colbreak margin-bottom : 2px; & + * { - margin-top : 1em; + margin-top : 0.27cm; } } //***************************** From 5d42196297c9afa9232a1867d66b17e4df29a0ae Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 9 Sep 2021 09:14:16 -0400 Subject: [PATCH 5/7] Give spellList "wide" class for consistency --- client/homebrew/brewRenderer/brewRenderer.jsx | 2 +- .../homebrew/editor/snippetbar/snippets/magic.gen.js | 4 ++-- client/homebrew/pages/printPage/printPage.jsx | 2 +- themes/5ePhb.style.less | 10 +++++----- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 2b8019f73..771abdfaf 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -131,7 +131,7 @@ const BrewRenderer = createClass({ if(this.props.renderer == 'legacy') return
; else { - pageText += `\n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) + pageText += `\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) return (
diff --git a/client/homebrew/editor/snippetbar/snippets/magic.gen.js b/client/homebrew/editor/snippetbar/snippets/magic.gen.js index 43bc5843b..33ce8406d 100644 --- a/client/homebrew/editor/snippetbar/snippets/magic.gen.js +++ b/client/homebrew/editor/snippetbar/snippets/magic.gen.js @@ -60,13 +60,13 @@ module.exports = { const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level']; const content = _.map(levels, (level)=>{ - const spells = _.map(_.sampleSize(spellNames, _.random(5, 15)), (spell)=>{ + const spells = _.map(_.sampleSize(spellNames, _.random(4, 10)), (spell)=>{ return `- ${spell}`; }).join('\n'); return `##### ${level} \n${spells} \n`; }).join('\n'); - return `{{spellList\n${content}\n}}`; + return `{{spellList,wide\n${content}\n}}`; }, spell : function(){ diff --git a/client/homebrew/pages/printPage/printPage.jsx b/client/homebrew/pages/printPage/printPage.jsx index b77fbb8f7..1f4d2f12e 100644 --- a/client/homebrew/pages/printPage/printPage.jsx +++ b/client/homebrew/pages/printPage/printPage.jsx @@ -46,7 +46,7 @@ const PrintPage = createClass({ }); } else { return _.map(this.state.brewText.split(/^\\page$/gm), (pageText, index)=>{ - pageText += `\n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) + pageText += `\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) return (
diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index f30adb21e..81d596a5d 100644 --- a/themes/5ePhb.style.less +++ b/themes/5ePhb.style.less @@ -567,10 +567,7 @@ body { // *****************************/ .page .spellList{ .useSansSerif(); - column-count : 4; - column-span : all; - -webkit-column-span : all; - -moz-column-span : all; + column-count : 2; ul+h5{ margin-top : 15px; } @@ -587,6 +584,9 @@ body { page-break-inside : auto; break-inside : auto; } + &.wide{ + column-count : 4; + } } //***************************** @@ -717,7 +717,7 @@ body { break-inside : avoid; display : inline-block; min-width : 100%; - -webkit-transform : translateZ(0); //Prevents shadows from breaking across columns + //-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns } .inline-block { display : inline-block; From d4ff87395f7f77e5264c60ce10fded03ef0fde02 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 9 Sep 2021 10:31:04 -0400 Subject: [PATCH 6/7] Fix all images having drop shadows --- themes/5ePhb.style.less | 6 ------ 1 file changed, 6 deletions(-) diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index 81d596a5d..ddd9d2288 100644 --- a/themes/5ePhb.style.less +++ b/themes/5ePhb.style.less @@ -349,12 +349,6 @@ body { .watercolor11 { --wc : @watercolor11; } .watercolor12 { --wc : @watercolor12; } - img { - z-index: 2 !important; - filter : drop-shadow(0px 6px 6px rgba(0,0,0,.4)); - position: absolute; - } - //***************************** // * MONSTER STAT BLOCK // *****************************/ From f435d65db7f1c05ba49bbfe7ee4d0a21b3454238 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Thu, 9 Sep 2021 10:35:08 -0400 Subject: [PATCH 7/7] Fix block-curly injector leaving behind an empty `

` --- client/homebrew/brewRenderer/brewRenderer.jsx | 2 +- client/homebrew/pages/printPage/printPage.jsx | 2 +- shared/naturalcrit/markdown.js | 7 +++++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 771abdfaf..9ea4632c4 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -131,7 +131,7 @@ const BrewRenderer = createClass({ if(this.props.renderer == 'legacy') return
; else { - pageText += `\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) + pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) return (
diff --git a/client/homebrew/pages/printPage/printPage.jsx b/client/homebrew/pages/printPage/printPage.jsx index 1f4d2f12e..6b3274de6 100644 --- a/client/homebrew/pages/printPage/printPage.jsx +++ b/client/homebrew/pages/printPage/printPage.jsx @@ -46,7 +46,7 @@ const PrintPage = createClass({ }); } else { return _.map(this.state.brewText.split(/^\\page$/gm), (pageText, index)=>{ - pageText += `\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) + pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) return (
diff --git a/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js index 8f01f0147..250d67850 100644 --- a/shared/naturalcrit/markdown.js +++ b/shared/naturalcrit/markdown.js @@ -174,13 +174,16 @@ const mustacheInjectBlock = { lastToken.originalType = 'mustacheInjectBlock'; lastToken.tags = ` ${processStyleTags(match[1])}`; return { - type : 'text', // Should match "name" above - raw : match[0], // Text to consume from the source + type : 'mustacheInjectBlock', // Should match "name" above + raw : match[0], // Text to consume from the source text : '' }; } }, renderer(token) { + if(!token.originalType){ + return; + } token.type = token.originalType; const text = this.parser.parse([token]); const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);