RGBCube/Site
1
Fork 0
mirror of https://github.com/RGBCube/Site synced 2025-07-31 13:07: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_top = cube_face }}
{{ set cube_face_bottom = cube_face }} {{ set cube_face_bottom = cube_face }}
{{ set cube_size = "5rem" }}
{{ include "cube.vto" }} {{ include "cube.vto" }}

26
site/_includes/cube.vto
View file

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