f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +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 : ()=>{
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%}
}}
<!-- Use offset to shift the edge up or down.
Use top, bottom, left, and right to select a corner -->\n\n`;
<!-- Use --offsetX to shift the mask left or right (you can use cm instead of %)
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); }
[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); }
}
//*****************************

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 KiB