f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-16 19:02: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

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); }
}
//*****************************