RGBCube/Site
1
Fork 0
mirror of https://github.com/RGBCube/Site synced 2025-07-30 20:47:46 +00:00
Code Issues Activity Actions

cube: make cube size a template parameter

Browse source
This commit is contained in:
RGBCube 2025-06-03 03:32:37 +03:00
parent adeca4879a
commit e25d198cc9
Signed by: RGBCube
SSH key fingerprint: SHA256:CzqbPcfwt+GxFYNnFVCqoN5Itn4YFrshg1TrnACpA5M
3 changed files with 13 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

1
site/404.vto
View file

@ -29,4 +29,5 @@ prevent_zoom: true
{{ set cube_face_top = cube_face }}
{{ set cube_face_bottom = cube_face }}
{{ set cube_size = "5rem" }}
{{ include "cube.vto" }}

26
site/_includes/cube.vto
View file

@ -1,37 +1,33 @@
<style>
:root {
--cube-width: 5rem;
}
html {
font-size: min(9svw, 9svh, 4.5rem);
overscroll-behavior: none;
}
cube-face {
height: var(--cube-width);
width: var(--cube-width);
height: {{ cube_size }};
width: {{ cube_size }};
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)); }
.cube-face-back { transform: rotateY(180deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
.cube-face-bottom { transform: rotateX(-89.99999999999999deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
.cube-face-right { transform: rotateY( 89.99999999999999deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
.cube-face-left { transform: rotateY(-89.99999999999999deg) translateZ(calc(var(--cube-width) / 2 - 1px)); }
.cube-face-front { transform: rotateY(0deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
.cube-face-top { transform: rotateX( 89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
.cube-face-back { transform: rotateY(180deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
.cube-face-bottom { transform: rotateX(-89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
.cube-face-right { transform: rotateY( 89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
.cube-face-left { transform: rotateY(-89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
</style>
<cube-scene class="
h-dvh w-dvw
flex items-center justify-center
perspective-[calc(var(--cube-width)*3)]
perspective-[calc({{ cube_size.replaceAll(" ", "_") }}*3)]
">
<cube-itself class="
size-(--cube-width)
transform-3d transform-[translateZ(-calc(var(--cube-width)/2-1px))]
size-[{{ cube_size }}]
transform-3d transform-[translateZ(-calc({{ cube_size.replaceAll(" ", "_") }}/2-1px))]
">
<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>

1
site/index.vto
View file

@ -32,4 +32,5 @@ prevent_zoom: true
<a draggable="false" class="{{ style }}" href="/blog/">blog</a>
{{ /set }}
{{ set cube_size = "5rem" }}
{{ include "rgbcube.vto" }}