diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index d2c54be0c..65eeee683 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -506,22 +506,3 @@ body { counter-reset : page-numbers 0; } } } - -//***************************** -//* Forced Justification -//* DELETE WHEN V4 GOES LIVE -//*****************************/ - -.page { - .mdParagraphJustifyLeft { - text-align: left; - } - - .mdParagraphJustifyRight { - text-align: right; - } - - .mdParagraphJustifyCenter { - text-align: center; - } -} diff --git a/themes/V4/Blank/dropdownPreview.png b/themes/V4/Blank/dropdownPreview.png deleted file mode 100644 index 7ff524ad4..000000000 Binary files a/themes/V4/Blank/dropdownPreview.png and /dev/null differ diff --git a/themes/V4/Blank/dropdownTexture.png b/themes/V4/Blank/dropdownTexture.png deleted file mode 100644 index d0c0256c0..000000000 Binary files a/themes/V4/Blank/dropdownTexture.png and /dev/null differ diff --git a/themes/V4/Blank/settings.json b/themes/V4/Blank/settings.json deleted file mode 100644 index 3786248fb..000000000 --- a/themes/V4/Blank/settings.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name" : "Blank", - "renderer" : "V3", - "baseTheme" : false, - "baseSnippets" : false -} diff --git a/themes/V4/Blank/snippets.js b/themes/V4/Blank/snippets.js deleted file mode 100644 index e92e757cf..000000000 --- a/themes/V4/Blank/snippets.js +++ /dev/null @@ -1,506 +0,0 @@ -/* 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 : '' - }, - { - 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` - ![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}` - }, - { - name : 'Image Wrap Left', - icon : 'fac image-wrap-left', - gen : dedent` - ![homebrewery_mug](http://i.imgur.com/hMna6G0.png) {width:280px,margin-right:-3cm,wrapLeft}` - }, - { - name : 'Image Wrap Right', - icon : 'fac image-wrap-right', - gen : dedent` - ![homebrewery_mug](http://i.imgur.com/hMna6G0.png) {width:280px,margin-left:-3cm,wrapRight}` - }, - { - name : 'Background Image', - icon : 'fas fa-tree', - gen : dedent` - ![homebrew mug](http://i.imgur.com/hMna6G0.png) {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` - }, - ] - }, -]; diff --git a/themes/V4/Blank/snippets/footer.gen.js b/themes/V4/Blank/snippets/footer.gen.js deleted file mode 100644 index 9384baed7..000000000 --- a/themes/V4/Blank/snippets/footer.gen.js +++ /dev/null @@ -1,17 +0,0 @@ -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`; - }; - } -}; \ No newline at end of file diff --git a/themes/V4/Blank/snippets/imageMask.gen.js b/themes/V4/Blank/snippets/imageMask.gen.js deleted file mode 100644 index 323f89a1f..000000000 --- a/themes/V4/Blank/snippets/imageMask.gen.js +++ /dev/null @@ -1,46 +0,0 @@ -const _ = require('lodash'); -const dedent = require('dedent-tabs').default; - -module.exports = { - center : ()=>{ - return dedent` - {{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0 - ![](https://i.imgur.com/GZfjDWV.png){height:100%} - }} - \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} - ![](https://i.imgur.com/GZfjDWV.png){height:100%} - }} - \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 - ![](https://i.imgur.com/GZfjDWV.png){height:100%} - }} - \n\n`; - } - -}; - -()=>{ - -}; diff --git a/themes/V4/Blank/snippets/watercolor.gen.js b/themes/V4/Blank/snippets/watercolor.gen.js deleted file mode 100644 index 735a35602..000000000 --- a/themes/V4/Blank/snippets/watercolor.gen.js +++ /dev/null @@ -1,5 +0,0 @@ -const _ = require('lodash'); - -module.exports = ()=>{ - return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`; -}; diff --git a/themes/V4/Blank/style.less b/themes/V4/Blank/style.less deleted file mode 100644 index 68d2ff07d..000000000 --- a/themes/V4/Blank/style.less +++ /dev/null @@ -1,524 +0,0 @@ -@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; - } -}