0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-09 11:32:39 +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

@@ -101,225 +101,273 @@
// * BASE // * BASE
// *****************************/ // *****************************/
.page{ .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;
line-height : 1.25em; line-height: 1.25em;
&+* { &+* {
margin-top : 0.325cm; margin-top: 0.325cm;
} }
&+p{
margin-top : 0; &+p {
margin-top: 0;
} }
} }
ul{
margin-bottom : 0.8em; ul {
padding-left : 1.4em; margin-bottom: 0.8em;
line-height : 1.25em; padding-left: 1.4em;
list-style-position : outside; line-height: 1.25em;
list-style-type : disc; list-style-position: outside;
list-style-type: disc;
} }
ol{
margin-bottom : 0.8em; ol {
padding-left : 1.4em; margin-bottom: 0.8em;
line-height : 1.25em; padding-left: 1.4em;
list-style-position : outside; line-height: 1.25em;
list-style-type : decimal; list-style-position: outside;
list-style-type: decimal;
} }
//Indents after p or lists //Indents after p or lists
p+p, ul+p, ol+p{ p+p,
text-indent : 1em; ul+p,
ol+p {
text-indent: 1em;
} }
img{
z-index : -1; img {
z-index: -1;
} }
strong{
font-weight : bold; strong {
letter-spacing : -0.02em; font-weight: bold;
letter-spacing: -0.02em;
} }
em{
font-style : italic; em {
font-style: italic;
} }
sup{
vertical-align : super; sup {
font-size : smaller; vertical-align: super;
line-height : 0; font-size: smaller;
line-height: 0;
} }
sub{
vertical-align : sub; sub {
font-size : smaller; vertical-align: sub;
line-height : 0; font-size: smaller;
line-height: 0;
} }
//***************************** //*****************************
// * HEADERS // * HEADERS
// *****************************/ // *****************************/
h1,h2,h3,h4{ h1,
font-family : MrEavesRemake; h2,
font-weight : 800; h3,
color : var(--HB_Color_HeaderText); h4 {
font-family: MrEavesRemake;
font-weight: 800;
color: var(--HB_Color_HeaderText);
} }
h1{
margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE h1 {
column-span : all; margin-bottom: 0.18cm; //Margin-bottom only because this is WIDE
font-size : 0.89cm; column-span: all;
line-height : 1em; font-size: 0.89cm;
-webkit-column-span : all; line-height: 1em;
-moz-column-span : all; -webkit-column-span: all;
&+p::first-letter{ -moz-column-span: all;
float : left;
font-family : SolberaImitationRemake; &+p::first-letter {
line-height : 1em; float: left;
font-size : 3.5cm; font-family: SolberaImitationRemake;
padding-left : 40px; //Allow background color to extend into margins line-height: 1em;
margin-left : -40px; font-size: 3.5cm;
margin-top : -0.3cm; padding-left: 40px; //Allow background color to extend into margins
padding-bottom : 2px; margin-left: -40px;
margin-bottom : -20px; margin-top: -0.3cm;
background-image : linear-gradient(-45deg, #322814, #998250, #322814); padding-bottom: 2px;
background-clip : text; margin-bottom: -20px;
-webkit-background-clip : text; background-image: linear-gradient(-45deg, #322814, #998250, #322814);
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; &+p::first-line {
font-variant: small-caps;
} }
} }
h2{
h2 {
//margin-top : 0px; //Font is misaligned. Shift up slightly //margin-top : 0px; //Font is misaligned. Shift up slightly
//margin-bottom : 0.05cm; //margin-bottom : 0.05cm;
font-size : 0.75cm; font-size: 0.75cm;
line-height : 0.988em; //Font is misaligned. Shift up slightly line-height: 0.988em; //Font is misaligned. Shift up slightly
} }
h3{
h3 {
//margin-top : -0.1cm; //Font is misaligned. Shift up slightly //margin-top : -0.1cm; //Font is misaligned. Shift up slightly
//margin-bottom : 0.1cm; //margin-bottom : 0.1cm;
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.17cm; margin-top: 0.17cm;
} }
} }
* + h3 {
margin-top : 0.155cm; //(0.325 - 0.17) *+h3 {
margin-top: 0.155cm; //(0.325 - 0.17)
} }
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.09cm; margin-top: 0.09cm;
} }
} }
* + h4 {
margin-top : 0.235cm; //(0.325 - 0.09) *+h4 {
margin-top: 0.235cm; //(0.325 - 0.09)
} }
h5{
h5 {
//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-family : ScalySansSmallCapsRemake; font-family: ScalySansSmallCapsRemake;
font-size : 0.423cm; font-size: 0.423cm;
font-weight : 900; font-weight: 900;
line-height : 0.951em; //Font is misaligned. Shift up slightly line-height: 0.951em; //Font is misaligned. Shift up slightly
& + * {
margin-top : 0.2cm; &+* {
margin-top: 0.2cm;
} }
} }
//***************************** //*****************************
// * TABLE // * TABLE
// *****************************/ // *****************************/
table{ table {
.useSansSerif(); .useSansSerif();
width : 100%; width: 100%;
line-height : 16px; line-height: 16px;
& + * {
margin-top : 0.325cm; &+* {
margin-top: 0.325cm;
} }
thead{
thead {
display: table-row-group; display: table-row-group;
font-weight : 800; font-weight: 800;
th{
vertical-align : bottom; 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 padding: 0px 1.5px; // Both of these are temporary, just to force
//line-height : 16px; // PDF to render at same height until Chrome 108 //line-height : 16px; // PDF to render at same height until Chrome 108
} }
} }
tbody{
tr{ tbody {
td{ tr {
td {
//padding : 0.14em 0.4em; //padding : 0.14em 0.4em;
padding : 0px 1.5px; // Both of these are temporary, just to force padding: 0px 1.5px; // Both of these are temporary, just to force
//line-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); &:nth-child(odd) {
background-color: var(--HB_Color_Accent);
} }
} }
} }
} }
//***************************** //*****************************
// * NOTE // * NOTE
// *****************************/ // *****************************/
.note{ .note {
.useSansSerif(); .useSansSerif();
background-color : var(--HB_Color_Accent); background-color: var(--HB_Color_Accent);
border-style : solid; border-style: solid;
border-width : 1px; border-width: 1px;
border-image : @noteBorderImage 12 stretch; border-image: @noteBorderImage 12 stretch;
border-image-outset : 9px 0px; border-image-outset: 9px 0px;
border-image-width : 11px; border-image-width: 11px;
padding : 0.13cm 0.16cm; padding: 0.13cm 0.16cm;
box-shadow : 1px 4px 14px #888; box-shadow: 1px 4px 14px #888;
.page :where(&) { .page :where(&) {
margin-top : 9px; //Prevent top border getting cut off on colbreak margin-top: 9px; //Prevent top border getting cut off on colbreak
} }
& + * {
margin-top : 0.45cm; &+* {
margin-top: 0.45cm;
} }
h5 { h5 {
font-size : 0.375cm; font-size: 0.375cm;
} }
p{
display : block; p {
padding-bottom : 0px; display: block;
padding-bottom: 0px;
} }
:last-child { :last-child {
margin-bottom : 0; margin-bottom: 0;
} }
} }
//************************************ //************************************
// * DESCRIPTIVE TEXT BOX // * DESCRIPTIVE TEXT BOX
// ************************************/ // ************************************/
.descriptive{ .descriptive {
.useSansSerif(); .useSansSerif();
background-color : #faf7ea; background-color: #faf7ea;
border-style : solid; border-style: solid;
border-width : 7px; border-width: 7px;
border-image : @descriptiveBoxImage 12 stretch; border-image: @descriptiveBoxImage 12 stretch;
border-image-outset : 4px; border-image-outset: 4px;
padding : 0.1em; padding: 0.1em;
box-shadow : 0 0 6px #faf7ea; box-shadow: 0 0 6px #faf7ea;
.page :where(&) { .page :where(&) {
margin-top : 4px; //Prevent top border getting cut off on colbreak margin-top: 4px; //Prevent top border getting cut off on colbreak
} }
& + * {
margin-top : 0.45cm; &+* {
margin-top: 0.45cm;
} }
h5 { h5 {
font-size : 0.375cm; font-size: 0.375cm;
} }
p{
display : block; p {
padding-bottom : 0px; display: block;
line-height : 1.5em; padding-bottom: 0px;
line-height: 1.5em;
} }
:last-child { :last-child {
margin-bottom : 0; margin-bottom: 0;
} }
} }
//***************************** //*****************************
// * Images Snippets // * Images Snippets
// *****************************/ // *****************************/
@@ -452,20 +500,21 @@
// *****************************/ // *****************************/
.monster { .monster {
.useSansSerif(); .useSansSerif();
&.frame { &.frame {
border-style : solid; border-style: solid;
border-width : 7px 6px; border-width: 7px 6px;
background-color : var(--HB_Color_MonsterStatBackground); background-color: var(--HB_Color_MonsterStatBackground);
background-image : @monsterBlockBackground; background-image: @monsterBlockBackground;
border-image : @monsterBorderImage 14 round; border-image: @monsterBorderImage 14 round;
border-image-outset : 0px 2px; border-image-outset: 0px 2px;
background-blend-mode : overlay; background-blend-mode: overlay;
background-attachment : fixed; background-attachment: fixed;
box-shadow : 1px 4px 14px #888; box-shadow: 1px 4px 14px #888;
padding : 4px 2px; padding: 4px 2px;
margin-left : -0.16cm; margin-left: -0.16cm;
margin-right : -0.16cm; margin-right: -0.16cm;
width : calc(100% + 0.32cm); width: calc(100% + 0.32cm);
} }
position : relative; position : relative;
@@ -775,168 +824,176 @@
} }
} }
//***************************** //*****************************
// * CLASS TABLE // * CLASS TABLE
// *****************************/ // *****************************/
.page .classTable{ .page .classTable {
th[colspan]:not([rowspan]) { th[colspan]:not([rowspan]) {
white-space : nowrap; white-space: nowrap;
} }
&.frame {
margin-top : 0.7cm; &.frame {
margin-bottom : 0.9cm; margin-top: 0.7cm;
margin-left : -0.1cm; margin-bottom: 0.9cm;
margin-right : -0.1cm; margin-left: -0.1cm;
width : calc(100% + 0.2cm); margin-right: -0.1cm;
border-collapse : separate; width: calc(100% + 0.2cm);
background-color : white; border-collapse: separate;
border : initial; background-color: white;
border-style : solid; border: initial;
border-image-outset : 0.4cm 0.3cm; border-style: solid;
border-image-repeat : stretch; border-image-outset: 0.4cm 0.3cm;
border-image-slice : 200; border-image-repeat: stretch;
border-image-source : @frameBorderImage; border-image-slice: 200;
border-image-width : 47px; border-image-source: @frameBorderImage;
border-image-width: 47px;
&.wide:first-child { &.wide:first-child {
margin-top: 0.12cm; margin-top: 0.12cm;
} }
& + * {
&+* {
margin-top: 0; margin-top: 0;
} }
} }
&.decoration {
position:relative; &.decoration {
} position: relative;
&.decoration::before { }
content :'';
position : absolute; &.decoration::before {
background-image : @classTableDecoration, content: '';
position: absolute;
background-image: @classTableDecoration,
@classTableDecoration; @classTableDecoration;
background-size : contain, contain; background-size: contain, contain;
background-repeat : no-repeat, no-repeat; background-repeat: no-repeat, no-repeat;
background-position : top, bottom; background-position: top, bottom;
width : 7.75cm; width: 7.75cm;
height : calc(100% + 3.3cm); height: calc(100% + 3.3cm);
top : 50%; top: 50%;
left : 50%; left: 50%;
transform : translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
filter : drop-shadow(0px 0px 1px #C8C5C080); filter: drop-shadow(0px 0px 1px #C8C5C080);
z-index : -1; z-index: -1;
} }
&.decoration.wide::before {
width : calc(100% + 3.3cm); &.decoration.wide::before {
height : 7.75cm; width: calc(100% + 3.3cm);
background-position : left, right; height: 7.75cm;
} background-position: left, right;
h5 + table{ }
margin-top : 0.2cm;
} h5+table {
} margin-top: 0.2cm;
//***************************** }
// * COVER PAGE }
// *****************************/
.page:has(.coverPage) { //*****************************
columns : 1; // * COVER PAGE
text-align : center; // *****************************/
.page:has(.coverPage) {
columns: 1;
text-align: center;
&:after { &:after {
all: unset; all: unset;
} }
.logo { .logo {
position : absolute; position: absolute;
top : 0.5cm; top: 0.5cm;
left : 0; left: 0;
right : 0; right: 0;
filter :drop-shadow(0 0 0.075cm black); filter: drop-shadow(0 0 0.075cm black);
img { img {
height : 2cm; height: 2cm;
width : 100%; width: 100%;
} }
} }
.columnWrapper > p img {
position : absolute; .columnWrapper>p img {
bottom : 0; position: absolute;
left : 0; bottom: 0;
height : 100%; left: 0;
min-width : 100%; height: 100%;
z-index : -1; min-width: 100%;
z-index: -1;
} }
h1 { h1 {
text-shadow: unset; text-shadow: unset;
filter : drop-shadow(0 0 1.5px 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);
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) text-transform: uppercase;
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) font-weight: normal;
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black); display: block;
text-transform : uppercase; margin-top: 1.2cm;
font-weight : normal; margin-bottom: 0;
display : block; color: white;
margin-top : 1.2cm; font-family: NodestoCapsCondensed;
margin-bottom : 0; font-size: 2.245cm;
color : white; line-height: 0.85em;
font-family : NodestoCapsCondensed;
font-size : 2.245cm;
line-height : 0.85em;
} }
h2 { h2 {
filter : drop-shadow(0 0 1px 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);
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) font-family: NodestoCapsCondensed;
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) font-weight: normal;
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black); font-size: 0.85cm;
font-family : NodestoCapsCondensed; letter-spacing: 0.1cm;
font-weight : normal; color: white;
font-size : 0.85cm;
letter-spacing : 0.1cm;
color : white;
} }
hr { hr {
display : block; display: block;
position : relative; position: relative;
background-image : @horizontalRule; background-image: @horizontalRule;
background-size : 100% 100%; background-size: 100% 100%;
visibility : visible; visibility: visible;
height : 0.5cm; height: 0.5cm;
width : 12cm; width: 12cm;
border : none; border: none;
margin : auto; margin: auto;
filter : drop-shadow(0 0 3px black); filter: drop-shadow(0 0 3px black);
} }
.banner { .banner {
filter : drop-shadow(2px 2px 2px black); filter: drop-shadow(2px 2px 2px black);
position : absolute; position: absolute;
left : 0; left: 0;
bottom : 4.2cm; bottom: 4.2cm;
background-image : url('/assets/coverPageBanner.svg'); background-image: url('/assets/coverPageBanner.svg');
height : 1.7cm; height: 1.7cm;
width : 10.5cm; width: 10.5cm;
color : white; color: white;
font-family : NodestoCapsCondensed; font-family: NodestoCapsCondensed;
font-weight : normal; font-weight: normal;
font-size : 1cm; font-size: 1cm;
letter-spacing : 0.014cm; letter-spacing: 0.014cm;
text-align : left; text-align: left;
padding-left : 1cm; padding-left: 1cm;
display : flex; display: flex;
justify-content : center; justify-content: center;
flex-direction : column; flex-direction: column;
padding-top : 0.1cm; padding-top: 0.1cm;
} }
.footnote { .footnote {
filter : drop-shadow(0 0 0.7px 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);
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) position: absolute;
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) text-align: center;
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black); color: white;
position : absolute; font-size: 0.496cm;
text-align : center; bottom: 1.3cm;
color : white; left: 0;
font-size : 0.496cm; right: 0;
bottom : 1.3cm; margin-left: auto;
left : 0; margin-right: auto;
right : 0; width: 70%;
margin-left : auto; font-family: Overpass;
margin-right : auto; }
width : 70%;
font-family : Overpass;
} }
}
//***************************** //*****************************
@@ -1075,22 +1132,26 @@ h5 + table{
margin-bottom: 0.325cm; margin-bottom: 0.325cm;
} }
.page h1 + *{ .page h1+* {
margin-top : 0; margin-top: 0;
} }
//***************************** //*****************************
// * RUNE TABLE // * RUNE TABLE
// *****************************/ // *****************************/
.page { .page {
.runeTable { .runeTable {
margin-block: 0.7cm; margin-block: 0.7cm;
table { table {
font-family : inherit; font-family: inherit;
tbody tr { tbody tr {
background: unset; background: unset;
} }
th, td {
th,
td {
width: 1.3cm; width: 1.3cm;
height: 1.3cm; height: 1.3cm;
vertical-align: middle; vertical-align: middle;
@@ -1098,10 +1159,12 @@ h5 + table{
outline: 1px solid #000; outline: 1px solid #000;
font-weight: normal; font-weight: normal;
} }
th{
th {
font-family: BookInsanityRemake; font-family: BookInsanityRemake;
font-size: 0.45cm; font-size: 0.45cm;
} }
td { td {
font-size: 0.7cm; font-size: 0.7cm;
} }
@@ -1117,4 +1180,5 @@ h5 + table{
border-image-width: 1.4cm; border-image-width: 1.4cm;
} }
} }
}
} }