Mirror/brk
1
0
Fork 0
mirror of https://github.com/bitcoinresearchkit/brk.git synced 2026-06-08 14:11:56 -07:00
Code Issues Packages Projects Releases Wiki Activity

website: redesign part 2

Browse Source
This commit is contained in:
nym21
2026-06-03 12:41:26 +02:00
parent 90e8741fb7
commit a2fd1e03ad
2 changed files with 68 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/cube/index.js
+16 -14
View File
@@ -14,20 +14,22 @@ export function createCube({ fill = 0.5 } = {}) {
return element;
};
cube.append(
face("glass", "bottom"),
face("glass", "rear-right"),
face("glass", "rear-left"),
face("liquid", "bottom"),
face("liquid", "rear-right"),
face("liquid", "rear-left"),
face("liquid", "right"),
face("liquid", "left"),
face("liquid", "top"),
face("glass", "right"),
face("glass", "left"),
face("glass", "top"),
);
const faces = /** @type {const} */ ([
["glass", "front", "bottom"],
["glass", "rear", "right"],
["glass", "rear", "left"],
["liquid", "front", "bottom"],
["liquid", "rear", "right"],
["liquid", "rear", "left"],
["liquid", "front", "right"],
["liquid", "front", "left"],
["liquid", "front", "top"],
["glass", "front", "right"],
["glass", "front", "left"],
["glass", "front", "top"],
]);
cube.append(...faces.map((names) => face(...names)));
return cube;
}
website/cube/style.css
+52 -68
View File
@@ -25,10 +25,7 @@
width: var(--size);
height: var(--size);
transform: translateY(50%) var(--orient)
translate(
calc(var(--size) * var(--x)),
calc(var(--size) * var(--y))
)
translate(calc(var(--size) * var(--x)), calc(var(--size) * var(--y)))
scale(var(--scale-x, 1), var(--scale-y));
}
@@ -45,73 +42,61 @@
--stack-shift: 0;
}
.top,
.bottom {
--orient: rotate(30deg) skewX(-30deg);
--scale-y: var(--iso-scale);
.front {
&.top,
&.bottom {
--orient: rotate(30deg) skewX(-30deg);
--scale-y: var(--iso-scale);
}
&.right {
--orient: rotate(-30deg) skewX(-30deg);
--face-color: var(--face-right);
--x: 1;
--y: calc(var(--stack-shift) + var(--iso-scale));
}
&.left {
--orient: rotate(30deg) skewX(30deg);
--face-color: var(--face-left);
--x: 0;
--y: var(--stack-shift);
}
&.top {
--face-color: var(--face-top);
--x: 0;
--y: calc(var(--stack-shift) - var(--iso-scale));
}
&.bottom {
--face-color: var(--face-bottom);
--x: 1;
--y: 0;
}
}
.right,
.rear-left {
--orient: rotate(-30deg) skewX(-30deg);
.rear {
&.right {
--orient: rotate(30deg) skewX(30deg);
--face-color: var(--face-left);
--x: 1;
--y: calc(var(--stack-shift) - var(--iso-scale));
}
&.left {
--orient: rotate(-30deg) skewX(-30deg);
--face-color: var(--face-top);
--x: 1;
--y: var(--stack-shift);
--scale-x: -1;
}
}
.left,
.rear-right {
--orient: rotate(30deg) skewX(30deg);
}
.top,
.rear-right {
--y: calc(var(--stack-shift) - var(--iso-scale));
}
.left,
.rear-left {
--y: var(--stack-shift);
}
.right {
--y: calc(var(--stack-shift) + var(--iso-scale));
}
.bottom {
--y: 0;
}
.top {
--face-color: var(--face-top);
--x: 0;
}
.bottom {
--face-color: var(--face-bottom);
--x: 1;
}
.right {
--face-color: var(--face-right);
--x: 1;
}
.left {
--face-color: var(--face-left);
--x: 0;
}
.rear-right {
--face-color: var(--face-left);
--x: 1;
}
.rear-left {
--face-color: var(--face-top);
--x: 1;
--scale-x: -1;
}
.liquid.top {
--x: calc(1 - var(--fill));
.liquid {
&.front.top {
--x: calc(1 - var(--fill));
}
}
}
@@ -119,7 +104,6 @@
from {
--fill: 0.01;
}
to {
--fill: 1;
}