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; 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. */ /* 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-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)); } .cube-face-top { transform: rotateX( 89.99999999999999deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
@ -26,16 +33,12 @@
size-(--cube-width) size-(--cube-width)
transform-3d transform-[translateZ(-calc(var(--cube-width)/2-1px))] transform-3d transform-[translateZ(-calc(var(--cube-width)/2-1px))]
"> ">
{{> const style = ` <cube-face draggable="false" class="cube-face-front"> {{ cube_face_front }} </cube-face>
size-(--cube-width) absolute <cube-face draggable="false" class="cube-face-back"> {{ cube_face_back }} </cube-face>
flex items-center justify-center <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="{{ style }} cube-face-front"> {{ cube_face_front }} </cube-face> <cube-face draggable="false" class="cube-face-top"> {{ cube_face_top }} </cube-face>
<cube-face draggable="false" class="{{ style }} cube-face-back"> {{ cube_face_back }} </cube-face> <cube-face draggable="false" class="cube-face-bottom"> {{ cube_face_bottom }} </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-itself> </cube-itself>
</cube-scene> </cube-scene>

18
site/index.vto
View file

@ -3,14 +3,20 @@ prevent_zoom: true
--- ---
<style> <style>
cube-face::after { cube-face {
z-index: -1; display: flex;
content: ""; align-items: center;
justify-content: center;
height: inherit; &::after {
width: inherit; z-index: -1;
content: "";
position: absolute; height: inherit;
width: inherit;
position: absolute;
}
} }
.cube-face-front { .cube-face-front {