f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-16 06:02:41 +00:00
Code Wiki Activity

initial draft

Browse Source
This commit is contained in:
Victor Losada Hernandez
2023-03-16 17:54:19 +01:00
parent cc89ad1c7d
commit b041ef921e
16 changed files with 110 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/icons/customIcons.less
View File

@@ -31,6 +31,9 @@
.mask-corner { .mask-corner {
content: url('../icons/mask-corner.svg'); content: url('../icons/mask-corner.svg');
} }
.mask-center {
content: url('../icons/mask-center.svg');
}
.fa-file-c { .fa-file-c {
content: url('../icons/fa-file-c.svg'); content: url('../icons/fa-file-c.svg');
} }

1
client/icons/mask-center.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="svg135" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><defs><style>.cls-1{fill:none;}.cls-2{stroke:#000;stroke-linejoin:round;stroke-width:48px;fill:url(#pattern3077);}</style><pattern id="pattern3077" data-name="pattern3077" width="448" height="512" patternTransform="matrix(23.13, -23.13, -19.26, -19.26, -1.79, 90.95)" patternUnits="userSpaceOnUse" viewBox="0 0 448 512"><rect class="cls-1" width="448" height="512"/></pattern></defs><title>mask-center</title><path id="rect12201" d="M48,0A47.9,47.9,0,0,0,0,48V464a47.9,47.9,0,0,0,48,48H400a47.9,47.9,0,0,0,48-48V48A47.9,47.9,0,0,0,400,0ZM64,64H384V448H64Z" transform="translate(0 0)"/><rect id="rect12206" class="cls-2" x="120" y="136" width="208" height="240" rx="48"/><rect x="108.72" y="311.23" width="155.02" height="27.59" transform="translate(270.52 -39.97) rotate(42.82)"/><rect x="192.67" y="174.17" width="155.02" height="27.59" transform="translate(199.74 -133.54) rotate(42.82)"/><rect x="94.98" y="268.02" width="244.38" height="27.59" transform="translate(249.4 -72.5) rotate(42.82)"/><rect x="130.37" y="213.66" width="214.96" height="27.59" transform="translate(217.97 -101.05) rotate(42.82)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

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

@@ -101,6 +101,12 @@ module.exports = [
icon : 'fas fa-fill-drip', icon : 'fas fa-fill-drip',
gen : WatercolorGen, gen : WatercolorGen,
}, },
{
name : 'Watercolor Center',
icon : 'fac mask-center',
gen : ImageMaskGen.center,
experimental : true,
},
{ {
name : 'Watercolor Edge', name : 'Watercolor Edge',
icon : 'fac mask-edge', icon : 'fac mask-edge',

11
themes/V3/Blank/snippets/imageMask.gen.js
View File

@@ -2,6 +2,15 @@ const _ = require('lodash');
const dedent = require('dedent-tabs').default; const dedent = require('dedent-tabs').default;
module.exports = { module.exports = {
center :()=>{
return dedent`
{{imageMaskCenter${_.random(1, 10)},--offsetX:0cm,--offsetY:0cm,--rotation:0;
![](https://i.imgur.com/GZfjDWV.png){height:100%}
}}
<!-- Use --offset to shift the mask toward or away from the page center.
Use --rotation to set rotation angle in degrees. -->\n\n`;
},
edge : (side = 'bottom')=>{ edge : (side = 'bottom')=>{
const rotation = { const rotation = {
'bottom' : 0, 'bottom' : 0,
@@ -21,7 +30,7 @@ module.exports = {
const offsetX = (x == 'left' ? '-50%' : '50%'); const offsetX = (x == 'left' ? '-50%' : '50%');
const offsetY = (y == 'top' ? '50%' : '-50%'); const offsetY = (y == 'top' ? '50%' : '-50%');
return dedent` return dedent`
{{imageMaskCorner${_.random(1, 37)},--offsetX:${offsetX},--offsetY:${offsetY},--rotation:0 {{imageMaskCorner${_.random(1, 37)},--offsetX:${offsetX},--offsetY:${offsetY},--rotation:0deg
![](https://i.imgur.com/GZfjDWV.png){height:100%} ![](https://i.imgur.com/GZfjDWV.png){height:100%}
}} }}
<!-- Use --offsetX to shift the mask left or right (can use cm instead of %) <!-- Use --offsetX to shift the mask left or right (can use cm instead of %)

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

@@ -187,7 +187,6 @@ body {
height : 100%; height : 100%;
font-size : 120px; font-size : 120px;
text-transform : uppercase; text-transform : uppercase;
color : black;
mix-blend-mode : overlay; mix-blend-mode : overlay;
opacity : 30%; opacity : 30%;
transform : rotate(-45deg); transform : rotate(-45deg);
@@ -228,6 +227,7 @@ body {
.watercolor12 { --wc : @watercolor12; } .watercolor12 { --wc : @watercolor12; }
/* Image Masks */ /* Image Masks */
[class*="imageMask"] { [class*="imageMask"] {
position : absolute; position : absolute;
height : 200%; height : 200%;
@@ -288,14 +288,55 @@ body {
} }
} }
.imageMaskEdge1 { --wc : url(/assets/waterColorMasks/edge/0001.webp); } .imageMaskEdge {
.imageMaskEdge2 { --wc : url(/assets/waterColorMasks/edge/0002.webp); } &1 { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
.imageMaskEdge3 { --wc : url(/assets/waterColorMasks/edge/0003.webp); } &2 { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
.imageMaskEdge4 { --wc : url(/assets/waterColorMasks/edge/0004.webp); } &3 { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
.imageMaskEdge5 { --wc : url(/assets/waterColorMasks/edge/0005.webp); } &4 { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
.imageMaskEdge6 { --wc : url(/assets/waterColorMasks/edge/0006.webp); } &5 { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
.imageMaskEdge7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); } &6 { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
.imageMaskEdge8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); } &7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
&8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
}
[class*="imageMaskCenter"] {
width: 100%;
height: 100%;
bottom: 0;
left: 0;
transform: rotate(calc(1deg * var(--rotation)));
-webkit-mask-position: calc(0% + var(--offsetX)) calc(0% + var(--offsetY));
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-position: center;
mask-size: 100%;
mask-repeat: no-repeat;
& > p:has(img) {
position : absolute;
width : 100%;
height : 100%;
bottom : 0;
left : 0;
transform : unset;
transition : transform 2s;
}
}
.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); }
}
[class*="imageMaskCorner"] { [class*="imageMaskCorner"] {
height : 200%; height : 200%;
@@ -318,48 +359,49 @@ body {
bottom : 25%; bottom : 25%;
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))) transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
rotate(calc(-1deg * var(--rotation))) rotate(calc(-1deg * var(--rotation)))
translateX(calc(-1 * var(--offsetX))) translateX(calc(-1 * var(--offsetX)))
translateY(calc(1 * var(--offsetY))); translateY(calc(1 * var(--offsetY)));
} }
} }
.imageMaskCorner {
.imageMaskCorner1 { --wc : url(/assets/waterColorMasks/corner/0001.webp); } &1 { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
.imageMaskCorner2 { --wc : url(/assets/waterColorMasks/corner/0002.webp); } &2 { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
.imageMaskCorner3 { --wc : url(/assets/waterColorMasks/corner/0003.webp); } &3 { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
.imageMaskCorner4 { --wc : url(/assets/waterColorMasks/corner/0004.webp); } &4 { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
.imageMaskCorner5 { --wc : url(/assets/waterColorMasks/corner/0005.webp); } &5 { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
.imageMaskCorner6 { --wc : url(/assets/waterColorMasks/corner/0006.webp); } &6 { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
.imageMaskCorner7 { --wc : url(/assets/waterColorMasks/corner/0007.webp); } &7 { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
.imageMaskCorner8 { --wc : url(/assets/waterColorMasks/corner/0008.webp); } &8 { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
.imageMaskCorner9 { --wc : url(/assets/waterColorMasks/corner/0009.webp); } &9 { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
.imageMaskCorner10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); } &10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
.imageMaskCorner11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); } &11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
.imageMaskCorner12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); } &12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
.imageMaskCorner13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); } &13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
.imageMaskCorner14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); } &14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
.imageMaskCorner15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); } &15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
.imageMaskCorner16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); } &16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
.imageMaskCorner17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); } &17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
.imageMaskCorner18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); } &18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
.imageMaskCorner19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); } &19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
.imageMaskCorner20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); } &20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
.imageMaskCorner21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); } &21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
.imageMaskCorner22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); } &22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
.imageMaskCorner23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); } &23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
.imageMaskCorner24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); } &24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
.imageMaskCorner25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); } &25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
.imageMaskCorner26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); } &26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
.imageMaskCorner27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); } &27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
.imageMaskCorner28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); } &28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
.imageMaskCorner29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); } &29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
.imageMaskCorner30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); } &30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
.imageMaskCorner31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); } &31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
.imageMaskCorner32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); } &32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
.imageMaskCorner33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); } &33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
.imageMaskCorner34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); } &34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
.imageMaskCorner35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); } &35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
.imageMaskCorner36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); } &36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
.imageMaskCorner37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); } &37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); }
}
} }
//***************************** //*****************************

BIN
themes/assets/waterColorMasks/center/0001.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
themes/assets/waterColorMasks/center/0002.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
themes/assets/waterColorMasks/center/0003.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
themes/assets/waterColorMasks/center/0004.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
themes/assets/waterColorMasks/center/0005.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
themes/assets/waterColorMasks/center/0006.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
themes/assets/waterColorMasks/center/0007.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
themes/assets/waterColorMasks/center/0008.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
themes/assets/waterColorMasks/center/0009.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
themes/assets/waterColorMasks/center/0010.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
themes/assets/waterColorMasks/center/0011.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB