From ad27b0d84a1d4bb874711e26f6b7f20998f93c12 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 28 Sep 2024 23:47:47 -0700
Subject: [PATCH] Add a counter label for each box

Without a counter, the order of the boxes is ambiguous when there are multiple rows.
---
 index.html | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

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(*) {
-- 
2.47.3