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

Add 8 corner images.

Browse Source 
Doesn't work well with --rotation but you can just set top,left or whatever. --offset works.
This commit is contained in:
Trevor Buckner
2022-09-27 23:55:24 -04:00
parent b8d7d1a8e4
commit 89c091c630
21 changed files with 65 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -180,9 +180,11 @@ body {
--rotation : 0;
--revealer : none;
--checkerboard : none;
--scaleX : 1;
--scaleY : 1;
-webkit-mask-image : var(--wc), var(--revealer);
-webkit-mask-repeat : repeat-x;
-webkit-mask-size : 50%;
-webkit-mask-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
-webkit-mask-position : 50% calc(50% - var(--offset));
mask-image : var(--wc);
mask-repeat : repeat-x;
@@ -191,7 +193,7 @@ body {
background-image : var(--checkerboard);
background-size : 20px;
z-index : -1;
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation)));
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
transition : transform 2s;
& > p:has(img) {
position : absolute;
@@ -199,7 +201,7 @@ body {
height : 50%;
bottom : 50%;
left : 50%;
transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation)));
transform : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
transition : transform 2s;
}
& img {
@@ -238,6 +240,33 @@ body {
.imageMask7 { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
.imageMask8 { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
[class*="imageMask_Corner"] {
-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;
}
}
.imageMask_Corner1 { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
.imageMask_Corner2 { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
.imageMask_Corner3 { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
.imageMask_Corner4 { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
.imageMask_Corner5 { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
.imageMask_Corner6 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
.imageMask_Corner7 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
.imageMask_Corner8 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
//************************************
// * CODE BLOCKS
// ************************************/