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

cube: separate rgbcube logic

Browse source
This commit is contained in:
RGBCube 2025-06-03 03:21:36 +03:00
parent b6c3592c2a
commit adeca4879a
Signed by: RGBCube
SSH key fingerprint: SHA256:CzqbPcfwt+GxFYNnFVCqoN5Itn4YFrshg1TrnACpA5M
3 changed files with 74 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

1
site/404.vto
View file

@ -8,6 +8,7 @@ prevent_zoom: true
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
box-shadow: 0 0 10px var(--foreground);
}
</style>

72
site/_includes/rgbcube.vto Normal file
View file

@ -0,0 +1,72 @@
<style>
cube-face {
display: flex;
&::after {
z-index: -1;
content: "";
height: inherit;
width: inherit;
position: absolute;
}
}
.cube-face-front {
background: linear-gradient(to bottom, cyan, blue);
&::after {
background: linear-gradient(to bottom, white, magenta);
mask-image: linear-gradient(to left, magenta, transparent);
}
}
.cube-face-top {
background: linear-gradient(to bottom, lime, cyan);
&::after {
background: linear-gradient(to bottom, yellow, white);
mask-image: linear-gradient(to left, white, transparent);
}
}
.cube-face-back {
background: linear-gradient(to bottom, yellow, red);
&::after {
background: linear-gradient(to bottom, lime, black);
mask-image: linear-gradient(to left, black, transparent);
}
}
.cube-face-bottom {
background: linear-gradient(to bottom, blue, black);
&::after {
background: linear-gradient(to bottom, magenta, red);
mask-image: linear-gradient(to left, red, transparent);
}
}
.cube-face-right {
background: linear-gradient(to bottom, white, magenta);
&::after {
background: linear-gradient(to bottom, yellow, red);
mask-image: linear-gradient(to left, red, transparent);
}
}
.cube-face-left {
background: linear-gradient(to bottom, lime, black);
&::after {
background: linear-gradient(to bottom, cyan, blue);
mask-image: linear-gradient(to left, blue, transparent);
}
}
</style>
{{ include "cube.vto" }}

67
site/index.vto
View file

@ -4,73 +4,8 @@ prevent_zoom: true
<style>
cube-face {
display: flex;
align-items: center;
justify-content: center;
&::after {
z-index: -1;
content: "";
height: inherit;
width: inherit;
position: absolute;
}
}
.cube-face-front {
background: linear-gradient(to bottom, cyan, blue);
&::after {
background: linear-gradient(to bottom, white, magenta);
mask-image: linear-gradient(to left, magenta, transparent);
}
}
.cube-face-top {
background: linear-gradient(to bottom, lime, cyan);
&::after {
background: linear-gradient(to bottom, yellow, white);
mask-image: linear-gradient(to left, white, transparent);
}
}
.cube-face-back {
background: linear-gradient(to bottom, yellow, red);
&::after {
background: linear-gradient(to bottom, lime, black);
mask-image: linear-gradient(to left, black, transparent);
}
}
.cube-face-bottom {
background: linear-gradient(to bottom, blue, black);
&::after {
background: linear-gradient(to bottom, magenta, red);
mask-image: linear-gradient(to left, red, transparent);
}
}
.cube-face-right {
background: linear-gradient(to bottom, white, magenta);
&::after {
background: linear-gradient(to bottom, yellow, red);
mask-image: linear-gradient(to left, red, transparent);
}
}
.cube-face-left {
background: linear-gradient(to bottom, lime, black);
&::after {
background: linear-gradient(to bottom, cyan, blue);
mask-image: linear-gradient(to left, blue, transparent);
}
}
</style>
@ -97,4 +32,4 @@ prevent_zoom: true
<a draggable="false" class="{{ style }}" href="/blog/">blog</a>
{{ /set }}
{{ include "cube.vto" }}
{{ include "rgbcube.vto" }}