website: big snapshot + cleanup

website/styles/panes/explorer.css

@@ -0,0 +1,67 @@
+#explorer {
+  --cube: 4.5rem;
+
+  #chain {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: calc(var(--cube) * 0.66);
+    padding: 2rem;
+
+    .cube {
+      width: var(--cube);
+      height: var(--cube);
+      overflow: hidden;
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-sm);
+      --face-color: var(--border-color);
+      color: var(--color);
+
+      .face {
+        transform-origin: 0 0;
+        position: absolute;
+        width: var(--cube);
+        height: var(--cube);
+        padding: 0.1rem;
+      }
+
+      .right {
+        background-color: oklch(from var(--face-color) calc(l - 0.05) c h);
+        transform: rotate(-30deg) skewX(-30deg)
+          translate(calc(var(--cube) * 1.3), calc(var(--cube) * 1.725))
+          scaleY(0.864);
+      }
+
+      .top {
+        background-color: oklch(from var(--face-color) calc(l + 0.05) c h);
+        transform: rotate(30deg) skew(-30deg)
+          translate(calc(var(--cube) * 0.99), calc(var(--cube) * -0.265))
+          scaleY(0.864);
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        display: flex;
+        font-weight: 900;
+        text-transform: uppercase;
+        font-size: var(--font-size-xs);
+        line-height: var(--line-height-xs);
+      }
+
+      .left {
+        font-size: var(--font-size-xs);
+        line-height: var(--line-height-xs);
+        background-color: var(--face-color);
+        transform: rotate(30deg) skewX(30deg)
+          translate(calc(var(--cube) * 0.3), calc(var(--cube) * 0.6))
+          scaleY(0.864);
+      }
+
+      .fees {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}