Fixed some alignment issues with details

SMJSGaming · Sep 26, 2024 · 61fb290 · 61fb290
1 parent 9dffcd4
commit 61fb290
Showing 1 changed file with 17 additions and 30 deletions.
diff --git a/docs/resources/main.css b/docs/resources/main.css
@@ -48,6 +48,20 @@ a {
     text-decoration: none;
 }
 
+summary::marker {
+    content: "";
+}
+
+summary::before {
+    content: "▶";
+    display: inline-block;
+    margin-right: 6px;
+}
+
+details[open] > summary::before {
+    transform: rotate(90deg);
+}
+
 #nav-bar {
     top: 0;
     left: 0;
@@ -147,7 +161,7 @@ a {
 }
 
 .list > b > a {
-    margin-left: 17px;
+    margin-left: calc(1em + 6px);
 }
 
 .object > :not(summary) {
@@ -156,10 +170,10 @@ a {
 
 .property {
     display: inline-grid;
-    width: calc(100% - 34px);
+    width: calc(100% - 2em - 12px);
     gap: 7px;
     padding: 15px;
-    margin: 10px 17px;
+    margin: 10px calc(1em + 6px);
     margin-bottom: 10px;
     background-color: var(--tint);
     border-radius: 7px;
@@ -217,45 +231,18 @@ a {
     html {
         zoom: 0.4;
     }
-
-    .list > b > a {
-        margin-left: 30px;
-    }
-
-    .property {
-        width: calc(100% - 50px);
-        margin: 10px 25px;
-    }
 }
 
 @media only screen and (max-width: 700px) and (min-width: 500px) {
     html {
         zoom: 0.6;
     }
-
-    .list > b > a {
-        margin-left: 24px;
-    }
-
-    .property {
-        width: calc(100% - 40px);
-        margin: 10px 20px;
-    }
 }
 
 @media only screen and (max-width: 900px) and (min-width: 700px) {
     html {
         zoom: 0.8;
     }
-
-    .list > b > a {
-        margin-left: 20px;
-    }
-
-    .property {
-        width: calc(100% - 36px);
-        margin: 10px 18px;
-    }
 }
 
 @media only screen and (max-width: 2000px) {