Change note block to div, restyle notes and descript boxes

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -146,26 +146,28 @@ module.exports = [
 				name : 'Note',
 				icon : 'fas fa-sticky-note',
 				gen  : function(){
-					return [
+					return dedent`
-						'> ##### Time to Drop Knowledge',
+						{{note
-						'> Use notes to point out some interesting information. ',
+						##### Time to Drop Knowledge',
-						'> ',
+						Use notes to point out some interesting information.
-						'> **Tables and lists** both work within a note.'
+
-					].join('\n');
+						**Tables and lists** both work within a note.
+						}}
+						\n`;
 				},
 			},
 			{
 				name : 'Descriptive Text Box',
 				icon : 'fas fa-comment-alt',
 				gen  : function(){
-					return [
+					return dedent`
-						'{{descriptive',
+						{{descriptive
-						'##### Time to Drop Knowledge',
+						##### Time to Drop Knowledge
-						'Use notes to point out some interesting information. ',
+						Use descriptive boxes to highlight text that should be read aloud.
-						'',
+						
-						'**Tables and lists** both work within a note.',
+						**Tables and lists** both work within a descriptive box.
-						'}}'
+						}}
-					].join('\n');
+						\n`;
 				},
 			},
 			{

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;
+		position            : relative;
-		margin-bottom       : 1em;
+		margin-top          : 1.3em;
-		padding             : 5px 10px;
+		margin-left         : -0.1em;
+		margin-right        : -0.1em;
 		background-color    : @noteGreen;
-		border-style        : solid;
+		padding             : 0.5em 0.6em;
-		border-width        : 11px;
+		& + * {
-		border-image        : @noteBorderImage 11;
+			margin-top : 1.3em;
-		border-image-outset : 9px 0px;
+		}
-		box-shadow          : 1px 4px 14px #888;
+		p{
-		-webkit-transform   : translateZ(0); //Prevents shadows from breaking across columns
+			display        : block;
-		p, ul{
+			padding-bottom : 0px;
-			font-size   : 0.352cm;
+		}
-			line-height : 1.1em;
+		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 {
+	// *       DESCRIPTIVE TEXT BOX
-		margin-top : 13px;
+	// ************************************/
+	.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;