style: 💄 fixed counters

Author: prc5

documentation/src/css/custom.css

@@ -837,6 +837,10 @@ main .col:not(.col--3):not(.toc):not(.table-of-contents) ol {
   counter-reset: list-counter;
 }
 
+main .col:not(.col--3):not(.toc):not(.table-of-contents) ol[start] {
+  --start: attr(start);
+}
+
 main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) li {
   @apply relative mb-4 pl-3 text-lg;
   counter-increment: list-counter;
@@ -845,13 +849,12 @@ main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) li {
 main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) > li::before {
   @apply absolute left-[-23px] top-[0.5px] w-[28px] h-[28px] rounded-full z-[-1] bg-zinc-200 dark:bg-zinc-700;
   @apply flex items-center justify-center text-zinc-200 dark:text-zinc-400 text-sm;
-  content: counter(list-counter) ".";
+  content: var(--start, counter(list-counter)) ".";
 }
 /* h2 */
 main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) > li:has(> h2:first-child)::before {
   @apply absolute left-[-36px] top-[10px] w-[40px] h-[40px] rounded-full z-[-1] bg-zinc-200 dark:bg-zinc-700;
   @apply text-2xl;
-  content: "";
 }
 main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) li > h2:first-child {
   @apply translate-y-[3px];
@@ -860,7 +863,6 @@ main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) li > h
 main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) > li:has(> h3:first-child)::before {
   @apply absolute left-[-31px] top-[1.5px] w-[35px] h-[35px] rounded-full z-[-1] bg-zinc-200 dark:bg-zinc-700;
   @apply text-xl;
-  content: "";
 }
 main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) li > h3:first-child {
   @apply translate-y-[2px];
@@ -870,20 +872,17 @@ main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) li > h
 main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) > li:has(> h4:first-child)::before {
   @apply absolute left-[-27px] top-[0px] w-[30px] h-[30px] rounded-full z-[-1] bg-zinc-200 dark:bg-zinc-700;
   @apply text-lg;
-  content: "";
 }
 /* h5 */
 
 main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) > li:has(> h5:first-child)::before {
   @apply absolute left-[-25px] top-[0px] w-[28px] h-[28px] rounded-full z-[-1] bg-zinc-200 dark:bg-zinc-700;
   @apply text-base;
-  content: "";
 }
 /* h6 */
 main .col:not(.col--3) ol:not(.toc):not(.toaster):not(.table-of-contents) > li:has(> h6:first-child)::before {
   @apply absolute left-[-23px] top-[-1px] w-[26px] h-[26px] rounded-full z-[-1] bg-zinc-200 dark:bg-zinc-700;
   @apply text-sm;
-  content: "";
 }
 
 /* else */