mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-24 16:22:44 +00:00
Add Styles for Forced Justifcation Tokens
This commit is contained in:
David Bolack
@@ -503,4 +503,23 @@ body { counter-reset : page-numbers 0; }
|
||||
counter-increment : page-numbers;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//* Forced Justification
|
||||
//* DELETE WHEN V4 GOES LIVE
|
||||
//*****************************/
|
||||
|
||||
.page {
|
||||
.mdParagraphJustifyLeft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mdParagraphJustifyRight {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mdParagraphJustifyCenter {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
themes/V4/Blank/dropdownPreview.png
Normal file
BIN
themes/V4/Blank/dropdownPreview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
BIN
themes/V4/Blank/dropdownTexture.png
Normal file
BIN
themes/V4/Blank/dropdownTexture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 B |
6
themes/V4/Blank/settings.json
Normal file
6
themes/V4/Blank/settings.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name" : "Blank",
|
||||
"renderer" : "V3",
|
||||
"baseTheme" : false,
|
||||
"baseSnippets" : false
|
||||
}
|
||||
506
themes/V4/Blank/snippets.js
Normal file
506
themes/V4/Blank/snippets.js
Normal file
@@ -0,0 +1,506 @@
|
||||
/* eslint-disable max-lines */
|
||||
|
||||
const WatercolorGen = require('./snippets/watercolor.gen.js');
|
||||
const ImageMaskGen = require('./snippets/imageMask.gen.js');
|
||||
const FooterGen = require('./snippets/footer.gen.js');
|
||||
const dedent = require('dedent-tabs').default;
|
||||
|
||||
module.exports = [
|
||||
|
||||
{
|
||||
groupName : 'Text Editor',
|
||||
icon : 'fas fa-pencil-alt',
|
||||
view : 'text',
|
||||
snippets : [
|
||||
{
|
||||
name : 'Column Break',
|
||||
icon : 'fas fa-columns',
|
||||
gen : '\n\\column\n'
|
||||
},
|
||||
{
|
||||
name : 'New Page',
|
||||
icon : 'fas fa-file-alt',
|
||||
gen : '\n\\page\n'
|
||||
},
|
||||
{
|
||||
name : 'Page Numbering',
|
||||
icon : 'fas fa-bookmark',
|
||||
subsnippets : [
|
||||
{
|
||||
name : 'Page Number',
|
||||
icon : 'fas fa-bookmark',
|
||||
gen : '{{pageNumber 1}}\n'
|
||||
},
|
||||
{
|
||||
name : 'Auto-incrementing Page Number',
|
||||
icon : 'fas fa-sort-numeric-down',
|
||||
gen : '{{pageNumber,auto}}\n'
|
||||
},
|
||||
{
|
||||
name : 'Skip Page Number Increment this Page',
|
||||
icon : 'fas fa-xmark',
|
||||
gen : '{{skipCounting}}\n'
|
||||
},
|
||||
{
|
||||
name : 'Restart Numbering',
|
||||
icon : 'fas fa-arrow-rotate-left',
|
||||
gen : '{{resetCounting}}\n'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name : 'Footer',
|
||||
icon : 'fas fa-shoe-prints',
|
||||
gen : FooterGen.createFooterFunc(),
|
||||
subsnippets : [
|
||||
{
|
||||
name : 'Footer from H1',
|
||||
icon : 'fas fa-dice-one',
|
||||
gen : FooterGen.createFooterFunc(1)
|
||||
},
|
||||
{
|
||||
name : 'Footer from H2',
|
||||
icon : 'fas fa-dice-two',
|
||||
gen : FooterGen.createFooterFunc(2)
|
||||
},
|
||||
{
|
||||
name : 'Footer from H3',
|
||||
icon : 'fas fa-dice-three',
|
||||
gen : FooterGen.createFooterFunc(3)
|
||||
},
|
||||
{
|
||||
name : 'Footer from H4',
|
||||
icon : 'fas fa-dice-four',
|
||||
gen : FooterGen.createFooterFunc(4)
|
||||
},
|
||||
{
|
||||
name : 'Footer from H5',
|
||||
icon : 'fas fa-dice-five',
|
||||
gen : FooterGen.createFooterFunc(5)
|
||||
},
|
||||
{
|
||||
name : 'Footer from H6',
|
||||
icon : 'fas fa-dice-six',
|
||||
gen : FooterGen.createFooterFunc(6)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name : 'Vertical Spacing',
|
||||
icon : 'fas fa-arrows-alt-v',
|
||||
gen : '\n::::\n'
|
||||
},
|
||||
{
|
||||
name : 'Horizontal Spacing',
|
||||
icon : 'fas fa-arrows-alt-h',
|
||||
gen : ' {{width:100px}} '
|
||||
},
|
||||
{
|
||||
name : 'Wide Block',
|
||||
icon : 'fas fa-window-maximize',
|
||||
gen : dedent`\n
|
||||
{{wide
|
||||
Everything in here will be extra wide. Tables, text, everything!
|
||||
Beware though, CSS columns can behave a bit weird sometimes. You may
|
||||
have to manually place column breaks with \`\column\` to make the
|
||||
surrounding text flow with this wide block the way you want.
|
||||
}}
|
||||
\n`
|
||||
},
|
||||
{
|
||||
name : 'QR Code',
|
||||
icon : 'fas fa-qrcode',
|
||||
gen : (brew)=>{
|
||||
return `![]` +
|
||||
`(https://api.qrserver.com/v1/create-qr-code/?data=` +
|
||||
`https://homebrewery.naturalcrit.com${brew.shareId ? `/share/${brew.shareId}` : ''}` +
|
||||
`&size=100x100) {width:100px;mix-blend-mode:multiply}`;
|
||||
}
|
||||
},
|
||||
{
|
||||
name : 'Link to page',
|
||||
icon : 'fas fa-link',
|
||||
gen : '[Click here](#p3) to go to page 3\n'
|
||||
},
|
||||
{
|
||||
name : 'Add Comment',
|
||||
icon : 'fas fa-code',
|
||||
gen : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
|
||||
},
|
||||
{
|
||||
name : 'Homebrewery Credit',
|
||||
icon : 'fas fa-dice-d20',
|
||||
gen : function(){
|
||||
return dedent`
|
||||
{{homebreweryCredits
|
||||
Made With
|
||||
|
||||
{{homebreweryIcon}}
|
||||
|
||||
The Homebrewery
|
||||
[Homebrewery.Naturalcrit.com](https://homebrewery.naturalcrit.com)
|
||||
}}\n\n`;
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName : 'Style Editor',
|
||||
icon : 'fas fa-pencil-alt',
|
||||
view : 'style',
|
||||
snippets : [
|
||||
{
|
||||
name : 'Add Comment',
|
||||
icon : 'fas fa-code',
|
||||
gen : '/* This is a comment that will not be rendered into your brew. */'
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
/*********************** IMAGES *******************/
|
||||
{
|
||||
groupName : 'Images',
|
||||
icon : 'fas fa-images',
|
||||
view : 'text',
|
||||
snippets : [
|
||||
{
|
||||
name : 'Image',
|
||||
icon : 'fas fa-image',
|
||||
gen : dedent`
|
||||
 {width:325px,mix-blend-mode:multiply}`
|
||||
},
|
||||
{
|
||||
name : 'Image Wrap Left',
|
||||
icon : 'fac image-wrap-left',
|
||||
gen : dedent`
|
||||
 {width:280px,margin-right:-3cm,wrapLeft}`
|
||||
},
|
||||
{
|
||||
name : 'Image Wrap Right',
|
||||
icon : 'fac image-wrap-right',
|
||||
gen : dedent`
|
||||
 {width:280px,margin-left:-3cm,wrapRight}`
|
||||
},
|
||||
{
|
||||
name : 'Background Image',
|
||||
icon : 'fas fa-tree',
|
||||
gen : dedent`
|
||||
 {position:absolute,top:50px,right:30px,width:280px}`
|
||||
},
|
||||
{
|
||||
name : 'Watercolor Splatter',
|
||||
icon : 'fas fa-fill-drip',
|
||||
gen : WatercolorGen,
|
||||
},
|
||||
{
|
||||
name : 'Watercolor Center',
|
||||
icon : 'fac mask-center',
|
||||
gen : ImageMaskGen.center,
|
||||
experimental : true,
|
||||
},
|
||||
{
|
||||
name : 'Watercolor Edge',
|
||||
icon : 'fac mask-edge',
|
||||
gen : ImageMaskGen.edge('bottom'),
|
||||
experimental : true,
|
||||
subsnippets : [
|
||||
{
|
||||
name : 'Top',
|
||||
icon : 'fac position-top',
|
||||
gen : ImageMaskGen.edge('top'),
|
||||
},
|
||||
{
|
||||
name : 'Right',
|
||||
icon : 'fac position-right',
|
||||
gen : ImageMaskGen.edge('right'),
|
||||
},
|
||||
{
|
||||
name : 'Bottom',
|
||||
icon : 'fac position-bottom',
|
||||
gen : ImageMaskGen.edge('bottom'),
|
||||
},
|
||||
{
|
||||
name : 'Left',
|
||||
icon : 'fac position-left',
|
||||
gen : ImageMaskGen.edge('left'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name : 'Watercolor Corner',
|
||||
icon : 'fac mask-corner',
|
||||
gen : ImageMaskGen.corner,
|
||||
experimental : true,
|
||||
subsnippets : [
|
||||
{
|
||||
name : 'Top-Left',
|
||||
icon : 'fac position-top-left',
|
||||
gen : ImageMaskGen.corner('top', 'left'),
|
||||
},
|
||||
{
|
||||
name : 'Top-Right',
|
||||
icon : 'fac position-top-right',
|
||||
gen : ImageMaskGen.corner('top', 'right'),
|
||||
},
|
||||
{
|
||||
name : 'Bottom-Left',
|
||||
icon : 'fac position-bottom-left',
|
||||
gen : ImageMaskGen.corner('bottom', 'left'),
|
||||
},
|
||||
{
|
||||
name : 'Bottom-Right',
|
||||
icon : 'fac position-bottom-right',
|
||||
gen : ImageMaskGen.corner('bottom', 'right'),
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name : 'Watermark',
|
||||
icon : 'fas fa-id-card',
|
||||
gen : dedent`
|
||||
{{watermark Homebrewery}}\n`
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
/********************* TABLES *********************/
|
||||
|
||||
{
|
||||
groupName : 'Tables',
|
||||
icon : 'fas fa-table',
|
||||
view : 'text',
|
||||
snippets : [
|
||||
{
|
||||
name : 'Table',
|
||||
icon : 'fas fa-th-list',
|
||||
gen : function(){
|
||||
return dedent`
|
||||
##### Character Advancement
|
||||
| Experience Points | Level | Proficiency Bonus |
|
||||
|:------------------|:-----:|:-----------------:|
|
||||
| 0 | 1 | +2 |
|
||||
| 300 | 2 | +2 |
|
||||
| 900 | 3 | +2 |
|
||||
| 2,700 | 4 | +2 |
|
||||
| 6,500 | 5 | +3 |
|
||||
| 14,000 | 6 | +3 |
|
||||
\n`;
|
||||
}
|
||||
},
|
||||
{
|
||||
name : 'Wide Table',
|
||||
icon : 'fas fa-list',
|
||||
gen : function(){
|
||||
return dedent`
|
||||
{{wide
|
||||
##### Weapons
|
||||
| Name | Cost | Damage | Weight | Properties |
|
||||
|:------------------------|:-----:|:----------------|--------:|:-----------|
|
||||
| *Simple Melee Weapons* | | | | |
|
||||
|   Club | 1 sp | 1d4 bludgeoning | 2 lb. | Light |
|
||||
|   Dagger | 2 gp | 1d4 piercing | 1 lb. | Finesse |
|
||||
|   Spear | 1 gp | 1d6 piercing | 3 lb. | Thrown |
|
||||
| *Simple Ranged Weapons* | | | | |
|
||||
|   Dart | 5 cp | 1d4 piercig | 1/4 lb. | Finesse |
|
||||
|   Shortbow | 25 gp | 1d6 piercing | 2 lb. | Ammunition |
|
||||
|   Sling | 1 sp | 1d4 bludgeoning | — | Ammunition |
|
||||
}}
|
||||
\n`;
|
||||
}
|
||||
},
|
||||
{
|
||||
name : 'Split Table',
|
||||
icon : 'fas fa-th-large',
|
||||
gen : function(){
|
||||
return dedent`
|
||||
##### Typical Difficulty Classes
|
||||
{{column-count:2
|
||||
| Task Difficulty | DC |
|
||||
|:----------------|:--:|
|
||||
| Very easy | 5 |
|
||||
| Easy | 10 |
|
||||
| Medium | 15 |
|
||||
|
||||
| Task Difficulty | DC |
|
||||
|:------------------|:--:|
|
||||
| Hard | 20 |
|
||||
| Very hard | 25 |
|
||||
| Nearly impossible | 30 |
|
||||
}}
|
||||
\n`;
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
/**************** FONTS *************/
|
||||
{
|
||||
groupName : 'Fonts',
|
||||
icon : 'fas fa-keyboard',
|
||||
view : 'text',
|
||||
snippets : [
|
||||
{
|
||||
name : 'Open Sans',
|
||||
icon : 'font OpenSans',
|
||||
gen : dedent`{{font-family:OpenSans Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Code Bold',
|
||||
icon : 'font CodeBold',
|
||||
gen : dedent`{{font-family:CodeBold Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Code Light',
|
||||
icon : 'font CodeLight',
|
||||
gen : dedent`{{font-family:CodeLight Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Scaly Sans',
|
||||
icon : 'font ScalySansRemake',
|
||||
gen : dedent`{{font-family:ScalySansRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Book Insanity',
|
||||
icon : 'font BookInsanityRemake',
|
||||
gen : dedent`{{font-family:BookInsanityRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Mr Eaves',
|
||||
icon : 'font MrEavesRemake',
|
||||
gen : dedent`{{font-family:MrEavesRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Pagella',
|
||||
icon : 'font Pagella',
|
||||
gen : dedent`{{font-family:Pagella Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Solbera Imitation',
|
||||
icon : 'font SolberaImitationRemake',
|
||||
gen : dedent`{{font-family:SolberaImitationRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Scaly Sans Small Caps',
|
||||
icon : 'font ScalySansSmallCapsRemake',
|
||||
gen : dedent`{{font-family:ScalySansSmallCapsRemake Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Walter Turncoat',
|
||||
icon : 'font WalterTurncoat',
|
||||
gen : dedent`{{font-family:WalterTurncoat Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Lato',
|
||||
icon : 'font Lato',
|
||||
gen : dedent`{{font-family:Lato Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Courier',
|
||||
icon : 'font Courier',
|
||||
gen : dedent`{{font-family:Courier Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Nodesto Caps Condensed',
|
||||
icon : 'font NodestoCapsCondensed',
|
||||
gen : dedent`{{font-family:NodestoCapsCondensed Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Overpass',
|
||||
icon : 'font Overpass',
|
||||
gen : dedent`{{font-family:Overpass Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Davek',
|
||||
icon : 'font Davek',
|
||||
gen : dedent`{{font-family:Davek Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Iokharic',
|
||||
icon : 'font Iokharic',
|
||||
gen : dedent`{{font-family:Iokharic Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Rellanic',
|
||||
icon : 'font Rellanic',
|
||||
gen : dedent`{{font-family:Rellanic Dummy Text}}`
|
||||
},
|
||||
{
|
||||
name : 'Times New Roman',
|
||||
icon : 'font TimesNewRoman',
|
||||
gen : dedent`{{font-family:"Times New Roman" Dummy Text}}`
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/**************** LAYOUT *************/
|
||||
|
||||
{
|
||||
groupName : 'Print',
|
||||
icon : 'fas fa-print',
|
||||
view : 'style',
|
||||
snippets : [
|
||||
{
|
||||
name : 'A3 Page Size',
|
||||
icon : 'far fa-file',
|
||||
gen : dedent`/* A3 Page Size */
|
||||
.page {
|
||||
width : 297mm;
|
||||
height : 420mm;
|
||||
}\n\n`,
|
||||
},
|
||||
{
|
||||
name : 'A4 Page Size',
|
||||
icon : 'far fa-file',
|
||||
gen : dedent`/* A4 Page Size */
|
||||
.page {
|
||||
width : 210mm;
|
||||
height : 296.8mm;
|
||||
}\n\n`
|
||||
},
|
||||
{
|
||||
name : 'A5 Page Size',
|
||||
icon : 'far fa-file',
|
||||
gen : dedent`/* A5 Page Size */
|
||||
.page {
|
||||
width : 148mm;
|
||||
height : 210mm;
|
||||
}\n\n`,
|
||||
},
|
||||
{
|
||||
name : 'Square Page Size',
|
||||
icon : 'far fa-file',
|
||||
gen : dedent`/* Square Page Size */
|
||||
.page {
|
||||
width : 125mm;
|
||||
height : 125mm;
|
||||
padding : 12.5mm;
|
||||
columns : unset;
|
||||
}\n\n`
|
||||
},
|
||||
{
|
||||
name : 'Card Page Size',
|
||||
icon : 'far fa-file',
|
||||
gen : dedent`/* Card Size */
|
||||
.page {
|
||||
width : 63.5mm;
|
||||
height : 88.9mm;
|
||||
padding : 5mm;
|
||||
columns : unset;
|
||||
}\n\n`
|
||||
},
|
||||
{
|
||||
name : 'Ink Friendly',
|
||||
icon : 'fas fa-tint',
|
||||
gen : dedent`
|
||||
/* Ink Friendly */
|
||||
*:is(.page) {
|
||||
background : white !important;
|
||||
filter : drop-shadow(0px 0px 3px #888) !important;
|
||||
}
|
||||
|
||||
.page img {
|
||||
visibility : hidden;
|
||||
}\n\n`
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
17
themes/V4/Blank/snippets/footer.gen.js
Normal file
17
themes/V4/Blank/snippets/footer.gen.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import Markdown from '../../../../shared/naturalcrit/markdown.js';
|
||||
|
||||
module.exports = {
|
||||
createFooterFunc : function(headerSize=1){
|
||||
return (props)=>{
|
||||
const cursorPos = props.cursorPos;
|
||||
|
||||
const markdownText = props.brew.text.split('\n').slice(0, cursorPos.line).join('\n');
|
||||
const markdownTokens = Markdown.marked.lexer(markdownText);
|
||||
const headerToken = markdownTokens.findLast((lexerToken)=>{ return lexerToken.type === 'heading' && lexerToken.depth === headerSize; });
|
||||
const headerText = headerToken?.tokens.map((token)=>{ return token.text; }).join('');
|
||||
const outputText = headerText || 'PART 1 | SECTION NAME';
|
||||
|
||||
return `\n{{footnote ${outputText}}}\n`;
|
||||
};
|
||||
}
|
||||
};
|
||||
46
themes/V4/Blank/snippets/imageMask.gen.js
Normal file
46
themes/V4/Blank/snippets/imageMask.gen.js
Normal file
@@ -0,0 +1,46 @@
|
||||
const _ = require('lodash');
|
||||
const dedent = require('dedent-tabs').default;
|
||||
|
||||
module.exports = {
|
||||
center : ()=>{
|
||||
return dedent`
|
||||
{{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0
|
||||
{height:100%}
|
||||
}}
|
||||
<!-- Use --offsetX to shift the mask left or right (can use cm instead of %)
|
||||
Use --offsetY to shift the mask up or down
|
||||
Use --rotation to set rotation angle in degrees. -->\n\n`;
|
||||
},
|
||||
|
||||
edge : (side = 'bottom')=>{
|
||||
const rotation = {
|
||||
'bottom' : 0,
|
||||
'top' : 180,
|
||||
'left' : 90,
|
||||
'right' : 270
|
||||
}[side];
|
||||
return dedent`
|
||||
{{imageMaskEdge${_.random(1, 8)},--offset:0%,--rotation:${rotation}
|
||||
{height:100%}
|
||||
}}
|
||||
<!-- Use --offset to shift the mask away from page center (can use cm instead of %)
|
||||
Use --rotation to set rotation angle in degrees. -->\n\n`;
|
||||
},
|
||||
|
||||
corner : (y = 'top', x = 'left')=>{
|
||||
const offsetX = (x == 'left' ? '-50%' : '50%');
|
||||
const offsetY = (y == 'top' ? '50%' : '-50%');
|
||||
return dedent`
|
||||
{{imageMaskCorner${_.random(1, 37)},--offsetX:${offsetX},--offsetY:${offsetY},--rotation:0
|
||||
{height:100%}
|
||||
}}
|
||||
<!-- Use --offsetX to shift the mask left or right (can use cm instead of %)
|
||||
Use --offsetY to shift the mask up or down
|
||||
Use --rotation to set rotation angle in degrees. -->\n\n`;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
()=>{
|
||||
|
||||
};
|
||||
5
themes/V4/Blank/snippets/watercolor.gen.js
Normal file
5
themes/V4/Blank/snippets/watercolor.gen.js
Normal file
@@ -0,0 +1,5 @@
|
||||
const _ = require('lodash');
|
||||
|
||||
module.exports = ()=>{
|
||||
return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`;
|
||||
};
|
||||
524
themes/V4/Blank/style.less
Normal file
524
themes/V4/Blank/style.less
Normal file
@@ -0,0 +1,524 @@
|
||||
@import (less) './themes/fonts/Blank/fonts.less';
|
||||
@import (less) './themes/fonts/5e/fonts.less';
|
||||
@import (less) './themes/assets/assets.less';
|
||||
@import (less) './themes/fonts/iconFonts/elderberryInn.less';
|
||||
@import (less) './themes/fonts/iconFonts/diceFont.less';
|
||||
@import (less) './themes/fonts/iconFonts/gameIcons.less';
|
||||
@import (less) './themes/fonts/iconFonts/fontAwesome.less';
|
||||
|
||||
:root {
|
||||
//Colors
|
||||
--HB_Color_Background : #FFFFFF; // White
|
||||
--HB_Color_WatercolorStain : #000000; // Black
|
||||
}
|
||||
|
||||
@page { margin : 0; }
|
||||
body { counter-reset : page-numbers 0; }
|
||||
* { -webkit-print-color-adjust : exact; }
|
||||
|
||||
//*****************************
|
||||
// * MUSTACHE DIVS/SPANS
|
||||
// *****************************/
|
||||
.page {
|
||||
.block {
|
||||
break-inside : avoid;
|
||||
display : inline-block;
|
||||
width : 100%;
|
||||
img { z-index : 0; }
|
||||
}
|
||||
.inline-block {
|
||||
display : inline-block;
|
||||
text-indent : initial;
|
||||
}
|
||||
}
|
||||
|
||||
.useColumns(@multiplier : 1, @fillMode: auto) {
|
||||
column-fill : @fillMode;
|
||||
column-count : 2;
|
||||
}
|
||||
.columnWrapper {
|
||||
column-gap : inherit;
|
||||
max-height : 100%;
|
||||
column-span : all;
|
||||
columns : inherit;
|
||||
column-fill : inherit;
|
||||
}
|
||||
.page {
|
||||
.useColumns();
|
||||
position : relative;
|
||||
z-index : 15;
|
||||
box-sizing : border-box;
|
||||
width : 215.9mm;
|
||||
height : 279.4mm;
|
||||
padding : 1.4cm 1.9cm 1.7cm;
|
||||
overflow : hidden;
|
||||
background-color : var(--HB_Color_Background);
|
||||
text-rendering : optimizeLegibility;
|
||||
contain : size;
|
||||
}
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
.page {
|
||||
p {
|
||||
display : block;
|
||||
overflow-wrap : break-word;
|
||||
}
|
||||
strong { font-weight : bold; }
|
||||
em { font-style : italic; }
|
||||
sup {
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
vertical-align : super;
|
||||
}
|
||||
sub {
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
vertical-align : sub;
|
||||
}
|
||||
ul {
|
||||
padding-left : 1.4em;
|
||||
list-style-position : outside; //Needed for multiline list items
|
||||
list-style-type : disc;
|
||||
}
|
||||
ol {
|
||||
padding-left : 1.4em;
|
||||
list-style-position : outside;
|
||||
list-style-type : decimal;
|
||||
}
|
||||
img { z-index : -1; }
|
||||
|
||||
//*****************************
|
||||
// * HEADERS
|
||||
// *****************************/
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-weight : bold;
|
||||
line-height : 1.2em;
|
||||
}
|
||||
h1 { font-size : 2em; }
|
||||
h2 { font-size : 1.5em; }
|
||||
h3 { font-size : 1.17em; }
|
||||
h4 { font-size : 1em; }
|
||||
h5 { font-size : 0.83em; }
|
||||
//*****************************
|
||||
// * TABLE
|
||||
// *****************************/
|
||||
table {
|
||||
width : 100%;
|
||||
thead {
|
||||
display : table-row-group;
|
||||
font-weight : bold;
|
||||
}
|
||||
}
|
||||
div:not(.columnWrapper) > table + table { // Side-by-side tables should not
|
||||
margin-top : 0; // have vertical spacing.
|
||||
}
|
||||
|
||||
//************************************
|
||||
// * CODE BLOCKS
|
||||
// ************************************/
|
||||
code {
|
||||
font-family : 'Courier New', "Courier", monospace;
|
||||
overflow-wrap : break-word;
|
||||
white-space : pre-wrap;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display : inline-block;
|
||||
width : 100%;
|
||||
}
|
||||
//*****************************
|
||||
// * EXTRAS
|
||||
// *****************************/
|
||||
.columnSplit {
|
||||
margin-top : 0;
|
||||
visibility : hidden;
|
||||
-webkit-column-break-after : always;
|
||||
break-after : always;
|
||||
-moz-column-break-after : always;
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
//Avoid breaking up
|
||||
blockquote,table {
|
||||
z-index : 15;
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
// Nested lists
|
||||
ul ul,ol ol,ul ol,ol ul {
|
||||
margin-bottom : 0px;
|
||||
margin-left : 1.5em;
|
||||
}
|
||||
li {
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
|
||||
/* Wrap Text */
|
||||
.wrapLeft {
|
||||
shape-outside : var(--HB_src);
|
||||
float : right;
|
||||
shape-margin : 0.2cm;
|
||||
}
|
||||
|
||||
.wrapRight {
|
||||
shape-outside : var(--HB_src);
|
||||
float : left;
|
||||
shape-margin : 0.2cm;
|
||||
}
|
||||
|
||||
/* Watermark */
|
||||
.watermark {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
z-index : 500;
|
||||
display : grid !important;
|
||||
place-items : center;
|
||||
justify-content : center;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
margin : 0;
|
||||
font-size : 120px;
|
||||
text-transform : uppercase;
|
||||
opacity : 30%;
|
||||
transform : rotate(-45deg);
|
||||
p { margin-bottom : none; }
|
||||
}
|
||||
|
||||
/* Watercolor */
|
||||
[class*='watercolor'] {
|
||||
position : absolute;
|
||||
z-index : -2;
|
||||
width : 2000px; /* dimensions need to be real big so the user can set */
|
||||
height : 2000px; /* height or width and the image will maintain aspect ratio */
|
||||
background-color : var(--HB_Color_WatercolorStain); /* default color */
|
||||
background-size : cover;
|
||||
-webkit-mask-image : var(--wc);
|
||||
-webkit-mask-size : contain;
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
mask-image : var(--wc);
|
||||
mask-size : contain;
|
||||
mask-repeat : no-repeat;
|
||||
--wc : @watercolor1; /* default image */
|
||||
}
|
||||
|
||||
.watercolor1 { --wc : @watercolor1; }
|
||||
.watercolor2 { --wc : @watercolor2; }
|
||||
.watercolor3 { --wc : @watercolor3; }
|
||||
.watercolor4 { --wc : @watercolor4; }
|
||||
.watercolor5 { --wc : @watercolor5; }
|
||||
.watercolor6 { --wc : @watercolor6; }
|
||||
.watercolor7 { --wc : @watercolor7; }
|
||||
.watercolor8 { --wc : @watercolor8; }
|
||||
.watercolor9 { --wc : @watercolor9; }
|
||||
.watercolor10 { --wc : @watercolor10; }
|
||||
.watercolor11 { --wc : @watercolor11; }
|
||||
.watercolor12 { --wc : @watercolor12; }
|
||||
|
||||
/* Image Masks */
|
||||
|
||||
[class*='imageMask'] {
|
||||
position : absolute;
|
||||
bottom : 50%;
|
||||
left : 50%;
|
||||
z-index : -1;
|
||||
width : 200%;
|
||||
height : 200%;
|
||||
background-image : var(--checkerboard);
|
||||
background-size : 20px;
|
||||
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
-webkit-mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : repeat-x;
|
||||
-webkit-mask-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
|
||||
-webkit-mask-position : 50% calc(50% - var(--offset));
|
||||
mask-image : var(--wc);
|
||||
mask-repeat : repeat-x;
|
||||
mask-size : 50%;
|
||||
mask-position : 50% calc(50% - var(--offset));
|
||||
--rotation : 0;
|
||||
--revealer : none;
|
||||
--checkerboard : none;
|
||||
--scaleX : 1;
|
||||
--scaleY : 1;
|
||||
& > p:has(img) {
|
||||
position : absolute;
|
||||
bottom : 50%;
|
||||
left : 50%;
|
||||
width : 50%;
|
||||
height : 50%;
|
||||
transform : translateX(-50%) translateY(50%) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))) rotate(calc(-1deg * var(--rotation)));
|
||||
}
|
||||
& img {
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
display : block;
|
||||
}
|
||||
&.bottom {
|
||||
--rotation : 0;
|
||||
& img {bottom : 0;}
|
||||
}
|
||||
&.top {
|
||||
--rotation : 180;
|
||||
& img {top : 0;}
|
||||
}
|
||||
&.left {
|
||||
--rotation : 90;
|
||||
& img {left : 0;}
|
||||
}
|
||||
&.right {
|
||||
--rotation : -90;
|
||||
& img {right : 0;}
|
||||
}
|
||||
&.revealImage {
|
||||
--revealer : linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2));
|
||||
--checkerboard : url("/assets/waterColorMasks/missingImage.png"); //shows any masked regions not filled by image
|
||||
}
|
||||
}
|
||||
|
||||
.imageMaskEdge {
|
||||
&1 { --wc : url("/assets/waterColorMasks/edge/0001.webp"); }
|
||||
&2 { --wc : url("/assets/waterColorMasks/edge/0002.webp"); }
|
||||
&3 { --wc : url("/assets/waterColorMasks/edge/0003.webp"); }
|
||||
&4 { --wc : url("/assets/waterColorMasks/edge/0004.webp"); }
|
||||
&5 { --wc : url("/assets/waterColorMasks/edge/0005.webp"); }
|
||||
&6 { --wc : url("/assets/waterColorMasks/edge/0006.webp"); }
|
||||
&7 { --wc : url("/assets/waterColorMasks/edge/0007.webp"); }
|
||||
&8 { --wc : url("/assets/waterColorMasks/edge/0008.webp"); }
|
||||
}
|
||||
|
||||
[class*='imageMaskCenter'] {
|
||||
bottom : calc(var(--offsetY));
|
||||
left : calc(var(--offsetX));
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
-webkit-mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
-webkit-mask-position : 0% 0%;
|
||||
mask-image : var(--wc), var(--revealer);
|
||||
mask-repeat : no-repeat;
|
||||
mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
mask-position : 50% 50%;
|
||||
|
||||
& > p:has(img) {
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
transform : unset;
|
||||
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
|
||||
rotate(calc(-1deg * var(--rotation)))
|
||||
translateX(calc(-1 * var(--offsetX)))
|
||||
translateY(calc(1 * var(--offsetY)));
|
||||
}
|
||||
}
|
||||
|
||||
.imageMaskCenter {
|
||||
&1 { --wc : url("/assets/waterColorMasks/center/0001.webp"); }
|
||||
&2 { --wc : url("/assets/waterColorMasks/center/0002.webp"); }
|
||||
&3 { --wc : url("/assets/waterColorMasks/center/0003.webp"); }
|
||||
&4 { --wc : url("/assets/waterColorMasks/center/0004.webp"); }
|
||||
&5 { --wc : url("/assets/waterColorMasks/center/0005.webp"); }
|
||||
&6 { --wc : url("/assets/waterColorMasks/center/0006.webp"); }
|
||||
&7 { --wc : url("/assets/waterColorMasks/center/0007.webp"); }
|
||||
&8 { --wc : url("/assets/waterColorMasks/center/0008.webp"); }
|
||||
&9 { --wc : url("/assets/waterColorMasks/center/0009.webp"); }
|
||||
&10 { --wc : url("/assets/waterColorMasks/center/0010.webp"); }
|
||||
&11 { --wc : url("/assets/waterColorMasks/center/0011.webp"); }
|
||||
&12 { --wc : url("/assets/waterColorMasks/center/0012.webp"); }
|
||||
&13 { --wc : url("/assets/waterColorMasks/center/0013.webp"); }
|
||||
&14 { --wc : url("/assets/waterColorMasks/center/0014.webp"); }
|
||||
&15 { --wc : url("/assets/waterColorMasks/center/0015.webp"); }
|
||||
&16 { --wc : url("/assets/waterColorMasks/center/0016.webp"); }
|
||||
&special { --wc : url("/assets/waterColorMasks/center/special.webp"); }
|
||||
}
|
||||
|
||||
|
||||
[class*='imageMaskCorner'] {
|
||||
bottom : calc(-50% + var(--offsetY));
|
||||
left : calc(-50% + var(--offsetX));
|
||||
width : 200%;
|
||||
height : 200%;
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
-webkit-mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
-webkit-mask-position : 50% 50%;
|
||||
mask-image : var(--wc), var(--revealer);
|
||||
mask-repeat : no-repeat;
|
||||
mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
mask-position : 50% 50%;
|
||||
& > p:has(img) {
|
||||
bottom : 25%;
|
||||
left : 25%;
|
||||
width : 50%;
|
||||
height : 50%; //Complex transform below to handle mix of % and cm offsets
|
||||
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
|
||||
rotate(calc(-1deg * var(--rotation)))
|
||||
translateX(calc(-1 * var(--offsetX)))
|
||||
translateY(calc(1 * var(--offsetY)));
|
||||
}
|
||||
}
|
||||
.imageMaskCorner {
|
||||
&1 { --wc : url("/assets/waterColorMasks/corner/0001.webp"); }
|
||||
&2 { --wc : url("/assets/waterColorMasks/corner/0002.webp"); }
|
||||
&3 { --wc : url("/assets/waterColorMasks/corner/0003.webp"); }
|
||||
&4 { --wc : url("/assets/waterColorMasks/corner/0004.webp"); }
|
||||
&5 { --wc : url("/assets/waterColorMasks/corner/0005.webp"); }
|
||||
&6 { --wc : url("/assets/waterColorMasks/corner/0006.webp"); }
|
||||
&7 { --wc : url("/assets/waterColorMasks/corner/0007.webp"); }
|
||||
&8 { --wc : url("/assets/waterColorMasks/corner/0008.webp"); }
|
||||
&9 { --wc : url("/assets/waterColorMasks/corner/0009.webp"); }
|
||||
&10 { --wc : url("/assets/waterColorMasks/corner/0010.webp"); }
|
||||
&11 { --wc : url("/assets/waterColorMasks/corner/0011.webp"); }
|
||||
&12 { --wc : url("/assets/waterColorMasks/corner/0012.webp"); }
|
||||
&13 { --wc : url("/assets/waterColorMasks/corner/0013.webp"); }
|
||||
&14 { --wc : url("/assets/waterColorMasks/corner/0014.webp"); }
|
||||
&15 { --wc : url("/assets/waterColorMasks/corner/0015.webp"); }
|
||||
&16 { --wc : url("/assets/waterColorMasks/corner/0016.webp"); }
|
||||
&17 { --wc : url("/assets/waterColorMasks/corner/0017.webp"); }
|
||||
&18 { --wc : url("/assets/waterColorMasks/corner/0018.webp"); }
|
||||
&19 { --wc : url("/assets/waterColorMasks/corner/0019.webp"); }
|
||||
&20 { --wc : url("/assets/waterColorMasks/corner/0020.webp"); }
|
||||
&21 { --wc : url("/assets/waterColorMasks/corner/0021.webp"); }
|
||||
&22 { --wc : url("/assets/waterColorMasks/corner/0022.webp"); }
|
||||
&23 { --wc : url("/assets/waterColorMasks/corner/0023.webp"); }
|
||||
&24 { --wc : url("/assets/waterColorMasks/corner/0024.webp"); }
|
||||
&25 { --wc : url("/assets/waterColorMasks/corner/0025.webp"); }
|
||||
&26 { --wc : url("/assets/waterColorMasks/corner/0026.webp"); }
|
||||
&27 { --wc : url("/assets/waterColorMasks/corner/0027.webp"); }
|
||||
&28 { --wc : url("/assets/waterColorMasks/corner/0028.webp"); }
|
||||
&29 { --wc : url("/assets/waterColorMasks/corner/0029.webp"); }
|
||||
&30 { --wc : url("/assets/waterColorMasks/corner/0030.webp"); }
|
||||
&31 { --wc : url("/assets/waterColorMasks/corner/0031.webp"); }
|
||||
&32 { --wc : url("/assets/waterColorMasks/corner/0032.webp"); }
|
||||
&33 { --wc : url("/assets/waterColorMasks/corner/0033.webp"); }
|
||||
&34 { --wc : url("/assets/waterColorMasks/corner/0034.webp"); }
|
||||
&35 { --wc : url("/assets/waterColorMasks/corner/0035.webp"); }
|
||||
&36 { --wc : url("/assets/waterColorMasks/corner/0036.webp"); }
|
||||
&37 { --wc : url("/assets/waterColorMasks/corner/0037.webp"); }
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * DEFINITION LISTS
|
||||
// *****************************/
|
||||
.page {
|
||||
dl {
|
||||
padding-left : 1em;
|
||||
white-space : pre-line;
|
||||
}
|
||||
dt {
|
||||
display : inline;
|
||||
margin-right : 0.5ch;
|
||||
margin-left : -1em;
|
||||
}
|
||||
dd {
|
||||
display : inline;
|
||||
margin-left : 0;
|
||||
text-indent : 0;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * BLANK LINE
|
||||
// *****************************/
|
||||
.page {
|
||||
.blank {
|
||||
height : 1em;
|
||||
margin-top : 0;
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page {
|
||||
.wide {
|
||||
column-span : all;
|
||||
display : block;
|
||||
margin-bottom : 1em;
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//* CREDITS
|
||||
//*****************************/
|
||||
.page .homebreweryCredits {
|
||||
p {
|
||||
font-family : 'NodestoCapsWide';
|
||||
font-size : 0.4cm;
|
||||
line-height : 1em;
|
||||
text-align : center;
|
||||
text-indent : 0;
|
||||
letter-spacing : 0.08em;
|
||||
}
|
||||
a {
|
||||
color : inherit;
|
||||
text-decoration : none;
|
||||
&:hover { text-decoration : underline; }
|
||||
}
|
||||
.homebreweryIcon {
|
||||
display : block;
|
||||
height : 1.5cm;
|
||||
margin : 0 auto;
|
||||
background-color : black;
|
||||
-webkit-mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
|
||||
mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
|
||||
}
|
||||
.homebreweryIcon.red { background-color : red; }
|
||||
.homebreweryIcon.gold { background-image : linear-gradient(to top left, brown 22.5%, gold 40%, white 60%, gold 67.5%, brown 82.5%); }
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//* Page Number
|
||||
//*****************************/
|
||||
.page {
|
||||
.pageNumber {
|
||||
position : absolute;
|
||||
right : 30px;
|
||||
bottom : 30px;
|
||||
width : 50px;
|
||||
font-size : 0.9em;
|
||||
text-align : center;
|
||||
&.auto::after { content : counter(page-numbers); }
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
.pageNumber { left : 30px; }
|
||||
}
|
||||
|
||||
.resetCounting {
|
||||
counter-set : page-numbers 1;
|
||||
}
|
||||
|
||||
&:not(:has(.skipCounting)) {
|
||||
counter-increment : page-numbers;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//*****************************
|
||||
//* Forced Justification
|
||||
//*****************************/
|
||||
|
||||
.page {
|
||||
.mdParagraphJustifyLeft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mdParagraphJustifyRight {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mdParagraphJustifyCenter {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -36,5 +36,14 @@
|
||||
"baseSnippets": "5ePHB",
|
||||
"path": "Journal"
|
||||
}
|
||||
},
|
||||
"V4": {
|
||||
"Blank": {
|
||||
"name": "Blank",
|
||||
"renderer": "V3",
|
||||
"baseTheme": false,
|
||||
"baseSnippets": false,
|
||||
"path": "Blank"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user