From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 13 Aug 2024 05:17:52 +0000 (-0700)
Subject: Further simplify CSS
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=02e0be6dfab2201fda5b7a60996962675e87656f;p=safe-owners

Further simplify CSS
---

diff --git a/index.html b/index.html
index 6c3d4b3..9c89284 100644
--- 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, {