From 5c21d690cafcc87d95390d4d51f7c3aac590a91e Mon Sep 17 00:00:00 2001
From: Ad5001 <mail@ad5001.eu>
Date: Mon, 27 Feb 2023 02:03:59 +0100
Subject: [PATCH] Forgot to add cube.css

---
 .gitignore              |  4 +--
 examples/cube/cube.css  | 70 +++++++++++++++++++++++++++++++++++++++++
 examples/cube/cube.html |  2 +-
 3 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 examples/cube/cube.css

diff --git a/.gitignore b/.gitignore
index 1a382e0..24477ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
-*.css.map
-*.css
+main.css.map
+main.css
diff --git a/examples/cube/cube.css b/examples/cube/cube.css
new file mode 100644
index 0000000..ddb4362
--- /dev/null
+++ b/examples/cube/cube.css
@@ -0,0 +1,70 @@
+body {
+    background: #CECECE;
+    --rotation-x: -40deg;
+    --rotation-y: 40deg;
+}
+
+section.scene {
+    position: absolute;
+    margin: auto;
+    left: 50%;
+    top: 50%;
+    transform: translateY(-50%) translateX(-50%);
+}
+
+/* buttons */
+
+figure#buttons {
+    width: 20px;
+    height: 60px;
+    --length: 20px;
+    --width: 10px;
+    --depth: 7px;
+    transform: translateY(-30px) translateZ(20px) rotateX(90deg);
+
+}
+
+figure.button {
+    transform: translateZ(4px) translateX(5px) translateY(calc(-5px + (10px * var(--btn-num)))) rotateZ(90deg);
+}
+
+figure.button > .face, figure.cube > .face:not(.front) {
+    background: white;
+    outline: black solid 1px;
+    outline-offset: -0.5px;
+    transition: opacity 1s ease 0s;
+}
+
+figure.button.button0 { --btn-num: 0; }
+figure.button.button1 { --btn-num: 1; }
+figure.button.button2 { --btn-num: 2; }
+figure.button.button3 { --btn-num: 3; }
+figure.button.button4 { --btn-num: 4; }
+figure.button.button5 { --btn-num: 5; }
+
+figure.button > a.face { background: skyblue; }
+
+#object-wires {
+    --height: 50px;
+    --radius: 18px;
+    --strip-count: 24;
+    --texture: repeating-linear-gradient(#999, #999 min(78px, calc(10% - 2px)), #bbb min(80px, 10%));
+    transform: translateX(35px) translateY(72px) rotateZ(90deg);
+}
+
+.dialog { display: none; }
+
+/* states */
+
+#cube-open:target ~ section.scene, #object-found:target ~ section.scene {
+    --rotation-x: 0deg !important;
+    --rotation-y: 0deg !important;
+}
+
+#cube-open:target ~ section.scene .cube > .face.front, #object-found:target ~ section.scene .cube > .face.front {
+    transform: translateZ(100px) translateY(50px) rotateX(90deg);
+}
+
+#object-found:target ~ .dialog { display: block; }
+
+#object-found:target ~ section.scene #object-wires { display: none; }
diff --git a/examples/cube/cube.html b/examples/cube/cube.html
index 09b3285..e700c20 100644
--- a/examples/cube/cube.html
+++ b/examples/cube/cube.html
@@ -161,7 +161,7 @@
                             <a href="#cube-open" class="face right "></a>
                             <a href="#cube-open" class="face top   "></a>
                             <a href="#cube-open" class="face bottom"></a>
-                            <div class="tooltip" style="transform: translateY(-30px) translateX(-20px) translateZ(50px) rotateX(-90deg);">Click me!</div>
+                            <div class="tooltip" style="transform: translateY(-30px) translateX(-20px) translateZ(50px) rotateX(-90deg) rotateY(90deg);">Click me!</div>
                         </figure>
                     </figure>