f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-06 18:42:40 +00:00
Code Wiki Activity

Try @Layers to not need .page in user style

Browse Source
This commit is contained in:
Trevor Buckner
2023-01-13 17:08:12 -05:00
parent da676c6ec1
commit a22d59475e
3 changed files with 1009 additions and 1003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -49,7 +49,7 @@ const BrewRenderer = createClass({
initialContent : `<!DOCTYPE html><html><head> initialContent : `<!DOCTYPE html><html><head>
<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" /> <link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" /> <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link href='/homebrew/bundle.css' rel='stylesheet' /> <style>@import url("/homebrew/bundle.css") layer(bundle)</style>
<base target=_blank> <base target=_blank>
</head><body style='overflow: hidden'><div></div></body></html>` </head><body style='overflow: hidden'><div></div></body></html>`
}; };
@@ -134,7 +134,7 @@ const BrewRenderer = createClass({
renderStyle : function() { renderStyle : function() {
if(!this.props.style) return; if(!this.props.style) return;
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />; return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
}, },
renderPage : function(pageText, index){ renderPage : function(pageText, index){

93
themes/V3/5ePHB/style.less
View File

@@ -1,7 +1,9 @@
@import (less) './themes/fonts/5e/fonts.less'; @layer V3_PHB {
@import (less) './themes/assets/assets.less';
:root { @import (less) './themes/fonts/5e/fonts.less';
@import (less) './themes/assets/assets.less';
:root {
//Colors //Colors
--HB_Color_Background : #EEE5CE; // Light parchment --HB_Color_Background : #EEE5CE; // Light parchment
--HB_Color_Accent : #E0E5C1; // Pastel green --HB_Color_Accent : #E0E5C1; // Pastel green
@@ -12,16 +14,16 @@
--HB_Color_CaptionText : #766649; // Brown --HB_Color_CaptionText : #766649; // Brown
--HB_Color_WatercolorStain : #BBAD82; // Light brown --HB_Color_WatercolorStain : #BBAD82; // Light brown
--HB_Color_Footnotes : #C9AD6A; // Gold --HB_Color_Footnotes : #C9AD6A; // Gold
} }
@page { margin: 0; } @page { margin: 0; }
body { body {
counter-reset : phb-page-numbers; counter-reset : phb-page-numbers;
} }
*{ *{
-webkit-print-color-adjust : exact; -webkit-print-color-adjust : exact;
} }
.useSansSerif(){ .useSansSerif(){
font-family : ScalySansRemake; font-family : ScalySansRemake;
font-size : 0.318cm; font-size : 0.318cm;
line-height : 1.2em; line-height : 1.2em;
@@ -41,8 +43,8 @@ body {
h5 + * { h5 + * {
margin-top : 0.1cm; margin-top : 0.1cm;
} }
} }
.useColumns(@multiplier : 1, @fillMode: balance){ .useColumns(@multiplier : 1, @fillMode: balance){
column-count : 2; column-count : 2;
column-fill : @fillMode; column-fill : @fillMode;
column-gap : 0.9cm; column-gap : 0.9cm;
@@ -53,14 +55,14 @@ body {
-moz-column-width : 8cm * @multiplier; -moz-column-width : 8cm * @multiplier;
-webkit-column-gap : 0.9cm; -webkit-column-gap : 0.9cm;
-moz-column-gap : 0.9cm; -moz-column-gap : 0.9cm;
} }
.columnWrapper{ .columnWrapper{
max-height : 100%; max-height : 100%;
column-span : all; column-span : all;
columns : inherit; columns : inherit;
column-gap : inherit; column-gap : inherit;
} }
.page{ .page{
.useColumns(); .useColumns();
counter-increment : phb-page-numbers; counter-increment : phb-page-numbers;
position : relative; position : relative;
@@ -77,12 +79,12 @@ body {
text-rendering : optimizeLegibility; text-rendering : optimizeLegibility;
page-break-before : always; page-break-before : always;
page-break-after : always; page-break-after : always;
} }
//***************************** //*****************************
// * 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;
@@ -592,11 +594,11 @@ body {
page-break-inside : avoid; page-break-inside : avoid;
break-inside : avoid; break-inside : avoid;
} }
} }
//***************************** //*****************************
// * SPELL LIST // * SPELL LIST
// *****************************/ // *****************************/
.page .spellList{ .page .spellList{
.useSansSerif(); .useSansSerif();
column-count : 2; column-count : 2;
ul+h5{ ul+h5{
@@ -618,12 +620,12 @@ body {
&.wide{ &.wide{
column-count : 4; column-count : 4;
} }
} }
//***************************** //*****************************
// * CLASS TABLE // * CLASS TABLE
// *****************************/ // *****************************/
.page .classTable{ .page .classTable{
th[colspan]:not([rowspan]) { th[colspan]:not([rowspan]) {
white-space : nowrap; white-space : nowrap;
} }
@@ -676,11 +678,11 @@ body {
h5 + table{ h5 + table{
margin-top : 0.2cm; margin-top : 0.2cm;
} }
} }
//***************************** //*****************************
// * TABLE OF CONTENTS // * TABLE OF CONTENTS
// *****************************/ // *****************************/
.page { .page {
&:has(.toc):after { &:has(.toc):after {
display: none; display: none;
} }
@@ -752,12 +754,12 @@ body {
.useColumns(0.96, @fillMode: balance); .useColumns(0.96, @fillMode: balance);
} }
} }
} }
//***************************** //*****************************
// * DEFINITION LISTS // * DEFINITION LISTS
// *****************************/ // *****************************/
.page { .page {
dl { dl {
line-height : 1.25em; line-height : 1.25em;
padding-left : 1em; padding-left : 1em;
@@ -782,15 +784,16 @@ body {
margin-left : 0px; margin-left : 0px;
text-indent : 0px; text-indent : 0px;
} }
} }
//***************************** //*****************************
// * WIDE // * WIDE
// *****************************/ // *****************************/
.page .wide{ .page .wide{
margin-bottom : 0.325cm; margin-bottom : 0.325cm;
} }
.page h1 + *{ .page h1 + *{
margin-top : 0; margin-top : 0;
}
} }

75
themes/V3/Blank/style.less
View File

@@ -1,31 +1,33 @@
@import (less) './themes/fonts/5e/fonts.less'; @layer V3_Blank {
@import (less) './themes/assets/assets.less';
:root { @import (less) './themes/fonts/5e/fonts.less';
@import (less) './themes/assets/assets.less';
:root {
//Colors //Colors
--HB_Color_Background : #FFFFFF; // White --HB_Color_Background : #FFFFFF; // White
--HB_Color_WatercolorStain : #000000; // Black --HB_Color_WatercolorStain : #000000; // Black
} }
@page { margin: 0; } @page { margin: 0; }
body { body {
counter-reset : phb-page-numbers; counter-reset : phb-page-numbers;
} }
*{ *{
-webkit-print-color-adjust : exact; -webkit-print-color-adjust : exact;
} }
.useColumns(@multiplier : 1, @fillMode: balance){ .useColumns(@multiplier : 1, @fillMode: balance){
column-fill : @fillMode; column-fill : @fillMode;
column-count : 2; column-count : 2;
} }
.columnWrapper{ .columnWrapper{
max-height : 100%; max-height : 100%;
column-span : all; column-span : all;
columns : inherit; columns : inherit;
column-gap : inherit; column-gap : inherit;
} }
.page{ .page{
.useColumns(); .useColumns();
height : 279.4mm; height : 279.4mm;
width : 215.9mm; width : 215.9mm;
@@ -40,11 +42,11 @@ body {
page-break-before : always; page-break-before : always;
page-break-after : always; page-break-after : always;
contain : size; contain : size;
} }
//***************************** //*****************************
// * BASE // * BASE
// *****************************/ // *****************************/
.page{ .page{
p{ p{
overflow-wrap : break-word; overflow-wrap : break-word;
display : block; display : block;
@@ -211,12 +213,12 @@ body {
page-break-inside : avoid; page-break-inside : avoid;
break-inside : avoid; break-inside : avoid;
} }
} }
//***************************** //*****************************
// * MUSTACHE DIVS/SPANS // * MUSTACHE DIVS/SPANS
// *****************************/ // *****************************/
.page { .page {
.block { .block {
break-inside : avoid; break-inside : avoid;
display : inline-block; display : inline-block;
@@ -226,12 +228,12 @@ body {
display : inline-block; display : inline-block;
text-indent : initial; text-indent : initial;
} }
} }
//***************************** //*****************************
// * DEFINITION LISTS // * DEFINITION LISTS
// *****************************/ // *****************************/
.page { .page {
dl { dl {
padding-left : 1em; padding-left : 1em;
white-space : pre-line; white-space : pre-line;
@@ -246,12 +248,12 @@ body {
margin-left : 0; margin-left : 0;
text-indent : 0; text-indent : 0;
} }
} }
//***************************** //*****************************
// * BLANK LINE // * BLANK LINE
// *****************************/ // *****************************/
.page { .page {
.blank { .blank {
height : 1em; height : 1em;
margin-top : 0; margin-top : 0;
@@ -259,12 +261,12 @@ body {
margin-top : 0; margin-top : 0;
} }
} }
} }
//***************************** //*****************************
// * WIDE // * WIDE
// *****************************/ // *****************************/
.page { .page {
.wide{ .wide{
column-span : all; column-span : all;
display : block; display : block;
@@ -273,4 +275,5 @@ body {
margin-top : 0; margin-top : 0;
} }
} }
}
} }