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

Rework Corner snippet and CSS to allow free rotation

Browse Source
This commit is contained in:
Trevor Buckner
2023-02-02 11:48:30 -05:00
parent 73f141613e
commit 096e281a6c
3 changed files with 34 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,11 +13,12 @@ module.exports = {
corner : ()=>{ corner : ()=>{
return dedent` 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%} ![](https://i.imgur.com/1w5khYt.png){height:100%}
}} }}
<!-- Use offset to shift the edge up or down. <!-- Use --offsetX to shift the mask left or right (you can use cm instead of %)
Use top, bottom, left, and right to select a corner -->\n\n`; Use --offsetY to shift the mask up or down
Use --rotation to set rotation angle in degrees. -->\n\n`;
} }
}; };

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

@@ -299,21 +299,36 @@
.imageMaskEdge8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); } .imageMaskEdge8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
[class*="imageMaskCorner"] { [class*="imageMaskCorner"] {
-webkit-mask-size : 50% 50%; //Scale both dimensions to fit page size height : 100%;
&.bottom { width : 100%;
--rotation : 0; -webkit-mask-image : var(--wc), var(--revealer);
} -webkit-mask-repeat : no-repeat;
&.top { -webkit-mask-size : 200% 200%; //Scale both dimensions to fit page size
--rotation : 0; -webkit-mask-position : 50% 50%;
--scaleY : -1; mask-image : var(--wc), var(--revealer);
} mask-repeat : no-repeat;
&.left { mask-size : 200% 200%; //Scale both dimensions to fit page size
--rotation : 0; 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));
&.right { & > p:has(img) {
--rotation : 0; width : 100%;
--scaleX : -1; 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); } .imageMaskCorner1 { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
@@ -324,6 +339,7 @@
.imageMaskCorner6 { --wc : url(/assets/waterColorMasks/corner/0010.webp); } .imageMaskCorner6 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
.imageMaskCorner7 { --wc : url(/assets/waterColorMasks/corner/0016.webp); } .imageMaskCorner7 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
.imageMaskCorner8 { --wc : url(/assets/waterColorMasks/corner/0017.webp); } .imageMaskCorner8 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
.imageMaskCorner66 { --wc : url(/assets/waterColorMasks/corner/0066.png); }
} }
//***************************** //*****************************

BIN
themes/assets/waterColorMasks/corner/0066.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 KiB