0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-25 01:02:47 +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,228 +101,276 @@
// * BASE
// *****************************/
.page{
p{
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;
line-height : 1.25em;
list-style-position : outside;
list-style-type : disc;
}
ol{
margin-bottom : 0.8em;
padding-left : 1.4em;
line-height : 1.25em;
list-style-position : outside;
list-style-type : decimal;
}
//Indents after p or lists
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{
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;
font-size : 0.89cm;
line-height : 1em;
-webkit-column-span : all;
-moz-column-span : all;
&+p::first-letter{
float : left;
font-family : SolberaImitationRemake;
line-height : 1em;
font-size : 3.5cm;
padding-left : 40px; //Allow background color to extend into margins
margin-left : -40px;
margin-top : -0.3cm;
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);
}
&+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);;
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;
font-family : ScalySansSmallCapsRemake;
font-size : 0.423cm;
font-weight : 900;
line-height : 0.951em; //Font is misaligned. Shift up slightly
& + * {
margin-top : 0.2cm;
}
}
//*****************************
// * TABLE
// *****************************/
table{
.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;
padding : 0px 1.5px; // Both of these are temporary, just to force
//line-height : 16px; // PDF to render at same height until Chrome 108
.page {
p {
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;
}
}
tbody{
tr{
td{
//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
ul {
margin-bottom: 0.8em;
padding-left: 1.4em;
line-height: 1.25em;
list-style-position: outside;
list-style-type: disc;
}
ol {
margin-bottom: 0.8em;
padding-left: 1.4em;
line-height: 1.25em;
list-style-position: outside;
list-style-type: decimal;
}
//Indents after p or lists
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 {
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;
font-size: 0.89cm;
line-height: 1em;
-webkit-column-span: all;
-moz-column-span: all;
&+p::first-letter {
float: left;
font-family: SolberaImitationRemake;
line-height: 1em;
font-size: 3.5cm;
padding-left: 40px; //Allow background color to extend into margins
margin-left: -40px;
margin-top: -0.3cm;
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);
}
&+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);
;
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;
font-family: ScalySansSmallCapsRemake;
font-size: 0.423cm;
font-weight: 900;
line-height: 0.951em; //Font is misaligned. Shift up slightly
&+* {
margin-top: 0.2cm;
}
}
//*****************************
// * TABLE
// *****************************/
table {
.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;
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);
}
tbody {
tr {
td {
//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);
}
}
}
}
}
//*****************************
// * NOTE
// *****************************/
.note{
.useSansSerif();
background-color : var(--HB_Color_Accent);
border-style : solid;
border-width : 1px;
border-image : @noteBorderImage 12 stretch;
border-image-outset : 9px 0px;
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
//*****************************
// * NOTE
// *****************************/
.note {
.useSansSerif();
background-color: var(--HB_Color_Accent);
border-style: solid;
border-width: 1px;
border-image: @noteBorderImage 12 stretch;
border-image-outset: 9px 0px;
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;
}
}
& + * {
margin-top : 0.45cm;
//************************************
// * DESCRIPTIVE TEXT BOX
// ************************************/
.descriptive {
.useSansSerif();
background-color: #faf7ea;
border-style: solid;
border-width: 7px;
border-image: @descriptiveBoxImage 12 stretch;
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;
}
}
h5 {
font-size : 0.375cm;
}
p{
display : block;
padding-bottom : 0px;
}
:last-child {
margin-bottom : 0;
}
}
//************************************
// * DESCRIPTIVE TEXT BOX
// ************************************/
.descriptive{
.useSansSerif();
background-color : #faf7ea;
border-style : solid;
border-width : 7px;
border-image : @descriptiveBoxImage 12 stretch;
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
// *****************************/
//*****************************
// * Images Snippets
// *****************************/
/* Arist Credit */
.artist {
@@ -447,26 +495,27 @@
--wc: @watercolor12;
}
//*****************************
// * MONSTER STAT BLOCK
// *****************************/
.monster {
.useSansSerif();
&.frame {
border-style : solid;
border-width : 7px 6px;
background-color : var(--HB_Color_MonsterStatBackground);
background-image : @monsterBlockBackground;
border-image : @monsterBorderImage 14 round;
border-image-outset : 0px 2px;
background-blend-mode : overlay;
background-attachment : fixed;
box-shadow : 1px 4px 14px #888;
padding : 4px 2px;
margin-left : -0.16cm;
margin-right : -0.16cm;
width : calc(100% + 0.32cm);
}
//*****************************
// * MONSTER STAT BLOCK
// *****************************/
.monster {
.useSansSerif();
&.frame {
border-style: solid;
border-width: 7px 6px;
background-color: var(--HB_Color_MonsterStatBackground);
background-image: @monsterBlockBackground;
border-image: @monsterBorderImage 14 round;
border-image-outset: 0px 2px;
background-blend-mode: overlay;
background-attachment: fixed;
box-shadow: 1px 4px 14px #888;
padding: 4px 2px;
margin-left: -0.16cm;
margin-right: -0.16cm;
width: calc(100% + 0.32cm);
}
position : relative;
padding : 0px;
@@ -775,168 +824,176 @@
}
}
//*****************************
// * CLASS TABLE
// *****************************/
.page .classTable{
th[colspan]:not([rowspan]) {
white-space : nowrap;
}
&.frame {
margin-top : 0.7cm;
margin-bottom : 0.9cm;
margin-left : -0.1cm;
margin-right : -0.1cm;
width : calc(100% + 0.2cm);
border-collapse : separate;
background-color : white;
border : initial;
border-style : solid;
border-image-outset : 0.4cm 0.3cm;
border-image-repeat : stretch;
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;
background-image : @classTableDecoration,
@classTableDecoration;
background-size : contain, contain;
background-repeat : no-repeat, no-repeat;
background-position : top, bottom;
width : 7.75cm;
height : calc(100% + 3.3cm);
top : 50%;
left : 50%;
transform : translateY(-50%) translateX(-50%);
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%;
//*****************************
// * CLASS TABLE
// *****************************/
.page .classTable {
th[colspan]:not([rowspan]) {
white-space: nowrap;
}
&.frame {
margin-top: 0.7cm;
margin-bottom: 0.9cm;
margin-left: -0.1cm;
margin-right: -0.1cm;
width: calc(100% + 0.2cm);
border-collapse: separate;
background-color: white;
border: initial;
border-style: solid;
border-image-outset: 0.4cm 0.3cm;
border-image-repeat: stretch;
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;
background-image: @classTableDecoration,
@classTableDecoration;
background-size: contain, contain;
background-repeat: no-repeat, no-repeat;
background-position: top, bottom;
width: 7.75cm;
height: calc(100% + 3.3cm);
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
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;
}
}
.columnWrapper > p img {
position : absolute;
bottom : 0;
left : 0;
height : 100%;
min-width : 100%;
z-index : -1;
//*****************************
// * 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;
left: 0;
height: 100%;
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);
text-transform: uppercase;
font-weight: normal;
display: block;
margin-top: 1.2cm;
margin-bottom: 0;
color: white;
font-family: NodestoCapsCondensed;
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);
font-family: NodestoCapsCondensed;
font-weight: normal;
font-size: 0.85cm;
letter-spacing: 0.1cm;
color: white;
}
hr {
display: block;
position: relative;
background-image: @horizontalRule;
background-size: 100% 100%;
visibility: visible;
height: 0.5cm;
width: 12cm;
border: none;
margin: auto;
filter: drop-shadow(0 0 3px black);
}
.banner {
filter: drop-shadow(2px 2px 2px black);
position: absolute;
left: 0;
bottom: 4.2cm;
background-image: url('/assets/coverPageBanner.svg');
height: 1.7cm;
width: 10.5cm;
color: white;
font-family: NodestoCapsCondensed;
font-weight: normal;
font-size: 1cm;
letter-spacing: 0.014cm;
text-align: left;
padding-left: 1cm;
display: flex;
justify-content: center;
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);
position: absolute;
text-align: center;
color: white;
font-size: 0.496cm;
bottom: 1.3cm;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: Overpass;
}
}
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);
text-transform : uppercase;
font-weight : normal;
display : block;
margin-top : 1.2cm;
margin-bottom : 0;
color : white;
font-family : NodestoCapsCondensed;
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);
font-family : NodestoCapsCondensed;
font-weight : normal;
font-size : 0.85cm;
letter-spacing : 0.1cm;
color : white;
}
hr {
display : block;
position : relative;
background-image : @horizontalRule;
background-size : 100% 100%;
visibility : visible;
height : 0.5cm;
width : 12cm;
border : none;
margin : auto;
filter : drop-shadow(0 0 3px black);
}
.banner {
filter : drop-shadow(2px 2px 2px black);
position : absolute;
left : 0;
bottom : 4.2cm;
background-image : url('/assets/coverPageBanner.svg');
height : 1.7cm;
width : 10.5cm;
color : white;
font-family : NodestoCapsCondensed;
font-weight : normal;
font-size : 1cm;
letter-spacing : 0.014cm;
text-align : left;
padding-left : 1cm;
display : flex;
justify-content : center;
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);
position : absolute;
text-align : center;
color : white;
font-size : 0.496cm;
bottom : 1.3cm;
left : 0;
right : 0;
margin-left : auto;
margin-right : auto;
width : 70%;
font-family : Overpass;
}
}
//*****************************
@@ -1075,46 +1132,53 @@ h5 + table{
margin-bottom: 0.325cm;
}
.page h1 + *{
margin-top : 0;
}
.page h1+* {
margin-top: 0;
}
//*****************************
// * RUNE TABLE
// *****************************/
.page {
.runeTable {
margin-block: 0.7cm;
table {
font-family : inherit;
tbody tr {
background: unset;
}
th, td {
width: 1.3cm;
height: 1.3cm;
vertical-align: middle;
text-transform: uppercase;
outline: 1px solid #000;
font-weight: normal;
}
th{
font-family: BookInsanityRemake;
font-size: 0.45cm;
}
td {
font-size: 0.7cm;
}
}
//*****************************
// * RUNE TABLE
// *****************************/
.page {
.runeTable {
margin-block: 0.7cm;
&.frame {
border: initial;
border-style: solid;
border-image-outset: .45cm .35cm .4cm .4cm;
border-image-repeat: stretch;
border-image-slice: 170;
border-image-source: @scriptBorder;
border-image-width: 1.4cm;
table {
font-family: inherit;
tbody tr {
background: unset;
}
th,
td {
width: 1.3cm;
height: 1.3cm;
vertical-align: middle;
text-transform: uppercase;
outline: 1px solid #000;
font-weight: normal;
}
th {
font-family: BookInsanityRemake;
font-size: 0.45cm;
}
td {
font-size: 0.7cm;
}
}
&.frame {
border: initial;
border-style: solid;
border-image-outset: .45cm .35cm .4cm .4cm;
border-image-repeat: stretch;
border-image-slice: 170;
border-image-source: @scriptBorder;
border-image-width: 1.4cm;
}
}
}
}
}