RGBCube/Site
1
Fork 0
mirror of https://github.com/RGBCube/Site synced 2025-08-01 13:37:49 +00:00
Code Issues Activity Actions

cube: make more generic, step 1

Browse source
This commit is contained in:
RGBCube 2025-06-03 03:20:03 +03:00
parent 70f94588c9
commit b6c3592c2a
Signed by: RGBCube
SSH key fingerprint: SHA256:CzqbPcfwt+GxFYNnFVCqoN5Itn4YFrshg1TrnACpA5M
2 changed files with 25 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

23
site/_includes/cube.vto
View file

@ -8,6 +8,13 @@
overscroll-behavior: none;
}
cube-face {
height: var(--cube-width);
width: var(--cube-width);
position: absolute;
}
/* Guess what? Yeah, you guessed right. Safari can't render shit. */
.cube-face-front { transform: rotateY(0deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
.cube-face-top { transform: rotateX( 89.99999999999999deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
@ -26,16 +33,12 @@
size-(--cube-width)
transform-3d transform-[translateZ(-calc(var(--cube-width)/2-1px))]
">
{{> const style = `
size-(--cube-width) absolute
flex items-center justify-center
` }}
<cube-face draggable="false" class="{{ style }} cube-face-front"> {{ cube_face_front }} </cube-face>
<cube-face draggable="false" class="{{ style }} cube-face-back"> {{ cube_face_back }} </cube-face>
<cube-face draggable="false" class="{{ style }} cube-face-left"> {{ cube_face_left }} </cube-face>
<cube-face draggable="false" class="{{ style }} cube-face-right"> {{ cube_face_right }} </cube-face>
<cube-face draggable="false" class="{{ style }} cube-face-top"> {{ cube_face_top }} </cube-face>
<cube-face draggable="false" class="{{ style }} cube-face-bottom"> {{ cube_face_bottom }} </cube-face>
<cube-face draggable="false" class="cube-face-front"> {{ cube_face_front }} </cube-face>
<cube-face draggable="false" class="cube-face-back"> {{ cube_face_back }} </cube-face>
<cube-face draggable="false" class="cube-face-left"> {{ cube_face_left }} </cube-face>
<cube-face draggable="false" class="cube-face-right"> {{ cube_face_right }} </cube-face>
<cube-face draggable="false" class="cube-face-top"> {{ cube_face_top }} </cube-face>
<cube-face draggable="false" class="cube-face-bottom"> {{ cube_face_bottom }} </cube-face>
</cube-itself>
</cube-scene>

8
site/index.vto
View file

@ -3,7 +3,12 @@ prevent_zoom: true
---
<style>
cube-face::after {
cube-face {
display: flex;
align-items: center;
justify-content: center;
&::after {
z-index: -1;
content: "";
@ -12,6 +17,7 @@ prevent_zoom: true
position: absolute;
}
}
.cube-face-front {
background: linear-gradient(to bottom, cyan, blue);