diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
index 79a4f7d0f..171fc5bb4 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -96,7 +96,7 @@ const BrewItem = createClass({
render : function(){
const brew = this.props.brew;
if(Array.isArray(brew.tags)) { // temporary fix until dud tags are cleaned
- brew.tags = brew.tags?.filter(tag => tag); //remove tags that are empty strings
+ brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
}
const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
@@ -112,7 +112,7 @@ const BrewItem = createClass({
{brew.tags.map((tag, idx)=>{
- let matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+ const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
return {matches[2]};
})}
diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js
index d3da91765..285bad049 100644
--- a/themes/V3/Blank/snippets.js
+++ b/themes/V3/Blank/snippets.js
@@ -104,9 +104,14 @@ module.exports = [
gen : WatercolorGen,
},
{
- name : 'Watercolor Image Mask',
+ name : 'Watercolor Image Mask Edge',
icon : 'fas fa-fill-drip',
- gen : ImageMaskGen,
+ gen : ImageMaskGen.edge,
+ },
+ {
+ name : 'Watercolor Image Mask Corner',
+ icon : 'fas fa-fill-drip',
+ gen : ImageMaskGen.corner,
},
{
name : 'Watermark',
diff --git a/themes/V3/Blank/snippets/imageMask.gen.js b/themes/V3/Blank/snippets/imageMask.gen.js
index 9c9b9049b..d14bda3ce 100644
--- a/themes/V3/Blank/snippets/imageMask.gen.js
+++ b/themes/V3/Blank/snippets/imageMask.gen.js
@@ -1,7 +1,27 @@
const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
+
+module.exports = {
+ edge : ()=>{
+ return dedent`
+ {{imageMask${_.random(1, 8)},--offset:0cm,--rotation:0
+ {height:100%}
+
+
+ }}\n\n`;
+ },
+
+ corner : ()=>{
+ return dedent`
+ {{imageMask_Corner${_.random(1, 8)},--offset:0cm,bottom,left
+ {height:100%}
+
+
+ }}\n\n`;
+ }
+
+};
+
+()=>{
-module.exports = ()=>{
- return `{{imageMask${_.random(1, 6)},--offset:0cm,--rotation:0
-{height:100%}
-}}\n\n`;
};
diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less
index 10c949e25..0bab5fbfe 100644
--- a/themes/V3/Blank/style.less
+++ b/themes/V3/Blank/style.less
@@ -180,9 +180,11 @@ body {
--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%;
+ -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;
@@ -191,7 +193,7 @@ body {
background-image : var(--checkerboard);
background-size : 20px;
z-index : -1;
- transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation)));
+ transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
transition : transform 2s;
& > p:has(img) {
position : absolute;
@@ -199,7 +201,7 @@ body {
height : 50%;
bottom : 50%;
left : 50%;
- transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation)));
+ transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
transition : transform 2s;
}
& img {
@@ -238,6 +240,33 @@ body {
.imageMask7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
.imageMask8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
+ [class*="imageMask_Corner"] {
+ -webkit-mask-size : 50% 50%; //Scale both dimensions to fit page size
+ &.bottom {
+ --rotation : 0;
+ }
+ &.top {
+ --rotation : 0;
+ --scaleY : -1;
+ }
+ &.left {
+ --rotation : 0;
+ }
+ &.right {
+ --rotation : 0;
+ --scaleX : -1;
+ }
+ }
+
+ .imageMask_Corner1 { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
+ .imageMask_Corner2 { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
+ .imageMask_Corner3 { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
+ .imageMask_Corner4 { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
+ .imageMask_Corner5 { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
+ .imageMask_Corner6 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
+ .imageMask_Corner7 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
+ .imageMask_Corner8 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
+
//************************************
// * CODE BLOCKS
// ************************************/
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/0005.png b/themes/assets/waterColorMasks/corner/0005.png
new file mode 100644
index 000000000..5fc7bae0f
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0005.png differ
diff --git a/themes/assets/waterColorMasks/corner/0005.webp b/themes/assets/waterColorMasks/corner/0005.webp
new file mode 100644
index 000000000..ebaeb7c7b
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0005.webp differ
diff --git a/themes/assets/waterColorMasks/corner/0006.png b/themes/assets/waterColorMasks/corner/0006.png
new file mode 100644
index 000000000..74fbfddb5
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0006.png differ
diff --git a/themes/assets/waterColorMasks/corner/0006.webp b/themes/assets/waterColorMasks/corner/0006.webp
new file mode 100644
index 000000000..dc25ee34f
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0006.webp differ
diff --git a/themes/assets/waterColorMasks/corner/0007.png b/themes/assets/waterColorMasks/corner/0007.png
new file mode 100644
index 000000000..456c25a1a
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0007.png differ
diff --git a/themes/assets/waterColorMasks/corner/0007.webp b/themes/assets/waterColorMasks/corner/0007.webp
new file mode 100644
index 000000000..7eba1daa9
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0007.webp differ
diff --git a/themes/assets/waterColorMasks/corner/0008.png b/themes/assets/waterColorMasks/corner/0008.png
new file mode 100644
index 000000000..b738c4a4b
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0008.png differ
diff --git a/themes/assets/waterColorMasks/corner/0008.webp b/themes/assets/waterColorMasks/corner/0008.webp
new file mode 100644
index 000000000..8100eaff2
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0008.webp differ
diff --git a/themes/assets/waterColorMasks/corner/0009.png b/themes/assets/waterColorMasks/corner/0009.png
new file mode 100644
index 000000000..794c7f6fb
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0009.png differ
diff --git a/themes/assets/waterColorMasks/corner/0009.webp b/themes/assets/waterColorMasks/corner/0009.webp
new file mode 100644
index 000000000..46e20ad6d
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0009.webp differ
diff --git a/themes/assets/waterColorMasks/corner/0010.png b/themes/assets/waterColorMasks/corner/0010.png
new file mode 100644
index 000000000..b08072552
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0010.png differ
diff --git a/themes/assets/waterColorMasks/corner/0010.webp b/themes/assets/waterColorMasks/corner/0010.webp
new file mode 100644
index 000000000..3da96e189
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0010.webp differ
diff --git a/themes/assets/waterColorMasks/corner/0016.png b/themes/assets/waterColorMasks/corner/0016.png
new file mode 100644
index 000000000..1c439111d
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0016.png differ
diff --git a/themes/assets/waterColorMasks/corner/0016.webp b/themes/assets/waterColorMasks/corner/0016.webp
new file mode 100644
index 000000000..bd679804d
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0016.webp differ
diff --git a/themes/assets/waterColorMasks/corner/0017.png b/themes/assets/waterColorMasks/corner/0017.png
new file mode 100644
index 000000000..becaa6370
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0017.png differ
diff --git a/themes/assets/waterColorMasks/corner/0017.webp b/themes/assets/waterColorMasks/corner/0017.webp
new file mode 100644
index 000000000..cd99244d0
Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0017.webp differ