Further simplify CSS

diff --git a/index.html b/index.html
index 6c3d4b34f03bfd184f313c12914f095888976585..9c89284b9d4725dd5329aa6975beea29be02c12b 100644 (file)
--- a/index.html
+++ b/index.html
@@ -79,29 +79,9 @@
     }
 
     ul {
-      margin-inline-start: -16px;
-    }
-
-    li {
-      padding-inline-start: 38px;
-    }
-
-    li::after {
-      content: '';
-      position: absolute;
-      inset-block-start: 4px;
-      inset-inline-start: 16px;
-      inline-size: 16px;
-      aspect-ratio: 1;
-      border-radius: 8px;
-      background: hsl(216deg 50% 60%);
-    }
-
-    #tree {
-      --spacing: 1.5rem;
-      --radius: 8px;
       font-size: 1.1rem;
       line-height: 1.5;
+      margin-inline-start: -16px;
 
       & ul li {
         border-inline-start: 2px solid hsl(216deg 50% 60%);
@@ -122,6 +102,21 @@
         }
       }
     }
+
+    li {
+      padding-inline-start: 38px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset-block-start: 4px;
+        inset-inline-start: 16px;
+        inline-size: 16px;
+        aspect-ratio: 1;
+        border-radius: 8px;
+        background: hsl(216deg 50% 60%);
+      }
+    }
   </style>
 </head>
 
@@ -141,13 +136,13 @@
     <button>Lookup owners</button>
 
     <output>
-      <ul id="tree"></ul>
+      <ul></ul>
     </output>
   </form>
 
   <script type="module">
     const form = document.querySelector('form');
-    const tree = document.querySelector('#tree');
+    const tree = document.querySelector('ul');
 
     async function getOwners(safe, rpc) {
       const response = await fetch(rpc, {