0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-11 11:12:44 +00:00

Tweak top margins for headers

This commit is contained in:
Trevor Buckner
2022-10-21 09:27:55 -04:00
parent 2bad0bfcb0
commit 6a6ee9fc12
2 changed files with 28 additions and 31 deletions

View File

@@ -77,9 +77,12 @@ body {
text-rendering : optimizeLegibility; text-rendering : optimizeLegibility;
page-break-before : always; page-break-before : always;
page-break-after : always; page-break-after : always;
}
//***************************** //*****************************
// * BASE // * BASE
// *****************************/ // *****************************/
:where(.page){
p{ p{
overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
display : block; display : block;
@@ -175,12 +178,20 @@ body {
font-size : 0.575cm; font-size : 0.575cm;
border-bottom : 2px solid var(--HB_Color_HeaderUnderline);; border-bottom : 2px solid var(--HB_Color_HeaderUnderline);;
line-height : 0.995em; //Font is misaligned. Shift up slightly line-height : 0.995em; //Font is misaligned. Shift up slightly
margin-top : 0.13cm; //(0.3 - 0.17)
& + * {
margin-top: 0.17cm;
}
} }
h4{ h4{
//margin-top : -0.02cm; //Font is misaligned. Shift up slightly //margin-top : -0.02cm; //Font is misaligned. Shift up slightly
//margin-bottom : 0.02cm; //margin-bottom : 0.02cm;
font-size : 0.458cm; font-size : 0.458cm;
line-height : 0.971em; //Font is misaligned. Shift up slightly line-height : 0.971em; //Font is misaligned. Shift up slightly
margin-top : 0.21cm; //(0.3 - 0.09)
& + * {
margin-top: 0.09cm;
}
} }
h5{ h5{
//margin-top : -0.02cm; //Font is misaligned. Shift up slightly //margin-top : -0.02cm; //Font is misaligned. Shift up slightly
@@ -207,15 +218,17 @@ body {
font-weight : 800; font-weight : 800;
th{ th{
vertical-align : bottom; 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
//height : 16px; // PDF to render at same height until Chrome 108
} }
} }
tbody{ tbody{
tr{ tr{
td{ td{
//padding : 0.14em 0.4em; //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 //height : 16px; // PDF to render at same height until Chrome 108
} }
&:nth-child(odd){ &:nth-child(odd){
background-color : var(--HB_Color_Accent); background-color : var(--HB_Color_Accent);
@@ -578,7 +591,7 @@ body {
//***************************** //*****************************
// * SPELL LIST // * SPELL LIST
// *****************************/ // *****************************/
.page .spellList{ :where(.page) .spellList{
.useSansSerif(); .useSansSerif();
column-count : 2; column-count : 2;
ul+h5{ ul+h5{
@@ -605,7 +618,7 @@ body {
//***************************** //*****************************
// * CLASS TABLE // * CLASS TABLE
// *****************************/ // *****************************/
.page .classTable{ :where(.page) .classTable{
th[colspan]:not([rowspan]) { th[colspan]:not([rowspan]) {
white-space : nowrap; white-space : nowrap;
} }
@@ -627,6 +640,9 @@ body {
&.wide:first-child { &.wide:first-child {
margin-top: 0.12cm; margin-top: 0.12cm;
} }
& + * {
margin-top: 0;
}
} }
&.decoration { &.decoration {
position:relative; position:relative;
@@ -659,7 +675,7 @@ body {
//***************************** //*****************************
// * TABLE OF CONTENTS // * TABLE OF CONTENTS
// *****************************/ // *****************************/
.page { :where(.page) {
&:has(.toc):after { &:has(.toc):after {
display: none; display: none;
} }
@@ -733,28 +749,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 // * DEFINITION LISTS
// *****************************/ // *****************************/
.page { :where(.page) {
dl { dl {
line-height : 1.25em; line-height : 1.25em;
padding-left : 1em; padding-left : 1em;
@@ -784,7 +782,7 @@ body {
//***************************** //*****************************
// * BLANK LINE // * BLANK LINE
// *****************************/ // *****************************/
.page { :where(.page) {
.blank { .blank {
height : 1em; height : 1em;
margin-top : 0; margin-top : 0;
@@ -794,7 +792,7 @@ body {
//***************************** //*****************************
// * WIDE // * WIDE
// *****************************/ // *****************************/
.page .wide{ :where(.page) .wide{
column-span : all; column-span : all;
-webkit-column-span : all; -webkit-column-span : all;
-moz-column-span : all; -moz-column-span : all;

View File

@@ -78,7 +78,7 @@ body {
z-index : -1; 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)) + :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 margin-top : 0.3cm; //NOTE: MAKE ALL MARGINS TOP-ONLY FOR BEST RESULTS WITH COLUMN BREAKS. USE * + * STYLE SELECTORS
} }
:where(h1,h3,h3,h4,h5,h6) + * { :where(h1,h3,h3,h4,h5,h6) + * {
@@ -191,6 +191,7 @@ body {
-webkit-column-break-after : always; -webkit-column-break-after : always;
break-after : always; break-after : always;
-moz-column-break-after : always; -moz-column-break-after : always;
margin-top : 0;
} }
//Avoid breaking up //Avoid breaking up
blockquote,table{ blockquote,table{
@@ -218,9 +219,7 @@ body {
.block { .block {
break-inside : avoid; break-inside : avoid;
display : inline-block; display : inline-block;
.page :where(&) { width : 100%;
width : 100%;
}
} }
.inline-block { .inline-block {
display : inline-block; display : inline-block;