0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-02 12:52:38 +00:00

Change note block to div, restyle notes and descript boxes

This commit is contained in:
Trevor Buckner
2021-07-20 23:32:49 -04:00
parent 3ed4ceb7a3
commit 8f34e8bb2d
2 changed files with 84 additions and 75 deletions

View File

@@ -19,9 +19,12 @@ body {
font-family : ScalySansRemake;
font-size : 0.325cm;
line-height : 1.2em;
p,dl,ul {
p,dl,ul,ol {
line-height : 1.2em;
}
ul, ol {
padding-left : 1em;
}
em{
font-style : italic;
}
@@ -64,10 +67,10 @@ body {
// *****************************/
p{
overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
margin-bottom : 1em;
margin-bottom : 0.8em;
line-height : 1.3em;
&+p{
margin-top : -1em;
margin-top : -0.8em;
}
}
ul{
@@ -194,31 +197,75 @@ body {
//*****************************
// * NOTE
// *****************************/
blockquote{
.note{
&::before{
content : "";
box-sizing : border-box;
border-style : solid;
border-width : 11px;
border-image : @noteBorderImage 12;
border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888;
position : absolute;
width : 100%;
height : 100%;
top : 0;
left : 0;
}
.useSansSerif();
box-sizing : border-box;
margin-bottom : 1em;
padding : 5px 10px;
position : relative;
margin-top : 1.3em;
margin-left : -0.1em;
margin-right : -0.1em;
background-color : @noteGreen;
border-style : solid;
border-width : 11px;
border-image : @noteBorderImage 11;
border-image-outset : 9px 0px;
box-shadow : 1px 4px 14px #888;
-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
p, ul{
font-size : 0.352cm;
line-height : 1.1em;
padding : 0.5em 0.6em;
& + * {
margin-top : 1.3em;
}
p{
display : block;
padding-bottom : 0px;
}
p + p {
padding-top : .8em;
}
:last-child {
margin-bottom : 0em;
}
}
//If a note starts a column, give it space at the top to render border
pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
margin-top : 13px;
//************************************
// * DESCRIPTIVE TEXT BOX
// ************************************/
.descriptive{
.useSansSerif();
display : block-inline;
margin-top : 1.4em;
background-color : #faf7ea;
font-family : ScalySansRemake;
border-style : solid;
border-width : 7px;
border-image : @descriptiveBoxImage 12 stretch;
border-image-outset : 4px;
box-shadow : 0px 0px 6px #faf7ea;
padding : 0.1em;
& + * {
margin-top : 1.4em;
}
p{
display : block;
padding-bottom : 0px;
line-height : 1.5em;
}
p + p {
padding-top : .8em;
}
:last-child {
margin-bottom : 0em;
}
}
//*****************************
// * MONSTER STAT BLOCK
// *****************************/
.monster {
&.frame {
border-style : solid;
@@ -459,47 +506,6 @@ body {
margin-bottom : 10px;
}
}
//************************************
// * DESCRIPTIVE TEXT BOX
// ************************************/
.page .descriptive{
display : block-inline;
margin-top : 1.3em;
background-color : #faf7ea;
font-family : ScalySansRemake;
border-style : solid;
border-width : 7px;
border-image : @descriptiveBoxImage 12 stretch;
border-image-outset : 4px;
box-shadow : 0px 0px 6px #faf7ea;
padding : 0.1em;
& + * {
margin-top : 1.3em;
}
p{
display : block;
padding-bottom : 0px;
line-height : 1.5em;
}
p + p {
padding-top : .8em;
}
p:last-of-type {
margin-bottom : 0em;
}
em {
font-family : ScalySansRemake;
font-style : italic;
}
strong {
font-family : ScalySansRemake;
font-weight : 800;
letter-spacing : -0.02em;
}
}
.page pre+.descriptive{
margin-top : 8px;
}
//*****************************
// * TABLE OF CONTENTS
// *****************************/
@@ -570,6 +576,7 @@ body {
.page {
.block {
break-inside : avoid;
-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
}
.inline {
display : inline-block;