From 993bcc27191c0c336c1646c23f267a27e39078c3 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 30 Jul 2022 00:28:15 -0400 Subject: [PATCH] Start adding "Blank" theme --- themes/V3/Blank/dropdownTexture.png | Bin 0 -> 10430 bytes themes/V3/Blank/settings.json | 6 + themes/V3/Blank/snippets.js | 228 ++++++ themes/V3/Blank/snippets/watercolor.gen.js | 5 + themes/V3/Blank/style.less | 797 +++++++++++++++++++++ 5 files changed, 1036 insertions(+) create mode 100644 themes/V3/Blank/dropdownTexture.png create mode 100644 themes/V3/Blank/settings.json create mode 100644 themes/V3/Blank/snippets.js create mode 100644 themes/V3/Blank/snippets/watercolor.gen.js create mode 100644 themes/V3/Blank/style.less diff --git a/themes/V3/Blank/dropdownTexture.png b/themes/V3/Blank/dropdownTexture.png new file mode 100644 index 0000000000000000000000000000000000000000..d5884de1690c5e40f9b5c433b0dc8c0ea7d773fe GIT binary patch literal 10430 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 literal 0 HcmV?d00001 diff --git a/themes/V3/Blank/settings.json b/themes/V3/Blank/settings.json new file mode 100644 index 000000000..3786248fb --- /dev/null +++ b/themes/V3/Blank/settings.json @@ -0,0 +1,6 @@ +{ + "name" : "Blank", + "renderer" : "V3", + "baseTheme" : false, + "baseSnippets" : false +} diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js new file mode 100644 index 000000000..77dd2fb24 --- /dev/null +++ b/themes/V3/Blank/snippets.js @@ -0,0 +1,228 @@ +/* eslint-disable max-lines */ + +const WatercolorGen = require('./snippets/watercolor.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 : '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 : '' + }, + ] + }, + { + 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 : '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 : '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`; + } + } + ] + }, + + /**************** PAGE *************/ + + { + groupName : 'Print', + icon : 'fas fa-print', + view : 'style', + snippets : [ + { + name : 'A4 Page Size', + icon : 'far fa-file', + gen : dedent`/* A4 Page Size */ + .page{ + width : 210mm; + height : 296.8mm; + }\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 : 'Ink Friendly', + icon : 'fas fa-tint', + gen : dedent` + /* Ink Friendly */ + *:is(.page,.monster,.note,.descriptive) { + background : white !important; + filter : drop-shadow(0px 0px 3px #888) !important; + } + + .page img { + visibility : hidden; + }\n\n` + }, + ] + }, + +]; diff --git a/themes/V3/Blank/snippets/watercolor.gen.js b/themes/V3/Blank/snippets/watercolor.gen.js new file mode 100644 index 000000000..735a35602 --- /dev/null +++ b/themes/V3/Blank/snippets/watercolor.gen.js @@ -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`; +}; diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less new file mode 100644 index 000000000..8907f8a71 --- /dev/null +++ b/themes/V3/Blank/style.less @@ -0,0 +1,797 @@ +@import (less) './themes/fonts/5e/fonts.less'; +@import (less) './themes/assets/assets.less'; + +:root { + //Colors + --HB_Color_Background : #EEE5CE; // Light parchment + --HB_Color_Accent : #E0E5C1; // Pastel green + --HB_Color_HeaderUnderline : #C0AD6A; // Gold + --HB_Color_HorizontalRule : #9C2B1B; // Maroon + --HB_Color_HeaderText : #58180D; // Dark Maroon + --HB_Color_MonsterStatBackground : #EEDBAB; // Light orange parchment + --HB_Color_CaptionText : #766649; // Brown + --HB_Color_WatercolorStain : #BBAD82; // Light brown + --HB_Color_Footnotes : #C9AD6A; // Gold +} + +@page { margin: 0; } +body { + counter-reset : phb-page-numbers; +} +*{ + -webkit-print-color-adjust : exact; +} +.useSansSerif(){ + font-family : ScalySansRemake; + font-size : 0.318cm; + line-height : 1.2em; + p,dl,ul,ol { + line-height : 1.2em; + } + ul, ol { + padding-left : 1em; + } + em{ + font-style : italic; + } + strong{ + font-weight : 800; + letter-spacing : -0.02em; + } + h5 + * { + margin-top : 0.1cm; + } +} +.useColumns(@multiplier : 1, @fillMode: balance){ + column-count : 2; + column-fill : @fillMode; + column-gap : 0.9cm; + column-width : 8cm * @multiplier; + -webkit-column-count : 2; + -moz-column-count : 2; + -webkit-column-width : 8cm * @multiplier; + -moz-column-width : 8cm * @multiplier; + -webkit-column-gap : 0.9cm; + -moz-column-gap : 0.9cm; +} +.columnWrapper{ + max-height : 100%; + column-span : all; + columns : inherit; + column-gap : inherit; +} +.page{ + .useColumns(); + counter-increment : phb-page-numbers; + position : relative; + z-index : 15; + box-sizing : border-box; + overflow : hidden; + height : 279.4mm; + width : 215.9mm; + background-color : var(--HB_Color_Background); + background-image : @backgroundImage; + padding : 1.4cm 1.9cm 1.7cm; + font-family : BookInsanityRemake; + font-size : 0.34cm; + text-rendering : optimizeLegibility; + page-break-before : always; + page-break-after : always; + //***************************** + // * BASE + // *****************************/ + p{ + overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS + display : block; + line-height : 1.25em; + &+* { + margin-top : 0.325cm; + } + &+p{ + margin-top : 0; + } + } + ul{ + margin-bottom : 0.8em; + padding-left : 1.4em; + line-height : 1.25em; + list-style-position : outside; + list-style-type : disc; + } + ol{ + margin-bottom : 0.8em; + padding-left : 1.4em; + line-height : 1.25em; + list-style-position : outside; + list-style-type : decimal; + } + //Indents after p or lists + p+p, ul+p, ol+p{ + text-indent : 1em; + } + img{ + z-index : -1; + } + strong{ + font-weight : bold; + letter-spacing : -0.02em; + } + em{ + font-style : italic; + } + sup{ + vertical-align : super; + font-size : smaller; + line-height : 0; + } + sub{ + vertical-align : sub; + font-size : smaller; + line-height : 0; + } + //***************************** + // * HEADERS + // *****************************/ + h1,h2,h3,h4{ + font-family : MrEavesRemake; + font-weight : 800; + color : var(--HB_Color_HeaderText); + } + h1{ + margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE + column-span : all; + font-size : 0.89cm; + -webkit-column-span : all; + -moz-column-span : all; + &+p::first-letter{ + float : left; + font-family : SolberaImitationRemake; + line-height : 1em; + font-size : 3.5cm; + padding-left : 40px; //Allow background color to extend into margins + margin-left : -40px; + margin-top : -0.3cm; + padding-bottom : 2px; + margin-bottom : -20px; + background-image : linear-gradient(-45deg, #322814, #998250, #322814); + background-clip : text; + -webkit-background-clip : text; + color : rgba(0, 0, 0, 0); + } + &+p::first-line{ + font-variant : small-caps; + } + } + h2{ + //margin-top : 0px; //Font is misaligned. Shift up slightly + //margin-bottom : 0.05cm; + font-size : 0.75cm; + line-height : 0.988em; //Font is misaligned. Shift up slightly + } + h3{ + //margin-top : -0.1cm; //Font is misaligned. Shift up slightly + //margin-bottom : 0.1cm; + font-size : 0.575cm; + border-bottom : 2px solid var(--HB_Color_HeaderUnderline);; + line-height : 0.995em; //Font is misaligned. Shift up slightly + } + h4{ + //margin-top : -0.02cm; //Font is misaligned. Shift up slightly + //margin-bottom : 0.02cm; + font-size : 0.458cm; + line-height : 0.971em; //Font is misaligned. Shift up slightly + } + h5{ + //margin-top : -0.02cm; //Font is misaligned. Shift up slightly + //margin-bottom : 0.02cm; + font-family : ScalySansSmallCapsRemake; + font-size : 0.423cm; + font-weight : 900; + line-height : 0.951em; //Font is misaligned. Shift up slightly + & + * { + margin-top : 0.2cm; + } + } + //***************************** + // * TABLE + // *****************************/ + table{ + .useSansSerif(); + width : 100%; + & + * { + margin-top : 0.325cm; + } + thead{ + display: table-row-group; + font-weight : 800; + th{ + vertical-align : bottom; + padding : 0.14em 0.4em; + } + } + tbody{ + tr{ + td{ + padding : 0.14em 0.4em; + } + &:nth-child(odd){ + background-color : var(--HB_Color_Accent); + } + } + } + } + //***************************** + // * NOTE + // *****************************/ + .note{ + .useSansSerif(); + background-color : var(--HB_Color_Accent); + border-style : solid; + border-width : 1px; + border-image : @noteBorderImage 12 stretch; + border-image-outset : 9px 0px; + border-image-width : 11px; + padding : 0.13cm 0.16cm; + filter : drop-shadow(1px 4px 6px #888); + .page :where(&) { + margin-top : 9px; //Prevent top border getting cut off on colbreak + } + & + * { + margin-top : 0.45cm; + } + h5 { + font-size : 0.375cm; + } + p{ + display : block; + padding-bottom : 0px; + } + :last-child { + margin-bottom : 0; + } + } + //************************************ + // * DESCRIPTIVE TEXT BOX + // ************************************/ + .descriptive{ + .useSansSerif(); + background-color : #faf7ea; + border-style : solid; + border-width : 7px; + border-image : @descriptiveBoxImage 12 stretch; + border-image-outset : 4px; + padding : 0.1em; + filter : drop-shadow(0 0 3px #faf7ea); + .page :where(&) { + margin-top : 4px; //Prevent top border getting cut off on colbreak + } + & + * { + margin-top : 0.45cm; + } + h5 { + font-size : 0.375cm; + } + p{ + display : block; + padding-bottom : 0px; + line-height : 1.5em; + } + :last-child { + margin-bottom : 0; + } + } + //***************************** + // * Images Snippets + // *****************************/ + + /* Arist Credit */ + .artist { + position : absolute; + width : auto; + text-align : center; + font-family : WalterTurncoat; + font-size : 0.27cm; + color : var(--HB_Color_CaptionText); + p, p + p { + margin : unset; + text-indent : unset; + line-height : 1em; + } + h5 { + font-size : 1.3em; + font-family : WalterTurncoat; + } + a{ + color : inherit; + text-decoration : unset; + &:hover { + text-decoration : underline; + } + } + } + + /* Watermark */ + .watermark { + display : grid !important; + place-items : center; + justify-content : center; + position : absolute; + top : 0; + left : 0; + width : 100%; + height : 100%; + font-size : 120px; + text-transform : uppercase; + color : black; + mix-blend-mode : overlay; + opacity : 30%; + transform : rotate(-45deg); + z-index : 500; + p { + margin-bottom : none; + } + } + + /* Watercolor */ + [class*="watercolor"] { + position : absolute; + 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 */ + -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; + background-size : cover; + background-color : var(--HB_Color_WatercolorStain); /*default color*/ + --wc : @watercolor1; /*default image*/ + z-index : -2; + } + + .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; } + + //***************************** + // * MONSTER STAT BLOCK + // *****************************/ + .monster { + .useSansSerif(); + &.frame { + border-style : solid; + border-width : 7px 6px; + background-color : var(--HB_Color_MonsterStatBackground); + background-image : @monsterBlockBackground; + border-image : @monsterBorderImage 14 round; + border-image-outset : 0px 2px; + background-blend-mode : overlay; + background-attachment : fixed; + filter : drop-shadow(1px 4px 6px #888); + padding : 4px 2px; + margin-left : -0.16cm; + margin-right : -0.16cm; + width : calc(100% + 0.32cm); + } + + position : relative; + padding : 0px; + margin-bottom : 0.325cm; + + //Headers + h2{ + font-size : 0.62cm; + line-height : 1em; + margin : 0; + &+p { + font-size : 0.304cm; //Monster size and type subtext + margin-bottom : 0; + } + } + h3{ + font-family : ScalySansRemake; + font-weight : 800; + font-variant : small-caps; + border-bottom : 2px solid var(--HB_Color_HeaderText); + // margin-top : 0.05cm; //Font is misaligned. Shift up slightly + padding-bottom : 0.05cm; + } + + //Triangle dividers + hr{ + visibility : visible; + height : 6px; + margin : 0.12cm 0cm; + background-image : @redTriangleImage; + background-size : 100% 100%; + border : none; + } + + //Attribute Lists - All text between HRs is red + hr ~ :is(dl,p) { + color : var(--HB_Color_HeaderText); + } + hr:last-of-type { + & ~ :is(dl,p) { + color : inherit; // After the HRs, reset text to black + } + & + * { + margin-top : 0.325cm; // Space after last HR + } + } + + // Monster Ability table + hr + table:first-of-type{ + margin : 0; + column-span : none; + color : var(--HB_Color_HeaderText); + background-color : transparent; + border-style : none; + border-image : none; + -webkit-column-span : none; + tr { + background-color : transparent; + } + td,th { + padding: 0px; + } + } + + :last-child { + margin-bottom : 0; + } + } + + //Full Width + .monster.wide{ + .useColumns(0.96, @fillMode: balance); + } + + //***************************** + // * FOOTER + // *****************************/ + &:after{ + content : ""; + position : absolute; + bottom : 0px; + left : 0px; + z-index : 100; + height : 50px; + width : 100%; + background-image : @footerAccentImage; + background-size : cover; + } + &:nth-child(even){ + &:after{ + transform : scaleX(-1); + } + .pageNumber{ + left : 2px; + } + .footnote{ + left : 80px; + text-align : left; + } + } + .pageNumber{ + position : absolute; + right : 2px; + bottom : 22px; + width : 50px; + font-size : 0.9em; + color : var(--HB_Color_Footnotes); + text-align : center; + text-indent : 0; + &.auto::after { + content : counter(phb-page-numbers); + } + } + .footnote{ + position : absolute; + right : 80px; + bottom : 32px; + z-index : 150; + width : 200px; + font-size : 0.8em; + color : var(--HB_Color_Footnotes); + text-align : right; + } + //************************************ + // * CODE BLOCKS + // ************************************/ + code{ + font-family : "Courier New", Courier, monospace; + font-size : 0.325; + padding : 0px 4px; + color : #58180d; + background-color : #faf7ea; + border-radius : 4px; + white-space : pre-wrap; + overflow-wrap : break-word; + } + + pre code{ + width : 100%; + 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-bottom : 2px; + padding : 0.15cm; + .page :where(&) { + margin-top : 2px; //Prevent top border getting cut off on colbreak + } + & + * { + margin-top : 0.325cm; + } + } + //***************************** + // * EXTRAS + // *****************************/ + hr{ + visibility : hidden; + margin : 0px; + } + .columnSplit { + visibility : hidden; + -webkit-column-break-after : always; + break-after : always; + -moz-column-break-after : always; + } + //Avoid breaking up + blockquote,table{ + z-index : 15; + -webkit-column-break-inside : avoid; + page-break-inside : avoid; + break-inside : avoid; + } + //Text indent right after table + table+p{ + text-indent : 1em; + } + // 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; + } +} +//***************************** +// * SPELL LIST +// *****************************/ +.page .spellList{ + .useSansSerif(); + column-count : 2; + ul+h5{ + margin-top : 15px; + } + p, ul{ + font-size : 0.352cm; + line-height : 1.265em; + } + ul{ + margin-bottom : 0.5em; + padding-left : 1em; + text-indent : -1em; + list-style-type : none; + -webkit-column-break-inside : auto; + page-break-inside : auto; + break-inside : auto; + } + &.wide{ + column-count : 4; + } +} + +//***************************** +// * CLASS TABLE +// *****************************/ +.page .classTable{ + th[colspan]:not([rowspan]) { + white-space : nowrap; + } + &.frame { + margin-top : 0.7cm; + margin-bottom : 0.9cm; + margin-left : -0.1cm; + margin-right : -0.1cm; + width : calc(100% + 0.2cm); + border-collapse : separate; + background-color : white; + border : initial; + border-style : solid; + border-image-outset : 0.4cm 0.3cm; + border-image-repeat : stretch; + border-image-slice : 200; + border-image-source : @frameBorderImage; + border-image-width : 47px; + &.wide:first-child { + margin-top: 0.12cm; + } + } + &.decoration { + position:relative; + } + &.decoration::before { + content :''; + position : absolute; + background-image : @classTableDecoration, + @classTableDecoration; + background-size : contain, contain; + background-repeat : no-repeat, no-repeat; + background-position : top, bottom; + width : 7.75cm; + height : calc(100% + 3.3cm); + top : 50%; + left : 50%; + transform : translateY(-50%) translateX(-50%); + filter : drop-shadow(0px 0px 1px #C8C5C080); + z-index : -1; + } + &.decoration.wide::before { + width : calc(100% + 3.3cm); + height : 7.75cm; + background-position : left, right; + } + h5 + table{ + margin-top : 0.2cm; + } +} +//***************************** +// * TABLE OF CONTENTS +// *****************************/ +.page .toc{ + -webkit-column-break-inside : avoid; + page-break-inside : avoid; + break-inside : avoid; + h1 { + text-align : center; + margin-bottom : 0.3cm; + } + a{ + display : inline; + color : inherit; + text-decoration : none; + &:hover{ + text-decoration : underline; + } + } + h4 { + margin-top : 0.2cm; + line-height : 0.4cm; + & + ul li { + line-height: 1.2em; + } + } + ul{ + padding-left : 0; + list-style-type : none; + li + li h3 { + margin-top : 0.26cm; + line-height : 1em + } + h3 span:first-child::after { + border : none; + } + span { + display : table-cell; + &:first-child { + position : relative; + overflow : hidden; + &::after { + content : ""; + position : absolute; + bottom : 0.08cm; + margin-left : 0.06cm; /* Spacing before dot leaders */ + width : 100%; + border-bottom : 0.05cm dotted #000; + } + } + &:last-child { + font-family : BookInsanityRemake; + font-size : 0.34cm; + font-weight : normal; + color : black; + text-align : right; + vertical-align : bottom; /* Keep page number bottom-aligned */ + width : 1%; + padding-left : 0.06cm; /* Spacing after dot leaders */ + /*white-space : nowrap; /* Uncomment if needed */ + } + } + ul { /*List indent*/ + margin-left : 1em; + } + } + &.wide{ + .useColumns(0.96, @fillMode: balance); + } +} + +//***************************** +// * MUSTACHE DIVS/SPANS +// *****************************/ +.page { + .block { + break-inside : avoid; + display : inline-block; + .page :where(&) { + width : 100%; + } + //-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns + } + .inline-block { + display : inline-block; + text-indent : initial; + } +} + +//***************************** +// * DEFINITION LISTS +// *****************************/ +.page { + dl { + line-height : 1.25em; + padding-left : 1em; + white-space : pre-line; + & + * { + margin-top : 0.28cm; + } + } + dl + * { + margin-top : 0.17cm; + } + p + dl { + margin-top: 0.17cm; + } + dt { + display : inline; + margin-right : 5px; + margin-left : -1em; + } + dd { + display : inline; + margin-left : 0px; + text-indent : 0px; + } +} + +//***************************** +// * BLANK LINE +// *****************************/ +.page { + .blank { + height : 1em; + margin-top : 0; + } +} + +//***************************** +// * WIDE +// *****************************/ +.page .wide{ + column-span : all; + -webkit-column-span : all; + -moz-column-span : all; + display : block; + margin-bottom : 0.34cm; + &+* { + margin-top : 0; + } +}