diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 57f868899..9c6bf3f08 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -97,7 +97,7 @@ background-color : #ddd; .snippet{ .animate(background-color); - width : max-content; + min-width : max-content; padding : 5px; cursor : pointer; font-size : 10px; diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less index f41a2fc83..b04d16684 100644 --- a/client/icons/customIcons.less +++ b/client/icons/customIcons.less @@ -13,3 +13,21 @@ .position-bottom-right { content: url('../icons/position-bottom-right.svg'); } +.position-top { + content: url('../icons/position-top.svg'); +} +.position-right { + content: url('../icons/position-right.svg'); +} +.position-bottom { + content: url('../icons/position-bottom.svg'); +} +.position-left { + content: url('../icons/position-left.svg'); +} +.mask-edge { + content: url('../icons/mask-edge.svg'); +} +.mask-corner { + content: url('../icons/mask-corner.svg'); +} diff --git a/client/icons/mask-corner.svg b/client/icons/mask-corner.svg new file mode 100644 index 000000000..3d9a88a8d --- /dev/null +++ b/client/icons/mask-corner.svg @@ -0,0 +1,63 @@ + + diff --git a/client/icons/mask-edge.svg b/client/icons/mask-edge.svg new file mode 100644 index 000000000..f24d11de0 --- /dev/null +++ b/client/icons/mask-edge.svg @@ -0,0 +1,69 @@ + + diff --git a/client/icons/position-bottom-left.svg b/client/icons/position-bottom-left.svg index eb0709d8e..cb9e4c347 100644 --- a/client/icons/position-bottom-left.svg +++ b/client/icons/position-bottom-left.svg @@ -1 +1,46 @@ - \ No newline at end of file + + diff --git a/client/icons/position-bottom-right.svg b/client/icons/position-bottom-right.svg index f9cb7250a..37a8ee3b3 100644 --- a/client/icons/position-bottom-right.svg +++ b/client/icons/position-bottom-right.svg @@ -1 +1,46 @@ - \ No newline at end of file + + diff --git a/client/icons/position-bottom.svg b/client/icons/position-bottom.svg new file mode 100644 index 000000000..4bb2ab2e6 --- /dev/null +++ b/client/icons/position-bottom.svg @@ -0,0 +1,46 @@ + + diff --git a/client/icons/position-left.svg b/client/icons/position-left.svg new file mode 100644 index 000000000..c425bcb51 --- /dev/null +++ b/client/icons/position-left.svg @@ -0,0 +1,45 @@ + + diff --git a/client/icons/position-right.svg b/client/icons/position-right.svg new file mode 100644 index 000000000..f55121f6b --- /dev/null +++ b/client/icons/position-right.svg @@ -0,0 +1,46 @@ + + diff --git a/client/icons/position-top-left.svg b/client/icons/position-top-left.svg index d8240d2a8..80776a80a 100644 --- a/client/icons/position-top-left.svg +++ b/client/icons/position-top-left.svg @@ -1 +1,45 @@ - \ No newline at end of file + + diff --git a/client/icons/position-top-right.svg b/client/icons/position-top-right.svg index 4e998b4be..7c5b487d7 100644 --- a/client/icons/position-top-right.svg +++ b/client/icons/position-top-right.svg @@ -1 +1,46 @@ - \ No newline at end of file + + diff --git a/client/icons/position-top.svg b/client/icons/position-top.svg new file mode 100644 index 000000000..2903634cd --- /dev/null +++ b/client/icons/position-top.svg @@ -0,0 +1,45 @@ + + diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js index cd508cccb..a8fd2fa2c 100644 --- a/themes/V3/Blank/snippets.js +++ b/themes/V3/Blank/snippets.js @@ -1,9 +1,8 @@ /* eslint-disable max-lines */ -const WatercolorGen = require('./snippets/watercolor.gen.js'); -const dedent = require('dedent-tabs').default; - - +const WatercolorGen = require('./snippets/watercolor.gen.js'); +const ImageMaskGen = require('./snippets/imageMask.gen.js'); +const dedent = require('dedent-tabs').default; module.exports = [ @@ -102,6 +101,60 @@ module.exports = [ icon : 'fas fa-fill-drip', gen : WatercolorGen, }, + { + name : 'Watercolor Image Mask Edge', + icon : 'fac mask-edge', + gen : ImageMaskGen.edge('bottom'), + 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 Image Mask Corner', + icon : 'fac mask-corner', + gen : ImageMaskGen.corner, + 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', diff --git a/themes/V3/Blank/snippets/imageMask.gen.js b/themes/V3/Blank/snippets/imageMask.gen.js new file mode 100644 index 000000000..5c6193a05 --- /dev/null +++ b/themes/V3/Blank/snippets/imageMask.gen.js @@ -0,0 +1,36 @@ +const _ = require('lodash'); +const dedent = require('dedent-tabs').default; + +module.exports = { + edge : (side = 'bottom')=>{ + const rotation = { + 'bottom' : 0, + 'top' : 180, + 'left' : 90, + 'right' : 270 + }[side]; + return dedent` + {{imageMaskEdge${_.random(1, 8)},--offset:0cm,--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/V3/Blank/style.less b/themes/V3/Blank/style.less index 985a34528..9efa7c0b7 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -1,276 +1,412 @@ -@import (less) './themes/fonts/5e/fonts.less'; -@import (less) './themes/assets/assets.less'; +@layer V3_Blank { + @import (less) './themes/fonts/5e/fonts.less'; + @import (less) './themes/assets/assets.less'; -:root { - //Colors - --HB_Color_Background : #FFFFFF; // White - --HB_Color_WatercolorStain : #000000; // Black -} + :root { + //Colors + --HB_Color_Background : #FFFFFF; // White + --HB_Color_WatercolorStain : #000000; // Black + } -@page { margin: 0; } -body { - counter-reset : phb-page-numbers; -} -*{ - -webkit-print-color-adjust : exact; -} - -.useColumns(@multiplier : 1, @fillMode: balance){ - column-fill : @fillMode; - column-count : 2; -} -.columnWrapper{ - max-height : 100%; - column-span : all; - columns : inherit; - column-gap : inherit; -} -.page{ - .useColumns(); - height : 279.4mm; - width : 215.9mm; - padding : 1.4cm 1.9cm 1.7cm; - counter-increment : phb-page-numbers; - background-color : var(--HB_Color_Background); - position : relative; - z-index : 15; - box-sizing : border-box; - overflow : hidden; - text-rendering : optimizeLegibility; - page-break-before : always; - page-break-after : always; - contain : size; -} - //***************************** - // * BASE - // *****************************/ -.page{ - p{ - overflow-wrap : break-word; - display : block; + @page { margin: 0; } + body { + counter-reset : phb-page-numbers; } - strong{ - font-weight : bold; - } - em{ - font-style : italic; - } - sup{ - vertical-align : super; - font-size : smaller; - line-height : 0; - } - sub{ - vertical-align : sub; - font-size : smaller; - line-height : 0; - } - ul { - list-style-position : outside; //Needed for multiline list items - list-style-type : disc; - padding-left : 1.4em; - } - ol { - list-style-position : outside; - list-style-type : decimal; - padding-left : 1.4em; - } - img{ - z-index : -1; + *{ + -webkit-print-color-adjust : exact; } //***************************** - // * HEADERS + // * MUSTACHE DIVS/SPANS // *****************************/ - h1,h2,h3,h4,h5,h6{ - font-weight : bold; - line-height : 1.2em; + .page { + .block { + break-inside : avoid; + display : inline-block; + width : 100%; + } + .inline-block { + display : inline-block; + text-indent : initial; + } } - h1{ - font-size : 2em; + + .useColumns(@multiplier : 1, @fillMode: balance){ + column-fill : @fillMode; + column-count : 2; } - h2{ - font-size : 1.5em; + .columnWrapper{ + max-height : 100%; + column-span : all; + columns : inherit; + column-gap : inherit; } - h3{ - font-size : 1.17em; + .page{ + .useColumns(); + height : 279.4mm; + width : 215.9mm; + padding : 1.4cm 1.9cm 1.7cm; + counter-increment : phb-page-numbers; + background-color : var(--HB_Color_Background); + position : relative; + z-index : 15; + box-sizing : border-box; + overflow : hidden; + text-rendering : optimizeLegibility; + page-break-before : always; + page-break-after : always; + contain : size; } - h4{ - font-size : 1em; - } - h5{ - font-size : 0.83em; - } - //***************************** - // * TABLE - // *****************************/ - table{ - width : 100%; - thead{ - display : table-row-group; + //***************************** + // * BASE + // *****************************/ + .page{ + p{ + overflow-wrap : break-word; + display : block; + } + strong{ font-weight : bold; } - } - div:not(.columnWrapper) > table + table { // Side-by-side tables should not - margin-top : 0; // have vertical spacing. - } - - /* Watermark */ - .watermark { - display : grid !important; - place-items : center; - justify-content : center; - position : absolute; - margin : 0; - 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; + em{ + font-style : italic; } + sup{ + vertical-align : super; + font-size : smaller; + line-height : 0; + } + sub{ + vertical-align : sub; + font-size : smaller; + line-height : 0; + } + ul { + list-style-position : outside; //Needed for multiline list items + list-style-type : disc; + padding-left : 1.4em; + } + ol { + list-style-position : outside; + list-style-type : decimal; + padding-left : 1.4em; + } + 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; + white-space : pre-wrap; + overflow-wrap : break-word; + } + + pre code{ + width : 100%; + display : inline-block; + } + //***************************** + // * EXTRAS + // *****************************/ + .columnSplit { + visibility : hidden; + -webkit-column-break-after : always; + break-after : always; + -moz-column-break-after : always; + margin-top : 0; + & + * { + 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; + } + + /* Watermark */ + .watermark { + display : grid !important; + place-items : center; + justify-content : center; + position : absolute; + margin : 0; + 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; } + + /* Image Masks */ + [class*="imageMask"] { + position : absolute; + height : 200%; + width : 200%; + left : 50%; + bottom : 50%; + --rotation : 0; + --revealer : none; + --checkerboard : none; + --scaleX : 1; + --scaleY : 1; + -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)); + background-image : var(--checkerboard); + background-size : 20px; + z-index : -1; + transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY)); + transition : transform 2s; + & > p:has(img) { + position : absolute; + width : 50%; + height : 50%; + bottom : 50%; + left : 50%; + transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))); + transition : transform 2s; + } + & img { + position : absolute; + display : block; + bottom : 0; + } + &.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,.2) 0%, rgba(0,0,0,0.2)); + --checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image + } + } + + .imageMaskEdge1 { --wc : url(/assets/waterColorMasks/edge/0001.webp); } + .imageMaskEdge2 { --wc : url(/assets/waterColorMasks/edge/0002.webp); } + .imageMaskEdge3 { --wc : url(/assets/waterColorMasks/edge/0003.webp); } + .imageMaskEdge4 { --wc : url(/assets/waterColorMasks/edge/0004.webp); } + .imageMaskEdge5 { --wc : url(/assets/waterColorMasks/edge/0005.webp); } + .imageMaskEdge6 { --wc : url(/assets/waterColorMasks/edge/0006.webp); } + .imageMaskEdge7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); } + .imageMaskEdge8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); } + + [class*="imageMaskCorner"] { + height : 200%; + width : 200%; + left : calc(-50% + var(--offsetX)); + bottom : calc(-50% + var(--offsetY)); + -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%; + transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));; + & > p:has(img) { + width : 50%; + height : 50%; //Complex transform below to handle mix of % and cm offsets + left : 25%; + bottom : 25%; + 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))); + } + } + + .imageMaskCorner1 { --wc : url(/assets/waterColorMasks/corner/0001.webp); } + .imageMaskCorner2 { --wc : url(/assets/waterColorMasks/corner/0002.webp); } + .imageMaskCorner3 { --wc : url(/assets/waterColorMasks/corner/0003.webp); } + .imageMaskCorner4 { --wc : url(/assets/waterColorMasks/corner/0004.webp); } + .imageMaskCorner5 { --wc : url(/assets/waterColorMasks/corner/0005.webp); } + .imageMaskCorner6 { --wc : url(/assets/waterColorMasks/corner/0006.webp); } + .imageMaskCorner7 { --wc : url(/assets/waterColorMasks/corner/0007.webp); } + .imageMaskCorner8 { --wc : url(/assets/waterColorMasks/corner/0008.webp); } + .imageMaskCorner9 { --wc : url(/assets/waterColorMasks/corner/0009.webp); } + .imageMaskCorner10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); } + .imageMaskCorner11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); } + .imageMaskCorner12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); } + .imageMaskCorner13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); } + .imageMaskCorner14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); } + .imageMaskCorner15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); } + .imageMaskCorner16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); } + .imageMaskCorner17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); } + .imageMaskCorner18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); } + .imageMaskCorner19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); } + .imageMaskCorner20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); } + .imageMaskCorner21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); } + .imageMaskCorner22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); } + .imageMaskCorner23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); } + .imageMaskCorner24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); } + .imageMaskCorner25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); } + .imageMaskCorner26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); } + .imageMaskCorner27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); } + .imageMaskCorner28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); } + .imageMaskCorner29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); } + .imageMaskCorner30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); } + .imageMaskCorner31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); } + .imageMaskCorner32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); } + .imageMaskCorner33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); } + .imageMaskCorner34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); } + .imageMaskCorner35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); } + .imageMaskCorner36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); } + .imageMaskCorner37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); } } - /* 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; } - - //************************************ - // * CODE BLOCKS - // ************************************/ - code{ - font-family : "Courier New", Courier, monospace; - white-space : pre-wrap; - overflow-wrap : break-word; - } - - pre code{ - width : 100%; - display : inline-block; - } //***************************** - // * EXTRAS + // * DEFINITION LISTS // *****************************/ - .columnSplit { - visibility : hidden; - -webkit-column-break-after : always; - break-after : always; - -moz-column-break-after : always; - margin-top : 0; - & + * { + .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; + } } } - //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; - } -} -//***************************** -// * MUSTACHE DIVS/SPANS -// *****************************/ -.page { - .block { - break-inside : avoid; - display : inline-block; - width : 100%; - } - .inline-block { - display : inline-block; - text-indent : initial; - } -} - -//***************************** -// * 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; + //***************************** + // * WIDE + // *****************************/ + .page { + .wide{ + column-span : all; + display : block; + margin-bottom : 1em; + &+* { + margin-top : 0; + } } } } diff --git a/themes/assets/dragonBackground.png b/themes/assets/dragonBackground.png new file mode 100644 index 000000000..987e36e4d Binary files /dev/null and b/themes/assets/dragonBackground.png differ diff --git a/themes/assets/waterColorMasks/corner/0001.webp b/themes/assets/waterColorMasks/corner/0001.webp new file mode 100644 index 000000000..65830dbf1 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0001.webp differ diff --git a/themes/assets/waterColorMasks/corner/0002.webp b/themes/assets/waterColorMasks/corner/0002.webp new file mode 100644 index 000000000..250a94b38 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0002.webp differ diff --git a/themes/assets/waterColorMasks/corner/0003.webp b/themes/assets/waterColorMasks/corner/0003.webp new file mode 100644 index 000000000..6a6c8e660 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0003.webp differ diff --git a/themes/assets/waterColorMasks/corner/0004.webp b/themes/assets/waterColorMasks/corner/0004.webp new file mode 100644 index 000000000..d1fcc49f0 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0004.webp differ diff --git a/themes/assets/waterColorMasks/corner/0005.webp b/themes/assets/waterColorMasks/corner/0005.webp new file mode 100644 index 000000000..3fd1f0d8b Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0005.webp differ diff --git a/themes/assets/waterColorMasks/corner/0006.webp b/themes/assets/waterColorMasks/corner/0006.webp new file mode 100644 index 000000000..f5303afa7 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0006.webp differ diff --git a/themes/assets/waterColorMasks/corner/0007.webp b/themes/assets/waterColorMasks/corner/0007.webp new file mode 100644 index 000000000..6d8d9b9a3 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0007.webp differ diff --git a/themes/assets/waterColorMasks/corner/0008.webp b/themes/assets/waterColorMasks/corner/0008.webp new file mode 100644 index 000000000..a732854e1 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0008.webp differ diff --git a/themes/assets/waterColorMasks/corner/0009.webp b/themes/assets/waterColorMasks/corner/0009.webp new file mode 100644 index 000000000..c84e69a07 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0009.webp differ diff --git a/themes/assets/waterColorMasks/corner/0010.webp b/themes/assets/waterColorMasks/corner/0010.webp new file mode 100644 index 000000000..8fba1a496 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0010.webp differ diff --git a/themes/assets/waterColorMasks/corner/0011.webp b/themes/assets/waterColorMasks/corner/0011.webp new file mode 100644 index 000000000..c6526f9d7 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0011.webp differ diff --git a/themes/assets/waterColorMasks/corner/0012.webp b/themes/assets/waterColorMasks/corner/0012.webp new file mode 100644 index 000000000..0fafd03db Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0012.webp differ diff --git a/themes/assets/waterColorMasks/corner/0013.webp b/themes/assets/waterColorMasks/corner/0013.webp new file mode 100644 index 000000000..040234864 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0013.webp differ diff --git a/themes/assets/waterColorMasks/corner/0014.webp b/themes/assets/waterColorMasks/corner/0014.webp new file mode 100644 index 000000000..fa04254b2 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0014.webp differ diff --git a/themes/assets/waterColorMasks/corner/0015.webp b/themes/assets/waterColorMasks/corner/0015.webp new file mode 100644 index 000000000..f64bdc954 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0015.webp differ diff --git a/themes/assets/waterColorMasks/corner/0016.webp b/themes/assets/waterColorMasks/corner/0016.webp new file mode 100644 index 000000000..f727e56b5 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0016.webp differ diff --git a/themes/assets/waterColorMasks/corner/0017.webp b/themes/assets/waterColorMasks/corner/0017.webp new file mode 100644 index 000000000..00c6a2ac2 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0017.webp differ diff --git a/themes/assets/waterColorMasks/corner/0018.webp b/themes/assets/waterColorMasks/corner/0018.webp new file mode 100644 index 000000000..b9bd82283 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0018.webp differ diff --git a/themes/assets/waterColorMasks/corner/0019.webp b/themes/assets/waterColorMasks/corner/0019.webp new file mode 100644 index 000000000..452268aba Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0019.webp differ diff --git a/themes/assets/waterColorMasks/corner/0020.webp b/themes/assets/waterColorMasks/corner/0020.webp new file mode 100644 index 000000000..d8f9fbf60 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0020.webp differ diff --git a/themes/assets/waterColorMasks/corner/0021.webp b/themes/assets/waterColorMasks/corner/0021.webp new file mode 100644 index 000000000..08343ea74 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0021.webp differ diff --git a/themes/assets/waterColorMasks/corner/0022.webp b/themes/assets/waterColorMasks/corner/0022.webp new file mode 100644 index 000000000..6f64571e0 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0022.webp differ diff --git a/themes/assets/waterColorMasks/corner/0023.webp b/themes/assets/waterColorMasks/corner/0023.webp new file mode 100644 index 000000000..2c88031c5 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0023.webp differ diff --git a/themes/assets/waterColorMasks/corner/0024.webp b/themes/assets/waterColorMasks/corner/0024.webp new file mode 100644 index 000000000..a187a75b0 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0024.webp differ diff --git a/themes/assets/waterColorMasks/corner/0025.webp b/themes/assets/waterColorMasks/corner/0025.webp new file mode 100644 index 000000000..4511b6303 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0025.webp differ diff --git a/themes/assets/waterColorMasks/corner/0026.webp b/themes/assets/waterColorMasks/corner/0026.webp new file mode 100644 index 000000000..a5dd080ae Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0026.webp differ diff --git a/themes/assets/waterColorMasks/corner/0027.webp b/themes/assets/waterColorMasks/corner/0027.webp new file mode 100644 index 000000000..d7198530c Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0027.webp differ diff --git a/themes/assets/waterColorMasks/corner/0028.webp b/themes/assets/waterColorMasks/corner/0028.webp new file mode 100644 index 000000000..5b836ace9 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0028.webp differ diff --git a/themes/assets/waterColorMasks/corner/0029.webp b/themes/assets/waterColorMasks/corner/0029.webp new file mode 100644 index 000000000..ecf4200fc Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0029.webp differ diff --git a/themes/assets/waterColorMasks/corner/0030.webp b/themes/assets/waterColorMasks/corner/0030.webp new file mode 100644 index 000000000..73f2c954a Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0030.webp differ diff --git a/themes/assets/waterColorMasks/corner/0031.webp b/themes/assets/waterColorMasks/corner/0031.webp new file mode 100644 index 000000000..9fc1785a9 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0031.webp differ diff --git a/themes/assets/waterColorMasks/corner/0032.webp b/themes/assets/waterColorMasks/corner/0032.webp new file mode 100644 index 000000000..497aaa201 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0032.webp differ diff --git a/themes/assets/waterColorMasks/corner/0033.webp b/themes/assets/waterColorMasks/corner/0033.webp new file mode 100644 index 000000000..6086a5576 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0033.webp differ diff --git a/themes/assets/waterColorMasks/corner/0034.webp b/themes/assets/waterColorMasks/corner/0034.webp new file mode 100644 index 000000000..4e8885f2e Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0034.webp differ diff --git a/themes/assets/waterColorMasks/corner/0035.webp b/themes/assets/waterColorMasks/corner/0035.webp new file mode 100644 index 000000000..f010e194f Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0035.webp differ diff --git a/themes/assets/waterColorMasks/corner/0036.webp b/themes/assets/waterColorMasks/corner/0036.webp new file mode 100644 index 000000000..e662511d7 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0036.webp differ diff --git a/themes/assets/waterColorMasks/corner/0037.webp b/themes/assets/waterColorMasks/corner/0037.webp new file mode 100644 index 000000000..9e90d65c4 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0037.webp differ diff --git a/themes/assets/waterColorMasks/edge/0001.webp b/themes/assets/waterColorMasks/edge/0001.webp new file mode 100644 index 000000000..6138a1a1b Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0001.webp differ diff --git a/themes/assets/waterColorMasks/edge/0002.webp b/themes/assets/waterColorMasks/edge/0002.webp new file mode 100644 index 000000000..15766829b Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0002.webp differ diff --git a/themes/assets/waterColorMasks/edge/0003.webp b/themes/assets/waterColorMasks/edge/0003.webp new file mode 100644 index 000000000..ef77e7577 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0003.webp differ diff --git a/themes/assets/waterColorMasks/edge/0004.webp b/themes/assets/waterColorMasks/edge/0004.webp new file mode 100644 index 000000000..d18da828b Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0004.webp differ diff --git a/themes/assets/waterColorMasks/edge/0005.webp b/themes/assets/waterColorMasks/edge/0005.webp new file mode 100644 index 000000000..f9c9c12e7 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0005.webp differ diff --git a/themes/assets/waterColorMasks/edge/0006.webp b/themes/assets/waterColorMasks/edge/0006.webp new file mode 100644 index 000000000..f09e74316 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0006.webp differ diff --git a/themes/assets/waterColorMasks/edge/0007.webp b/themes/assets/waterColorMasks/edge/0007.webp new file mode 100644 index 000000000..197915e90 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0007.webp differ diff --git a/themes/assets/waterColorMasks/edge/0008.webp b/themes/assets/waterColorMasks/edge/0008.webp new file mode 100644 index 000000000..bf6c90229 Binary files /dev/null and b/themes/assets/waterColorMasks/edge/0008.webp differ diff --git a/themes/assets/waterColorMasks/missingImage.png b/themes/assets/waterColorMasks/missingImage.png new file mode 100644 index 000000000..08dcb816c Binary files /dev/null and b/themes/assets/waterColorMasks/missingImage.png differ