f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-25 01:02:47 +00:00
Code Wiki Activity

Change note block to div, restyle notes and descript boxes

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

30
client/homebrew/editor/snippetbar/snippets/snippets.js
View File

@@ -146,26 +146,28 @@ module.exports = [
name : 'Note',
icon : 'fas fa-sticky-note',
gen : function(){
return [
'> ##### Time to Drop Knowledge',
'> Use notes to point out some interesting information. ',
'> ',
'> **Tables and lists** both work within a note.'
].join('\n');
return dedent`
{{note
##### Time to Drop Knowledge',
Use notes to point out some interesting information.
**Tables and lists** both work within a note.
}}
\n`;
},
},
{
name : 'Descriptive Text Box',
icon : 'fas fa-comment-alt',
gen : function(){
return [
'{{descriptive',
'##### Time to Drop Knowledge',
'Use notes to point out some interesting information. ',
'',
'**Tables and lists** both work within a note.',
'}}'
].join('\n');
return dedent`
{{descriptive
##### Time to Drop Knowledge
Use descriptive boxes to highlight text that should be read aloud.
**Tables and lists** both work within a descriptive box.
}}
\n`;
},
},
{

129
themes/5ePhb.style.less
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;