From 8f34e8bb2d79af5d47c7af0848d5e905582d8bf4 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Tue, 20 Jul 2021 23:32:49 -0400 Subject: [PATCH] Change note block to div, restyle notes and descript boxes --- .../editor/snippetbar/snippets/snippets.js | 30 ++-- themes/5ePhb.style.less | 129 +++++++++--------- 2 files changed, 84 insertions(+), 75 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js index 42039dfc0..6cb04e610 100644 --- a/client/homebrew/editor/snippetbar/snippets/snippets.js +++ b/client/homebrew/editor/snippetbar/snippets/snippets.js @@ -146,26 +146,28 @@ module.exports = [ name : 'Note', icon : 'fas fa-sticky-note', gen : function(){ - return [ - '> ##### Time to Drop Knowledge', - '> Use notes to point out some interesting information. ', - '> ', - '> **Tables and lists** both work within a note.' - ].join('\n'); + return dedent` + {{note + ##### Time to Drop Knowledge', + Use notes to point out some interesting information. + + **Tables and lists** both work within a note. + }} + \n`; }, }, { name : 'Descriptive Text Box', icon : 'fas fa-comment-alt', gen : function(){ - return [ - '{{descriptive', - '##### Time to Drop Knowledge', - 'Use notes to point out some interesting information. ', - '', - '**Tables and lists** both work within a note.', - '}}' - ].join('\n'); + return dedent` + {{descriptive + ##### Time to Drop Knowledge + Use descriptive boxes to highlight text that should be read aloud. + + **Tables and lists** both work within a descriptive box. + }} + \n`; }, }, { diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less index 979856167..17d27d00a 100644 --- a/themes/5ePhb.style.less +++ b/themes/5ePhb.style.less @@ -19,9 +19,12 @@ body { font-family : ScalySansRemake; font-size : 0.325cm; line-height : 1.2em; - p,dl,ul { + p,dl,ul,ol { line-height : 1.2em; } + ul, ol { + padding-left : 1em; + } em{ font-style : italic; } @@ -64,10 +67,10 @@ body { // *****************************/ p{ overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS - margin-bottom : 1em; + margin-bottom : 0.8em; line-height : 1.3em; &+p{ - margin-top : -1em; + margin-top : -0.8em; } } ul{ @@ -194,31 +197,75 @@ body { //***************************** // * NOTE // *****************************/ - blockquote{ + .note{ + &::before{ + content : ""; + box-sizing : border-box; + border-style : solid; + border-width : 11px; + border-image : @noteBorderImage 12; + border-image-outset : 9px 0px; + box-shadow : 1px 4px 14px #888; + position : absolute; + width : 100%; + height : 100%; + top : 0; + left : 0; + } .useSansSerif(); - box-sizing : border-box; - margin-bottom : 1em; - padding : 5px 10px; + position : relative; + margin-top : 1.3em; + margin-left : -0.1em; + margin-right : -0.1em; background-color : @noteGreen; - border-style : solid; - border-width : 11px; - border-image : @noteBorderImage 11; - border-image-outset : 9px 0px; - box-shadow : 1px 4px 14px #888; - -webkit-transform : translateZ(0); //Prevents shadows from breaking across columns - p, ul{ - font-size : 0.352cm; - line-height : 1.1em; + padding : 0.5em 0.6em; + & + * { + margin-top : 1.3em; + } + p{ + display : block; + padding-bottom : 0px; + } + p + p { + padding-top : .8em; + } + :last-child { + margin-bottom : 0em; } } - //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; + //************************************ + // * DESCRIPTIVE TEXT BOX + // ************************************/ + .descriptive{ + .useSansSerif(); + display : block-inline; + 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; + box-shadow : 0px 0px 6px #faf7ea; + padding : 0.1em; + & + * { + margin-top : 1.4em; + } + p{ + display : block; + padding-bottom : 0px; + line-height : 1.5em; + } + p + p { + padding-top : .8em; + } + :last-child { + margin-bottom : 0em; + } } //***************************** // * MONSTER STAT BLOCK // *****************************/ - .monster { &.frame { border-style : solid; @@ -459,47 +506,6 @@ body { margin-bottom : 10px; } } -//************************************ -// * DESCRIPTIVE TEXT BOX -// ************************************/ -.page .descriptive{ - display : block-inline; - margin-top : 1.3em; - background-color : #faf7ea; - font-family : ScalySansRemake; - border-style : solid; - border-width : 7px; - border-image : @descriptiveBoxImage 12 stretch; - border-image-outset : 4px; - box-shadow : 0px 0px 6px #faf7ea; - padding : 0.1em; - & + * { - margin-top : 1.3em; - } - p{ - display : block; - padding-bottom : 0px; - line-height : 1.5em; - } - p + p { - padding-top : .8em; - } - p:last-of-type { - margin-bottom : 0em; - } - em { - font-family : ScalySansRemake; - font-style : italic; - } - strong { - font-family : ScalySansRemake; - font-weight : 800; - letter-spacing : -0.02em; - } -} -.page pre+.descriptive{ - margin-top : 8px; -} //***************************** // * TABLE OF CONTENTS // *****************************/ @@ -570,6 +576,7 @@ body { .page { .block { break-inside : avoid; + -webkit-transform : translateZ(0); //Prevents shadows from breaking across columns } .inline { display : inline-block;