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

Merge branch 'master' into addSmartPageBreak-#2289

Browse Source
This commit is contained in:
G.Ambatte
2023-06-03 12:16:18 +12:00
parent c30eb9056a e6e04ad21d
commit 43ae80e80d
197 changed files with 23938 additions and 23162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
themes/V3/Blank/dropdownPreview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 KiB

69
themes/V3/Blank/snippets.js
View File

@@ -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 = [
@@ -107,6 +106,68 @@ module.exports = [
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',

46
themes/V3/Blank/snippets/imageMask.gen.js Normal file
View 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
![](https://i.imgur.com/GZfjDWV.png){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}
![](https://i.imgur.com/GZfjDWV.png){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
![](https://i.imgur.com/GZfjDWV.png){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`;
}
};
()=>{
};

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

@@ -15,6 +15,24 @@ body {
-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: balance){
column-fill : @fillMode;
column-count : 2;
@@ -39,11 +57,12 @@ body {
text-rendering : optimizeLegibility;
page-break-before : always;
page-break-after : always;
contain : size;
}
//*****************************
// * BASE
// *****************************/
:where(.page){
.page{
p{
overflow-wrap : break-word;
display : block;
@@ -77,13 +96,7 @@ body {
img{
z-index : -1;
}
:not(:where(.wide,.columnSplit,.blank,hr)) + :where(h1,h2,h3,h4,h5,h6,table,dl,.block) {
margin-top : 1em; //NOTE: MAKE ALL MARGINS TOP-ONLY FOR BEST RESULTS WITH COLUMN BREAKS. USE * + * STYLE SELECTORS
}
:where(h1,h3,h3,h4,h5,h6) + * {
margin-top : 0;
}
//*****************************
// * HEADERS
// *****************************/
@@ -116,6 +129,53 @@ body {
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 {
@@ -130,7 +190,6 @@ body {
height : 100%;
font-size : 120px;
text-transform : uppercase;
color : black;
mix-blend-mode : overlay;
opacity : 30%;
transform : rotate(-45deg);
@@ -170,68 +229,197 @@ body {
.watercolor11 { --wc : @watercolor11; }
.watercolor12 { --wc : @watercolor12; }
//************************************
// * CODE BLOCKS
// ************************************/
code{
font-family : "Courier New", Courier, monospace;
white-space : pre-wrap;
overflow-wrap : break-word;
}
/* Image Masks */
pre code{
width : 100%;
display : inline-block;
}
//*****************************
// * EXTRAS
// *****************************/
.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;
}
// 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
// *****************************/
:where(.page) {
.block {
break-inside : avoid;
display : inline-block;
.page :where(&) {
width : 100%;
[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));
& > 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)));
}
& 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
}
}
.inline-block {
display : inline-block;
text-indent : initial;
.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"] {
width : 100%;
height : 100%;
left : calc(var(--offsetX));
bottom : calc(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 : 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%;
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
& > p:has(img) {
position : absolute;
width : 100%;
height : 100%;
bottom : 0;
left : 0;
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"] {
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)));
}
}
.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
// *****************************/
:where(.page) {
.page {
dl {
padding-left : 1em;
white-space : pre-line;
@@ -251,17 +439,20 @@ body {
//*****************************
// * BLANK LINE
// *****************************/
:where(.page) {
.page {
.blank {
height : 1em;
margin-top : 0;
& + * {
margin-top : 0;
}
}
}
//*****************************
// * WIDE
// *****************************/
:where(.page) {
.page {
.wide{
column-span : all;
display : block;