From adeca4879a4794814db83c7452539c617577389b Mon Sep 17 00:00:00 2001
From: RGBCube <git@rgbcu.be>
Date: Tue, 3 Jun 2025 03:21:36 +0300
Subject: [PATCH] cube: separate rgbcube logic

---
 site/404.vto               |  1 +
 site/_includes/rgbcube.vto | 72 ++++++++++++++++++++++++++++++++++++++
 site/index.vto             | 67 +----------------------------------
 3 files changed, 74 insertions(+), 66 deletions(-)
 create mode 100644 site/_includes/rgbcube.vto

diff --git a/site/404.vto b/site/404.vto
index 209b2ad..4b2bb0a 100644
--- a/site/404.vto
+++ b/site/404.vto
@@ -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>
diff --git a/site/_includes/rgbcube.vto b/site/_includes/rgbcube.vto
new file mode 100644
index 0000000..9752f98
--- /dev/null
+++ b/site/_includes/rgbcube.vto
@@ -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" }}
+
diff --git a/site/index.vto b/site/index.vto
index b7a565b..207b526 100644
--- a/site/index.vto
+++ b/site/index.vto
@@ -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" }}