diff --git a/themes/V3/Blank/snippets/imageMask.gen.js b/themes/V3/Blank/snippets/imageMask.gen.js index 4e9f3fea3..1bbc27d5a 100644 --- a/themes/V3/Blank/snippets/imageMask.gen.js +++ b/themes/V3/Blank/snippets/imageMask.gen.js @@ -21,10 +21,10 @@ module.exports = { const offsetX = (x == 'left' ? '-50%' : '50%'); const offsetY = (y == 'top' ? '-50%' : '50%'); return dedent` - {{imageMaskCorner${_.random(1, 8)},--offsetX:${offsetX},--offsetY:${offsetY},--rotation:0 + {{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 7b096db35..0596f1133 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -299,21 +299,28 @@ .imageMaskEdge8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); } [class*="imageMaskCorner"] { - height : 100%; - width : 100%; + 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 : 200% 200%; //Scale both dimensions to fit page size + -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 : 200% 200%; //Scale both dimensions to fit page size + mask-size : 100% 100%; //Scale both dimensions to fit page size mask-position : 50% 50%; - transform : translateY(calc(50% + var(--offsetY))) translateX(calc(-50% + var(--offsetX))) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY)); + transform : rotate(calc(1deg * var(--rotation))); & > p:has(img) { - width : 100%; - height : 100%; //Complex transform below to handle mix of % and cm offsets - transform : rotate(calc(-1deg * var(--rotation))) translateX(calc(-1 * var(--offsetX))) translateY(calc(-1 * var(--offsetY))) rotate(calc(1deg * var(--rotation)))translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY)); + width : 50%; + height : 50%; //Complex transform below to handle mix of % and cm offsets + left : 25%; + bottom : 25%; + transform : rotate(calc(-1deg * var(--rotation))) + translateX(calc(-1 * var(--offsetX))) + translateY(calc(1 * var(--offsetY))) + scaleX(var(--scaleX)) scaleY(var(--scaleY)); } // &.bottom { // --rotation : 0; @@ -331,15 +338,43 @@ // } } - .imageMaskCorner1 { --wc : url(/assets/waterColorMasks/corner/0005.webp); } - .imageMaskCorner2 { --wc : url(/assets/waterColorMasks/corner/0006.webp); } - .imageMaskCorner3 { --wc : url(/assets/waterColorMasks/corner/0007.webp); } - .imageMaskCorner4 { --wc : url(/assets/waterColorMasks/corner/0008.webp); } - .imageMaskCorner5 { --wc : url(/assets/waterColorMasks/corner/0009.webp); } - .imageMaskCorner6 { --wc : url(/assets/waterColorMasks/corner/0010.webp); } - .imageMaskCorner7 { --wc : url(/assets/waterColorMasks/corner/0016.webp); } - .imageMaskCorner8 { --wc : url(/assets/waterColorMasks/corner/0017.webp); } - .imageMaskCorner66 { --wc : url(/assets/waterColorMasks/corner/0066.png); } + .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); } } //***************************** 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.png b/themes/assets/waterColorMasks/corner/0005.png deleted file mode 100644 index 5fc7bae0f..000000000 Binary files a/themes/assets/waterColorMasks/corner/0005.png and /dev/null differ diff --git a/themes/assets/waterColorMasks/corner/0005.webp b/themes/assets/waterColorMasks/corner/0005.webp index ebaeb7c7b..3fd1f0d8b 100644 Binary files a/themes/assets/waterColorMasks/corner/0005.webp 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 deleted file mode 100644 index 74fbfddb5..000000000 Binary files a/themes/assets/waterColorMasks/corner/0006.png and /dev/null differ diff --git a/themes/assets/waterColorMasks/corner/0006.webp b/themes/assets/waterColorMasks/corner/0006.webp index dc25ee34f..f5303afa7 100644 Binary files a/themes/assets/waterColorMasks/corner/0006.webp 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 deleted file mode 100644 index 456c25a1a..000000000 Binary files a/themes/assets/waterColorMasks/corner/0007.png and /dev/null differ diff --git a/themes/assets/waterColorMasks/corner/0007.webp b/themes/assets/waterColorMasks/corner/0007.webp index 7eba1daa9..6d8d9b9a3 100644 Binary files a/themes/assets/waterColorMasks/corner/0007.webp 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 deleted file mode 100644 index b738c4a4b..000000000 Binary files a/themes/assets/waterColorMasks/corner/0008.png and /dev/null differ diff --git a/themes/assets/waterColorMasks/corner/0008.webp b/themes/assets/waterColorMasks/corner/0008.webp index 8100eaff2..a732854e1 100644 Binary files a/themes/assets/waterColorMasks/corner/0008.webp 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 deleted file mode 100644 index 794c7f6fb..000000000 Binary files a/themes/assets/waterColorMasks/corner/0009.png and /dev/null differ diff --git a/themes/assets/waterColorMasks/corner/0009.webp b/themes/assets/waterColorMasks/corner/0009.webp index 46e20ad6d..c84e69a07 100644 Binary files a/themes/assets/waterColorMasks/corner/0009.webp 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 deleted file mode 100644 index b08072552..000000000 Binary files a/themes/assets/waterColorMasks/corner/0010.png and /dev/null differ diff --git a/themes/assets/waterColorMasks/corner/0010.webp b/themes/assets/waterColorMasks/corner/0010.webp index 3da96e189..8fba1a496 100644 Binary files a/themes/assets/waterColorMasks/corner/0010.webp 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.png b/themes/assets/waterColorMasks/corner/0016.png deleted file mode 100644 index 1c439111d..000000000 Binary files a/themes/assets/waterColorMasks/corner/0016.png and /dev/null differ diff --git a/themes/assets/waterColorMasks/corner/0016.webp b/themes/assets/waterColorMasks/corner/0016.webp index bd679804d..f727e56b5 100644 Binary files a/themes/assets/waterColorMasks/corner/0016.webp 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 deleted file mode 100644 index becaa6370..000000000 Binary files a/themes/assets/waterColorMasks/corner/0017.png and /dev/null differ diff --git a/themes/assets/waterColorMasks/corner/0017.webp b/themes/assets/waterColorMasks/corner/0017.webp index cd99244d0..00c6a2ac2 100644 Binary files a/themes/assets/waterColorMasks/corner/0017.webp 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/corner/0066.png b/themes/assets/waterColorMasks/corner/0066.png deleted file mode 100644 index 8d6571023..000000000 Binary files a/themes/assets/waterColorMasks/corner/0066.png and /dev/null differ