diff --git a/themes/V3/Blank/snippets/imageMask.gen.js b/themes/V3/Blank/snippets/imageMask.gen.js index 9891fe576..c7487c0bf 100644 --- a/themes/V3/Blank/snippets/imageMask.gen.js +++ b/themes/V3/Blank/snippets/imageMask.gen.js @@ -13,11 +13,12 @@ module.exports = { corner : ()=>{ return dedent` - {{imageMaskCorner${_.random(1, 8)},--offset:0cm,bottom,left + {{imageMaskCorner${_.random(1, 8)},--offsetX:0%,offsetY:0% ![](https://i.imgur.com/1w5khYt.png){height:100%} }} - \n\n`; + \n\n`; } }; diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index 7c3c205c2..7b096db35 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -299,21 +299,36 @@ .imageMaskEdge8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); } [class*="imageMaskCorner"] { - -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; + height : 100%; + width : 100%; + -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-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-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)); + & > 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)); } + // &.bottom { + // --rotation : 0; + // } + // &.top { + // --rotation : 0; + // --scaleY : -1; + // } + // &.left { + // --rotation : 0; + // } + // &.right { + // --rotation : 0; + // --scaleX : -1; + // } } .imageMaskCorner1 { --wc : url(/assets/waterColorMasks/corner/0005.webp); } @@ -324,6 +339,7 @@ .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); } } //***************************** diff --git a/themes/assets/waterColorMasks/corner/0066.png b/themes/assets/waterColorMasks/corner/0066.png new file mode 100644 index 000000000..8d6571023 Binary files /dev/null and b/themes/assets/waterColorMasks/corner/0066.png differ