Merge pull request #2461 from naturalcrit/FixPHBHeaderSpacings

Fix PHB Tables (again) + Header spacings

themes/V3/5ePHB/style.less

@@ -77,9 +77,12 @@ body {
 	text-rendering    : optimizeLegibility;
 	page-break-before : always;
 	page-break-after  : always;
+}
 	//*****************************
 	// *            BASE
 	// *****************************/
+
+:where(.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;
+			background-clip         : text;
-	    -webkit-background-clip : text;
+			-webkit-background-clip : text;
-	    color                   : rgba(0, 0, 0, 0);
+			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
@@ -207,15 +222,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 : 0px 5px;   // Both of these are temporary, just to force
+					padding     : 0px 1.5px;   // Both of these are temporary, just to force
-          height  : 16px;        // PDF to render at same height until Chrome 108
+          line-height : 16px;        // PDF to render at same height until Chrome 108
 				}
 				&:nth-child(odd){
 					background-color : var(--HB_Color_Accent);
@@ -223,6 +240,9 @@ body {
 			}
 		}
 	}
+	div table:has(~table) {			// Divs with side-by-side tables add an extra line
+		margin-bottom: -0.325cm;	// of vertical space at bottom. This works around it.
+	}
 	//*****************************
 	// *            NOTE
 	// *****************************/
@@ -578,7 +598,7 @@ body {
 //*****************************
 // *         SPELL LIST
 // *****************************/
-.page .spellList{
+:where(.page) .spellList{
 	.useSansSerif();
 	column-count        : 2;
 	ul+h5{
@@ -605,7 +625,7 @@ body {
 //*****************************
 // *       CLASS TABLE
 // *****************************/
-.page .classTable{
+:where(.page) .classTable{
 	th[colspan]:not([rowspan]) {
 		white-space : nowrap;
 	}
@@ -627,6 +647,9 @@ body {
 		&.wide:first-child {
 			margin-top: 0.12cm;
 		}
+		& + * {
+			margin-top: 0;
+		}
 	}
 	&.decoration {
 		position:relative;
@@ -659,7 +682,7 @@ body {
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/
-.page {
+:where(.page) {
 	&:has(.toc):after {
 		display: none;
 	}
@@ -733,28 +756,10 @@ body {
 	}
 }
 
-//*****************************
-// *    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;
-	}
-}
-
 //*****************************
 // *    DEFINITION LISTS
 // *****************************/
-.page {
+:where(.page) {
 	dl {
 		line-height  : 1.25em;
 		padding-left : 1em;
@@ -781,26 +786,13 @@ body {
   }
 }
 
-//*****************************
-// *    BLANK LINE
-// *****************************/
-.page {
-	.blank {
-		height     : 1em;
-		margin-top : 0;
-	}
-}
-
 //*****************************
 // *         WIDE
 // *****************************/
-.page .wide{
+:where(.page) .wide{
-	column-span         : all;
+	margin-bottom       : 0.325cm;
-	-webkit-column-span : all;
+}
-	-moz-column-span    : all;
+
-	display             : block;
+:where(.page) h1 + *{
-	margin-bottom       : 0.34cm;
+	margin-top : 0;
-	&+* {
-		margin-top : 0;
-	}
 }

themes/V3/Blank/style.less

@@ -77,11 +77,11 @@ body {
 	img{
 		z-index : -1;
 	}
-	:not(:where(.wide,.columnSplit,.blank,hr)) + :where(h1,h2,h3,h4,h5,h6,table,dl,.block) {
+	:not(:where(.wide,.columnSplit,.blank,hr,h1)) + :where(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
+		margin-top : 0.325cm;  		//NOTE: MAKE ALL MARGINS TOP-ONLY FOR BEST RESULTS WITH COLUMN BREAKS. USE * + * STYLE SELECTORS
 	}
 
-	:where(h1,h3,h3,h4,h5,h6) + * {
+	:is(h1,h3,h3,h4,h5,h6) + * {
 		margin-top : 0;
 	}
 	//*****************************
@@ -191,6 +191,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{
@@ -218,9 +222,7 @@ body {
 	.block {
 		break-inside      : avoid;
 		display           : inline-block;
-		.page :where(&) {
+		width             : 100%;
-			width             : 100%;
-		}
 	}
 	.inline-block {
 		display     : inline-block;