From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 29 Sep 2024 06:47:47 +0000 (-0700)
Subject: Add a counter label for each box
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=ad27b0d84a1d4bb874711e26f6b7f20998f93c12;p=utf-8-visualizer

Add a counter label for each box

Without a counter, the order of the boxes is ambiguous when there are multiple rows.
---

diff --git a/index.html b/index.html
index fa8be0b..dc0b7e1 100644
--- a/index.html
+++ b/index.html
@@ -51,12 +51,28 @@
         transition: filter 800ms;
         --index-order: 1;
         z-index: calc(var(--index-order) * var(--i));
+        counter-increment: n;
+        position: relative;
       }
 
       :host(:hover),
       :host(:focus-within) {
         filter: drop-shadow(0 0 4px hsl(222deg 50% 50%));
         transition: filter 400ms;
+
+        &::before {
+          opacity: 1;
+          transition: opacity 200ms;
+        }
+      }
+
+      :host::before {
+        content: counter(n);
+        position: absolute;
+        left: 6px;
+        top: 2px;
+        opacity: 0.6;
+        transition: opacity 400ms;
       }
 
       ::slotted(*) {