mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-24 20:42:43 +00:00
Merge pull request #1651 from naturalcrit/FixV3MiscStylesBeforeLaunch
Fix v3 misc styles before launch
This commit is contained in:
@@ -131,7 +131,7 @@ const BrewRenderer = createClass({
|
||||
if(this.props.renderer == 'legacy')
|
||||
return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
|
||||
else {
|
||||
pageText += `\n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
|
||||
pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
|
||||
return (
|
||||
<div className='page' id={`p${index + 1}`} key={index} >
|
||||
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
|
||||
|
||||
@@ -60,13 +60,13 @@ module.exports = {
|
||||
const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];
|
||||
|
||||
const content = _.map(levels, (level)=>{
|
||||
const spells = _.map(_.sampleSize(spellNames, _.random(5, 15)), (spell)=>{
|
||||
const spells = _.map(_.sampleSize(spellNames, _.random(4, 10)), (spell)=>{
|
||||
return `- ${spell}`;
|
||||
}).join('\n');
|
||||
return `##### ${level} \n${spells} \n`;
|
||||
}).join('\n');
|
||||
|
||||
return `{{spellList\n${content}\n}}`;
|
||||
return `{{spellList,wide\n${content}\n}}`;
|
||||
},
|
||||
|
||||
spell : function(){
|
||||
|
||||
@@ -47,7 +47,7 @@ If you want to save ink or have a monochrome printer, add the {{fas,fa-tint}} **
|
||||
## New in V3.0.0
|
||||
With the latest major update to *The Homebrewery* we've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like `div` and `span` in most cases. No raw HTML tags should be needed in a brew, and going forward, raw HTML will no longer receive debugging support (*but can still be used if you insist*).
|
||||
|
||||
All brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew. Much of the syntax and styling has changed in V3, so code in one version may be broken in the other.
|
||||
Much of the syntax and styling has changed in V3. Code in one version may be broken in the other, and updating an older brew to V3 will require more than just a copy and paste. *However*, all brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "Legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew at any time.
|
||||
|
||||
Scroll down to the next page for a brief summary of the changes and new features available in V3!
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@ const PrintPage = createClass({
|
||||
});
|
||||
} else {
|
||||
return _.map(this.state.brewText.split(/^\\page$/gm), (pageText, index)=>{
|
||||
pageText += `\n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
|
||||
pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
|
||||
return (
|
||||
<div className='page' id={`p${index + 1}`} key={index} >
|
||||
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
|
||||
|
||||
@@ -174,13 +174,16 @@ const mustacheInjectBlock = {
|
||||
lastToken.originalType = 'mustacheInjectBlock';
|
||||
lastToken.tags = ` ${processStyleTags(match[1])}`;
|
||||
return {
|
||||
type : 'text', // Should match "name" above
|
||||
raw : match[0], // Text to consume from the source
|
||||
type : 'mustacheInjectBlock', // Should match "name" above
|
||||
raw : match[0], // Text to consume from the source
|
||||
text : ''
|
||||
};
|
||||
}
|
||||
},
|
||||
renderer(token) {
|
||||
if(!token.originalType){
|
||||
return;
|
||||
}
|
||||
token.type = token.originalType;
|
||||
const text = this.parser.parse([token]);
|
||||
const openingTag = /(<[^\s<>]+)([^\n<>]*>.*)/s.exec(text);
|
||||
|
||||
@@ -19,7 +19,7 @@ body {
|
||||
}
|
||||
.useSansSerif(){
|
||||
font-family : ScalySansRemake;
|
||||
font-size : 0.325cm;
|
||||
font-size : 0.318cm;
|
||||
line-height : 1.2em;
|
||||
p,dl,ul,ol {
|
||||
line-height : 1.2em;
|
||||
@@ -51,6 +51,7 @@ body {
|
||||
max-height : 100%;
|
||||
column-span : all;
|
||||
columns : inherit;
|
||||
column-gap : inherit;
|
||||
}
|
||||
.page{
|
||||
.useColumns();
|
||||
@@ -184,7 +185,7 @@ body {
|
||||
.useSansSerif();
|
||||
width : 100%;
|
||||
& + * {
|
||||
margin-top : 1em;
|
||||
margin-top : 0.27cm;
|
||||
}
|
||||
thead{
|
||||
display: table-row-group;
|
||||
@@ -209,29 +210,21 @@ body {
|
||||
// * NOTE
|
||||
// *****************************/
|
||||
.note{
|
||||
&::before{
|
||||
content : "";
|
||||
box-sizing : border-box;
|
||||
border-style : solid;
|
||||
border-width : 11px;
|
||||
border-image : @noteBorderImage 12;
|
||||
border-image-outset : 9px 0px;
|
||||
position : absolute;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
top : 0;
|
||||
left : 0;
|
||||
}
|
||||
.useSansSerif();
|
||||
position : relative;
|
||||
margin-top : 1.3em;
|
||||
margin-left : -0.1em;
|
||||
margin-right : -0.1em;
|
||||
background-color : @noteGreen;
|
||||
border-style : solid;
|
||||
border-width : 1px;
|
||||
border-image : @noteBorderImage 12 stretch;
|
||||
border-image-outset : 9px 0px;
|
||||
border-image-width : 11px;
|
||||
margin-top : 9px; //Prevent top border getting cut off on colbreak
|
||||
padding : 0.13cm 0.16cm;
|
||||
filter : drop-shadow(1px 4px 6px #888);
|
||||
padding : 0.5em 0.6em;
|
||||
& + * {
|
||||
margin-top : 1.3em;
|
||||
margin-top : 0.45cm;
|
||||
}
|
||||
h5 {
|
||||
font-size : 0.375cm;
|
||||
}
|
||||
p{
|
||||
display : block;
|
||||
@@ -241,7 +234,7 @@ body {
|
||||
padding-top : .8em;
|
||||
}
|
||||
:last-child {
|
||||
margin-bottom : 0em;
|
||||
margin-bottom : 0;
|
||||
}
|
||||
}
|
||||
//************************************
|
||||
@@ -249,18 +242,19 @@ body {
|
||||
// ************************************/
|
||||
.descriptive{
|
||||
.useSansSerif();
|
||||
display : inline-block;
|
||||
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;
|
||||
filter : drop-shadow(0 0 3px #faf7ea);
|
||||
margin-top : 4px; //Prevent top border getting cut off on colbreak
|
||||
padding : 0.1em;
|
||||
filter : drop-shadow(0 0 3px #faf7ea);
|
||||
& + * {
|
||||
margin-top : 1.4em;
|
||||
margin-top : 0.45cm;
|
||||
}
|
||||
h5 {
|
||||
font-size : 0.375cm;
|
||||
}
|
||||
p{
|
||||
display : block;
|
||||
@@ -271,7 +265,7 @@ body {
|
||||
padding-top : .8em;
|
||||
}
|
||||
:last-child {
|
||||
margin-bottom : 0em;
|
||||
margin-bottom : 0;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
@@ -355,12 +349,6 @@ body {
|
||||
.watercolor11 { --wc : @watercolor11; }
|
||||
.watercolor12 { --wc : @watercolor12; }
|
||||
|
||||
img {
|
||||
z-index: 2 !important;
|
||||
filter : drop-shadow(0px 6px 6px rgba(0,0,0,.4));
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * MONSTER STAT BLOCK
|
||||
// *****************************/
|
||||
@@ -380,7 +368,6 @@ body {
|
||||
margin : 0px -6px 1em;
|
||||
}
|
||||
|
||||
//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns, but breaks internal columns...
|
||||
position : relative;
|
||||
padding : 0px;
|
||||
margin-bottom : 1em;
|
||||
@@ -520,14 +507,17 @@ body {
|
||||
|
||||
pre code{
|
||||
width : 100%;
|
||||
display : block;
|
||||
border : 4px solid;
|
||||
display : inline-block;
|
||||
border-style : solid;
|
||||
border-width : 1px;
|
||||
border-image : @codeBorderImage 26 stretch;
|
||||
border-image-width : 10px;
|
||||
border-image-outset : 2px;
|
||||
border-radius : 12px;
|
||||
margin-top : 2px; //Prevent top border getting cut off on colbreak
|
||||
margin-bottom : 2px;
|
||||
& + * {
|
||||
margin-top : 1em;
|
||||
margin-top : 0.27cm;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
@@ -537,22 +527,12 @@ body {
|
||||
visibility : hidden;
|
||||
margin : 0px;
|
||||
}
|
||||
//Modified unorder list, used in spells
|
||||
hr+ul{
|
||||
margin-bottom : 0.5em;
|
||||
padding-left : 1em;
|
||||
text-indent : -1em;
|
||||
list-style-type : none;
|
||||
}
|
||||
.columnSplit {
|
||||
visibility : hidden;
|
||||
-webkit-column-break-after : always;
|
||||
break-after : always;
|
||||
-moz-column-break-after : always;
|
||||
break-before : column;
|
||||
&+* {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
//Avoid breaking up
|
||||
blockquote,table{
|
||||
@@ -561,10 +541,6 @@ body {
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
//Better spacing for spell blocks
|
||||
h4+p+hr+ul{
|
||||
margin-top : -0.5em
|
||||
}
|
||||
//Text indent right after table
|
||||
table+p{
|
||||
text-indent : 1em;
|
||||
@@ -585,10 +561,7 @@ body {
|
||||
// *****************************/
|
||||
.page .spellList{
|
||||
.useSansSerif();
|
||||
column-count : 4;
|
||||
column-span : all;
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
column-count : 2;
|
||||
ul+h5{
|
||||
margin-top : 15px;
|
||||
}
|
||||
@@ -605,20 +578,11 @@ body {
|
||||
page-break-inside : auto;
|
||||
break-inside : auto;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide{
|
||||
column-span : all;
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
display : block;
|
||||
margin-bottom : 0.34cm;
|
||||
&+* {
|
||||
margin-top : 0;
|
||||
&.wide{
|
||||
column-count : 4;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
@@ -744,16 +708,15 @@ body {
|
||||
// *****************************/
|
||||
.page {
|
||||
.block {
|
||||
break-inside : avoid;
|
||||
-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
|
||||
break-inside : avoid;
|
||||
display : inline-block;
|
||||
min-width : 100%;
|
||||
//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
|
||||
}
|
||||
.inline-block {
|
||||
display : inline-block;
|
||||
text-indent : initial;
|
||||
}
|
||||
div {
|
||||
column-gap : 0.5cm; //Default spacing if a div uses multicolumns
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
@@ -799,3 +762,17 @@ body {
|
||||
margin-top: -1em;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide{
|
||||
column-span : all;
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
display : block;
|
||||
margin-bottom : 0.34cm;
|
||||
&+* {
|
||||
margin-top : 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user