Merge branch 'master' into pr/2442

2025-12-24 22:52:40 +00:00 · 2022-10-28 14:07:14 -04:00
parent 23a0a89ead c5eb7db432
commit 65beb8d65e
17 changed files with 3935 additions and 2713 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,4 @@ config/docker.*
 todo.md
 startDB.bat
 startMViewer.bat
+.vscode
--- a/changelog.md
+++ b/changelog.md
@@ -1,6 +1,7 @@
 ```css
 h5 {
 	font-size: .35cm !important;
+	margin-top: 0.3cm;
 }

 .page ul ul {
@@ -14,6 +15,11 @@ h5 {
 	filter: brightness(1.1) drop-shadow(1px 2px 1px #222);
 }

+.taskList ul {
+	margin-bottom: 0px;
+	margin-top: 0px;
+}
+
 .taskList li input[checked] {
 	filter: sepia(100%) hue-rotate(60deg) saturate(3.5) contrast(4) brightness(1.1) drop-shadow(1px 2px 1px #222);
 }
@@ -39,6 +45,81 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).

+### Thursday 28/10/2022 - v3.3.1
+{{taskList
+
+##### Calculuschild
+
+* [x] Fixes to several broken CSS styles from v3.3.0
+
+Fixes issues  [#2468](https://github.com/naturalcrit/homebrewery/issues/2468)
+
+##### Jeddai
+
+* [x] Reduce size of thumbnails on social media links
+
+}}
+
+### Friday 19/10/2022 - v3.3.0
+{{taskList
+
+##### Calculuschild
+
+* [x] Fix for tables broken by Chrome v106
+
+
+##### G-Ambatte:
+
+* [x] Fix Table of Contents broken by Chrome v106
+
+Fixes issues  [#2437](https://github.com/naturalcrit/homebrewery/issues/2437)
+
+* [x] Show brew thumbnails on user page
+
+Fixes issues  [#2331](https://github.com/naturalcrit/homebrewery/issues/2331)
+
+* [x] Allow longer URLs for brew thumbnails
+
+Fixes issues  [#2351](https://github.com/naturalcrit/homebrewery/issues/2351)
+
+* [x] Code no longer unfolds when inserting a snippet
+
+Fixes issues  [#2135](https://github.com/naturalcrit/homebrewery/issues/2135)
+
+* [x] Fix brew settings being lost on first save
+
+Fixes issues  [#2427](https://github.com/naturalcrit/homebrewery/issues/2427)
+
+
+##### Gazook:
+
+* [x] Several updates to bug reporting and error popups
+
+Fixes issues  [#2376](https://github.com/naturalcrit/homebrewery/issues/2376)
+
+* [x] Fixes to userpage search bar
+
+Fixes issues  [#1675](https://github.com/naturalcrit/homebrewery/issues/1675), [#2353](https://github.com/naturalcrit/homebrewery/issues/2353)
+
+* [x] Renderer *(legacy / V3)* now shown next to page #
+
+Fixes issues  [#1928](https://github.com/naturalcrit/homebrewery/issues/1928)
+
+* [x] Prevent text selection when moving divider bar
+
+Fixes issues  [#1632](https://github.com/naturalcrit/homebrewery/issues/1632)
+
+* [x] Tweak Monster Stat Block coloring
+
+Fixes issues  [#2123](https://github.com/naturalcrit/homebrewery/issues/2123)
+
+* [x] Added dropdown button to toggle autosave
+
+Fixes issues  [#1546](https://github.com/naturalcrit/homebrewery/issues/1546)
+
+}}
+
+
 ### Friday 08/09/2022 - v3.2.2
 {{taskList

--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -19,11 +19,6 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;

-const splice = function(str, index, inject){
-	return str.slice(0, index) + inject + str.slice(index);
-};
-
-

 const Editor = createClass({
 	displayName     : 'Editor',
@@ -80,19 +75,7 @@ const Editor = createClass({
 	},

 	handleInject : function(injectText){
-		let text;
-		if(this.isText())  text = this.props.brew.text;
-		if(this.isStyle()) text = this.props.brew.style ?? DEFAULT_STYLE_TEXT;
-
-		const lines = text.split('\n');
-		const cursorPos = this.refs.codeEditor.getCursorPosition();
-		lines[cursorPos.line] = splice(lines[cursorPos.line], cursorPos.ch, injectText);
-
-		const injectLines = injectText.split('\n');
-		this.refs.codeEditor.setCursorPosition(cursorPos.line + injectLines.length, cursorPos.ch  + injectLines[injectLines.length - 1].length);
-
-		if(this.isText())  this.props.onTextChange(lines.join('\n'));
-		if(this.isStyle()) this.props.onStyleChange(lines.join('\n'));
+		this.refs.codeEditor?.injectText(injectText, false);
 	},

 	handleViewChange : function(newView){
--- a/client/homebrew/navbar/account.navitem.jsx
+++ b/client/homebrew/navbar/account.navitem.jsx
@@ -70,7 +70,7 @@ const Account = createClass({
 					{global.account.username}
 				</Nav.item>
 				<Nav.item
-					href={`/user/${global.account.username}`}
+					href={`/user/${encodeURI(global.account.username)}`}
 					color='yellow'
 					icon='fas fa-beer'
 				>
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -55,6 +55,18 @@
 		text-align     : center;
 		text-transform : initial;
 	}
+	.save-menu {
+		.dropdown {
+			z-index: 1000;
+		}
+		.navItem i.fa-power-off {
+			color : red;
+			&.active {
+				color : rgb(0, 182, 52);
+				filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765))
+			}
+		}
+	}
 	.patreon.navItem{
 		border-left  : 1px solid #666;
 		border-right : 1px solid #666;
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -117,7 +117,7 @@ const BrewItem = createClass({
 						<i className='fas fa-tags'/>
 						{brew.tags.map((tag, idx)=>{
 							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-							return <span className={matches[1]}>{matches[2]}</span>;
+							return <span key={idx} className={matches[1]}>{matches[2]}</span>;
 						})}
 					</div>
 				</> : <></>
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -62,7 +62,10 @@ const EditPage = createClass({
 			confirmGoogleTransfer  : false,
 			errors                 : null,
 			htmlErrors             : Markdown.validate(this.props.brew.text),
-			url                    : ''
+			url                    : '',
+			autoSave               : true,
+			autoSaveWarning        : false,
+			unsavedTime            : new Date()
 		};
 	},
 	savedBrew : null,
@@ -72,9 +75,17 @@ const EditPage = createClass({
 			url : window.location.href
 		});

+
 		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy

-		this.trySave();
+		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) }, ()=>{
+			if(this.state.autoSave){
+				this.trySave();
+			} else {
+				this.setState({ autoSaveWarning: true });
+			}
+		});
+
 		window.onbeforeunload = ()=>{
 			if(this.state.isSaving || this.state.isPending){
 				return 'You have unsaved changes!';
@@ -117,14 +128,14 @@ const EditPage = createClass({
 			brew       : { ...prevState.brew, text: text },
 			isPending  : true,
 			htmlErrors : htmlErrors
-		}), ()=>this.trySave());
+		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},

 	handleStyleChange : function(style){
 		this.setState((prevState)=>({
 			brew      : { ...prevState.brew, style: style },
 			isPending : true
-		}), ()=>this.trySave());
+		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},

 	handleMetaChange : function(metadata){
@@ -134,7 +145,7 @@ const EditPage = createClass({
 				...metadata
 			},
 			isPending : true,
-		}), ()=>this.trySave());
+		}), ()=>{if(this.state.autoSave) this.trySave();});

 	},

@@ -221,8 +232,9 @@ const EditPage = createClass({
 				editId 	 : this.savedBrew.editId,
 				shareId  : this.savedBrew.shareId
 			},
-			isPending : false,
-			isSaving  : false,
+			isPending   : false,
+			isSaving    : false,
+			unsavedTime : new Date()
 		}));
 	},

@@ -329,17 +341,55 @@ const EditPage = createClass({
 			</Nav.item>;
 		}

+		if(this.state.autoSaveWarning && this.hasChanges()){
+			this.setAutosaveWarning();
+			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
+			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
+
+			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
+			Reminder...
+				<div className='errorContainer'>
+					{text}
+				</div>
+			</Nav.item>;
+		}
+
 		if(this.state.isSaving){
 			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
 		}
 		if(this.state.isPending && this.hasChanges()){
 			return <Nav.item className='save' onClick={this.save} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
 		}
+		if(!this.state.isPending && !this.state.isSaving && this.state.autoSave){
+			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
+		}
 		if(!this.state.isPending && !this.state.isSaving){
 			return <Nav.item className='save saved'>saved.</Nav.item>;
 		}
 	},

+	handleAutoSave : function(){
+		if(this.warningTimer) clearTimeout(this.warningTimer);
+		this.setState((prevState)=>({
+			autoSave        : !prevState.autoSave,
+			autoSaveWarning : prevState.autoSave
+		}), ()=>{
+			localStorage.setItem('AUTOSAVE_ON', JSON.stringify(this.state.autoSave));
+		});
+	},
+
+	setAutosaveWarning : function(){
+		setTimeout(()=>this.setState({ autoSaveWarning: false }), 4000);                           // 4 seconds to display
+		this.warningTimer = setTimeout(()=>{this.setState({ autoSaveWarning: true });}, 900000);   // 15 minutes between warnings
+		this.warningTimer;
+	},
+
+	renderAutoSaveButton : function(){
+		return <Nav.item onClick={this.handleAutoSave}>
+			Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
+		</Nav.item>;
+	},
+
 	processShareId : function() {
 		return this.state.brew.googleId && !this.state.brew.stubbed ?
 					 this.state.brew.googleId + this.state.brew.shareId :
@@ -378,7 +428,10 @@ const EditPage = createClass({

 			<Nav.section>
 				{this.renderGoogleDriveIcon()}
-				{this.renderSaveButton()}
+				<Nav.dropdown className='save-menu'>
+					{this.renderSaveButton()}
+					{this.renderAutoSaveButton()}
+				</Nav.dropdown>
 				<NewBrew />
 				<HelpNavItem/>
 				<Nav.dropdown>
--- a/client/homebrew/pages/editPage/editPage.less
+++ b/client/homebrew/pages/editPage/editPage.less
@@ -32,7 +32,7 @@
 		position         : absolute;
 		top              : 100%;
 		left             : 50%;
-		z-index          : 100000;
+		z-index          : 500;
 		width            : 140px;
 		padding          : 3px;
 		color            : white;
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -38,9 +38,7 @@ const HomePage = createClass({
 	},
 	handleSave : function(){
 		request.post('/api')
-			.send({
-				text : this.state.brew.text
-			})
+			.send(this.state.brew)
 			.end((err, res)=>{
 				if(err) return;
 				const brew = res.body;
--- a/client/homebrew/pages/printPage/printPage.jsx
+++ b/client/homebrew/pages/printPage/printPage.jsx
@@ -91,6 +91,7 @@ const PrintPage = createClass({

 		return <div>
 			<Meta name='robots' content='noindex, nofollow' />
+			<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
 			{baseThemePath &&
 				<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
 			}
--- a/client/template.js
+++ b/client/template.js
@@ -15,7 +15,7 @@ module.exports = async(name, title = '', props = {})=>{
 		<meta property="og:description" content="${props.brew?.description || 'No description.'}">
 		<meta property="og:site_name" content="The Homebrewery - Make your Homebrew content look legit!">
 		<meta property="og:type" content="article">
-		<meta name="twitter:card" content="summary_large_image">
+		<meta name="twitter:card" content="summary">
 		<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
 	</head>
 	<body>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "homebrewery",
  "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.2.2",
+  "version": "3.3.1",
  "engines": {
    "node": "16.11.x"
  },
@@ -51,8 +51,8 @@
    ]
  },
  "dependencies": {
-    "@babel/core": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/core": "^7.19.6",
+    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.18.6",
    "body-parser": "^1.20.1",
@@ -60,12 +60,12 @@
    "codemirror": "^5.65.6",
    "cookie-parser": "^1.4.6",
    "create-react-class": "^15.7.0",
-    "dedent-tabs": "^0.10.1",
+    "dedent-tabs": "^0.10.2",
    "express": "^4.18.2",
    "express-async-handler": "^1.2.0",
    "express-static-gzip": "2.1.7",
    "fs-extra": "10.1.0",
-    "googleapis": "108.0.0",
+    "googleapis": "108.0.1",
    "js-yaml": "^4.1.0",
    "jwt-simple": "^0.5.6",
    "less": "^3.13.1",
@@ -74,21 +74,21 @@
    "marked-extended-tables": "^1.0.5",
    "markedLegacy": "npm:marked@^0.3.19",
    "moment": "^2.29.4",
-    "mongoose": "^6.6.1",
+    "mongoose": "^6.7.0",
    "nanoid": "3.3.4",
    "nconf": "^0.12.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-frame-component": "4.1.3",
-    "react-router-dom": "6.3.0",
+    "react-router-dom": "6.4.2",
    "sanitize-filename": "1.6.3",
    "superagent": "^6.1.0",
    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
  },
  "devDependencies": {
-    "eslint": "^8.25.0",
+    "eslint": "^8.26.0",
    "eslint-plugin-react": "^7.31.10",
-    "jest": "^29.0.3",
-    "supertest": "^6.2.4"
+    "jest": "^29.2.2",
+    "supertest": "^6.3.1"
  }
 }
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -229,6 +229,15 @@ const CodeEditor = createClass({
 		this.codeMirror.replaceSelection('\n\\page\n\n', 'end');
 	},

+	injectText : function(injectText, overwrite=true) {
+		const cm = this.codeMirror;
+		if(!overwrite) {
+			cm.setCursor(cm.getCursor('from'));
+		}
+		cm.replaceSelection(injectText, 'end');
+		cm.focus();
+	},
+
 	makeUnderline : function() {
 		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
 		this.codeMirror.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around');
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -77,9 +77,12 @@ body {
 	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;
@@ -155,9 +158,9 @@ body {
 			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);
+			background-clip         : text;
+			-webkit-background-clip : text;
+			color                   : rgba(0, 0, 0, 0);
 		}
 		&+p::first-line{
 			font-variant : small-caps;
@@ -175,12 +178,24 @@ body {
 		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
@@ -199,6 +214,7 @@ body {
 	table{
 		.useSansSerif();
 		width         : 100%;
+		line-height   : 16px;
 		& + * {
 			margin-top : 0.325cm;
 		}
@@ -207,13 +223,17 @@ body {
 			font-weight : 800;
 			th{
 				vertical-align : bottom;
-				padding        : 0.14em 0.4em;
+				//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 : 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);
@@ -625,6 +645,9 @@ body {
 		&.wide:first-child {
 			margin-top: 0.12cm;
 		}
+		& + * {
+			margin-top: 0;
+		}
 	}
 	&.decoration {
 		position:relative;
@@ -657,90 +680,78 @@ body {
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/
-.page .toc{
+.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;
+		h1 {
+			text-align    : center;
+			margin-bottom : 0.3cm;
 		}
-	}
-	h4 {
-		margin-top  : 0.2cm;
-		line-height : 0.4cm;
-		& + ul li {
-			line-height: 1.2em;
+		a{
+			display         : inline;
+			color           : inherit;
+			text-decoration : none;
+			&:hover{
+				text-decoration : underline;
+			}
 		}
-	}
-	ul{
-		padding-left    : 0;
-		list-style-type : none;
-		li + li h3 {
-			margin-top  : 0.26cm;
-			line-height : 1em
+		h4 {
+			margin-top  : 0.2cm;
+			line-height : 0.4cm;
+			& + ul li {
+				line-height: 1.2em;
+			}
 		}
-		h3 span:first-child::after {
-			border : none;
-		}
-		span {
-			display : table-cell;
-			&:first-child {
-				position   :       relative;
-				overflow   :       hidden;
-				&::after {
+		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       : "";
-					position      : absolute;
 					bottom        : 0.08cm;
-					margin-left   : 0.06cm;        /* Spacing before dot leaders */
-					width         : 100%;
+					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;
 				}
 			}
-			&:last-child {
-				font-family    : BookInsanityRemake;
-				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;
 			}
 		}
-		ul { /*List indent*/
-			margin-left : 1em;
+		&.wide{
+			.useColumns(0.96, @fillMode: balance);
 		}
 	}
-	&.wide{
-		.useColumns(0.96, @fillMode: balance);
-	}
-}
-
-//*****************************
-// *    MUSTACHE DIVS/SPANS
-// *****************************/
-.page {
-	.block {
-		break-inside      : avoid;
-		display           : inline-block;
-		.page :where(&) {
-			width             : 100%;
-		}
-		//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
-	}
-	.inline-block {
-		display : inline-block;
-		text-indent : initial;
-	}
 }

 //*****************************
@@ -773,26 +784,13 @@ body {
  }
 }

-//*****************************
-// *    BLANK LINE
-// *****************************/
-.page {
-	.blank {
-		height     : 1em;
-		margin-top : 0;
-	}
-}
-
 //*****************************
 // *         WIDE
 // *****************************/
 .page .wide{
-	column-span         : all;
-	-webkit-column-span : all;
-	-moz-column-span    : all;
-	display             : block;
-	margin-bottom       : 0.34cm;
-	&+* {
-		margin-top : 0;
-	}
+	margin-bottom       : 0.325cm;
+}
+
+.page h1 + *{
+	margin-top : 0;
 }
--- a/themes/V3/Blank/style.less
+++ b/themes/V3/Blank/style.less
@@ -43,7 +43,7 @@ body {
 	//*****************************
 	// *            BASE
 	// *****************************/
-:where(.page){
+.page{
 	p{
 		overflow-wrap : break-word;
 		display       : block;
@@ -77,13 +77,7 @@ body {
 	img{
 		z-index : -1;
 	}
-	:not(:where(.wide,.columnSplit,.blank,hr)) + :where(h1,h2,h3,h4,h5,h6,table,dl,.block) {
-		margin-top : 1em;  		//NOTE: MAKE ALL MARGINS TOP-ONLY FOR BEST RESULTS WITH COLUMN BREAKS. USE * + * STYLE SELECTORS
-	}

-	:where(h1,h3,h3,h4,h5,h6) + * {
-		margin-top : 0;
-	}
 	//*****************************
 	// *           HEADERS
 	// *****************************/
@@ -116,6 +110,9 @@ body {
 			font-weight : bold;
 		}
 	}
+	div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
+		margin-top : 0;	                        // have vertical spacing.
+	}

 	/* Watermark */
 	.watermark {
@@ -191,6 +188,10 @@ body {
 		-webkit-column-break-after : always;
 		break-after                : always;
 		-moz-column-break-after    : always;
+		margin-top                 : 0;
+		& + * {
+			margin-top : 0;
+		}
 	}
 	//Avoid breaking up
 	blockquote,table{
@@ -214,13 +215,11 @@ body {
 //*****************************
 // *    MUSTACHE DIVS/SPANS
 // *****************************/
-:where(.page) {
+.page {
 	.block {
 		break-inside      : avoid;
 		display           : inline-block;
-		.page :where(&) {
-			width             : 100%;
-		}
+		width             : 100%;
 	}
 	.inline-block {
 		display     : inline-block;
@@ -231,7 +230,7 @@ body {
 //*****************************
 // *    DEFINITION LISTS
 // *****************************/
-:where(.page) {
+.page {
 	dl {
 		padding-left : 1em;
 		white-space  : pre-line;
@@ -251,17 +250,20 @@ body {
 //*****************************
 // *    BLANK LINE
 // *****************************/
-:where(.page) {
+.page {
 	.blank {
 		height     : 1em;
 		margin-top : 0;
+		& + * {
+			margin-top : 0;
+		}
 	}
 }

 //*****************************
 // *         WIDE
 // *****************************/
-:where(.page) {
+.page {
 	.wide{
 		column-span         : all;
 		display             : block;
--- a/themes/V3/Journal/style.less
+++ b/themes/V3/Journal/style.less
@@ -62,7 +62,7 @@
 	//*****************************
 	// *            BASE
 	// *****************************/
-:where(.page){
+.page{
 	color       : var(--HB_Color_Text);
 	font-family : ReenieBeanie;
 	font-size   : 0.53cm;
@@ -554,6 +554,6 @@
 //*****************************
 // *         WIDE
 // *****************************/
-:where(.page) .wide {
+.page .wide {
 	margin-bottom       : 0.45cm;
 }