0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-20 07:32:43 +00:00

css cleanup

This commit is contained in:
Victor Losada Hernandez
2023-04-15 21:37:00 +02:00
parent 2ed669d95e
commit 65c738d3b2

View File

@@ -106,13 +106,16 @@
overflow-wrap: break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
display: block;
line-height: 1.25em;
&+* {
margin-top: 0.325cm;
}
&+p {
margin-top: 0;
}
}
ul {
margin-bottom: 0.8em;
padding-left: 1.4em;
@@ -120,6 +123,7 @@
list-style-position: outside;
list-style-type: disc;
}
ol {
margin-bottom: 0.8em;
padding-left: 1.4em;
@@ -127,38 +131,51 @@
list-style-position: outside;
list-style-type: decimal;
}
//Indents after p or lists
p+p, ul+p, ol+p{
p+p,
ul+p,
ol+p {
text-indent: 1em;
}
img {
z-index: -1;
}
strong {
font-weight: bold;
letter-spacing: -0.02em;
}
em {
font-style: italic;
}
sup {
vertical-align: super;
font-size: smaller;
line-height: 0;
}
sub {
vertical-align: sub;
font-size: smaller;
line-height: 0;
}
//*****************************
// * HEADERS
// *****************************/
h1,h2,h3,h4{
h1,
h2,
h3,
h4 {
font-family: MrEavesRemake;
font-weight: 800;
color: var(--HB_Color_HeaderText);
}
h1 {
margin-bottom: 0.18cm; //Margin-bottom only because this is WIDE
column-span: all;
@@ -166,6 +183,7 @@
line-height: 1em;
-webkit-column-span: all;
-moz-column-span: all;
&+p::first-letter {
float: left;
font-family: SolberaImitationRemake;
@@ -181,41 +199,51 @@
-webkit-background-clip: text;
color: rgba(0, 0, 0, 0);
}
&+p::first-line {
font-variant: small-caps;
}
}
h2 {
//margin-top : 0px; //Font is misaligned. Shift up slightly
//margin-bottom : 0.05cm;
font-size: 0.75cm;
line-height: 0.988em; //Font is misaligned. Shift up slightly
}
h3 {
//margin-top : -0.1cm; //Font is misaligned. Shift up slightly
//margin-bottom : 0.1cm;
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
&+* {
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
//margin-bottom : 0.02cm;
@@ -223,10 +251,12 @@
font-size: 0.423cm;
font-weight: 900;
line-height: 0.951em; //Font is misaligned. Shift up slightly
&+* {
margin-top: 0.2cm;
}
}
//*****************************
// * TABLE
// *****************************/
@@ -234,12 +264,15 @@
.useSansSerif();
width: 100%;
line-height: 16px;
&+* {
margin-top: 0.325cm;
}
thead {
display: table-row-group;
font-weight: 800;
th {
vertical-align: bottom;
//padding : 0.14em 0.4em;
@@ -247,6 +280,7 @@
//line-height : 16px; // PDF to render at same height until Chrome 108
}
}
tbody {
tr {
td {
@@ -254,12 +288,14 @@
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);
}
}
}
}
//*****************************
// * NOTE
// *****************************/
@@ -273,23 +309,29 @@
border-image-width: 11px;
padding: 0.13cm 0.16cm;
box-shadow: 1px 4px 14px #888;
.page :where(&) {
margin-top: 9px; //Prevent top border getting cut off on colbreak
}
&+* {
margin-top: 0.45cm;
}
h5 {
font-size: 0.375cm;
}
p {
display: block;
padding-bottom: 0px;
}
:last-child {
margin-bottom: 0;
}
}
//************************************
// * DESCRIPTIVE TEXT BOX
// ************************************/
@@ -302,24 +344,30 @@
border-image-outset: 4px;
padding: 0.1em;
box-shadow: 0 0 6px #faf7ea;
.page :where(&) {
margin-top: 4px; //Prevent top border getting cut off on colbreak
}
&+* {
margin-top: 0.45cm;
}
h5 {
font-size: 0.375cm;
}
p {
display: block;
padding-bottom: 0px;
line-height: 1.5em;
}
:last-child {
margin-bottom: 0;
}
}
//*****************************
// * Images Snippets
// *****************************/
@@ -452,6 +500,7 @@
// *****************************/
.monster {
.useSansSerif();
&.frame {
border-style: solid;
border-width: 7px 6px;
@@ -782,6 +831,7 @@
th[colspan]:not([rowspan]) {
white-space: nowrap;
}
&.frame {
margin-top: 0.7cm;
margin-bottom: 0.9cm;
@@ -797,16 +847,20 @@ th[colspan]:not([rowspan]) {
border-image-slice: 200;
border-image-source: @frameBorderImage;
border-image-width: 47px;
&.wide:first-child {
margin-top: 0.12cm;
}
&+* {
margin-top: 0;
}
}
&.decoration {
position: relative;
}
&.decoration::before {
content: '';
position: absolute;
@@ -823,35 +877,42 @@ th[colspan]:not([rowspan]) {
filter: drop-shadow(0px 0px 1px #C8C5C080);
z-index: -1;
}
&.decoration.wide::before {
width: calc(100% + 3.3cm);
height: 7.75cm;
background-position: left, right;
}
h5+table {
margin-top: 0.2cm;
}
}
//*****************************
// * COVER PAGE
// *****************************/
.page:has(.coverPage) {
columns: 1;
text-align: center;
&:after {
all: unset;
}
.logo {
position: absolute;
top: 0.5cm;
left: 0;
right: 0;
filter: drop-shadow(0 0 0.075cm black);
img {
height: 2cm;
width: 100%;
}
}
.columnWrapper>p img {
position: absolute;
bottom: 0;
@@ -860,12 +921,10 @@ h5 + table{
min-width: 100%;
z-index: -1;
}
h1 {
text-shadow: unset;
filter : drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
filter: drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
text-transform: uppercase;
font-weight: normal;
display: block;
@@ -876,17 +935,16 @@ h5 + table{
font-size: 2.245cm;
line-height: 0.85em;
}
h2 {
filter : drop-shadow(0 0 1px black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
filter: drop-shadow(0 0 1px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
font-family: NodestoCapsCondensed;
font-weight: normal;
font-size: 0.85cm;
letter-spacing: 0.1cm;
color: white;
}
hr {
display: block;
position: relative;
@@ -899,6 +957,7 @@ h5 + table{
margin: auto;
filter: drop-shadow(0 0 3px black);
}
.banner {
filter: drop-shadow(2px 2px 2px black);
position: absolute;
@@ -919,11 +978,9 @@ h5 + table{
flex-direction: column;
padding-top: 0.1cm;
}
.footnote {
filter : drop-shadow(0 0 0.7px black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
filter: drop-shadow(0 0 0.7px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
position: absolute;
text-align: center;
color: white;
@@ -1085,12 +1142,16 @@ h5 + table{
.page {
.runeTable {
margin-block: 0.7cm;
table {
font-family: inherit;
tbody tr {
background: unset;
}
th, td {
th,
td {
width: 1.3cm;
height: 1.3cm;
vertical-align: middle;
@@ -1098,10 +1159,12 @@ h5 + table{
outline: 1px solid #000;
font-weight: normal;
}
th {
font-family: BookInsanityRemake;
font-size: 0.45cm;
}
td {
font-size: 0.7cm;
}
@@ -1118,3 +1181,4 @@ h5 + table{
}
}
}
}