Commit a805b53

@@ -20,7 +20,7 @@ const postsByYear = sortedPosts.reduce(
 ---
 
 <GlobalLayout>
-  <div class="article-heading">
+  <div class="article-heading article-list">
     <h1>Posts</h1>
     {
       Object.entries(postsByYear)
@@ -28,9 +28,9 @@ const postsByYear = sortedPosts.reduce(
         .map(([year, posts]) => (
           <section>
             <h2>{year}</h2>
-            <ul class="text-lg lg:text-xl [&>li:before]:content-['-'] [&>li:before]:text-neutral-500">
+            <ul class="text-lg lg:text-xl">
               {posts.map((post) => (
-                <li class="grid grid-rows-1 grid-cols-[auto_1fr_auto] gap-2">
+                <li class="grid grid-rows-1 grid-cols-[1fr_auto] gap-2">
                   <a href={`/posts/${post.id}`}>{post.data.title}</a>
                   <time
                     datetime={post.data.date.toISOString().split("T")[0]}

@@ -7,6 +7,10 @@ article,
   @import "./heading.css";
 }
 article,
+.article-list {
+  @import "./list.css";
+}
+article,
 .article-paragraph {
   @import "./paragrah.css";
 }

@@ -0,0 +1,57 @@
+ul,
+ol {
+  @apply mt-5 mb-5;
+}
+
+ul > li,
+ol > li {
+  @apply relative mt-2 mb-2;
+
+  & > *:first-child {
+    @apply mt-0;
+  }
+  & > *:last-child {
+    @apply mb-0;
+  }
+}
+
+ul {
+  --bullet-1: "•";
+  --bullet-2: "‣";
+  --bullet-3: "-";
+  --current-bullet: var(--bullet-1);
+
+  & > li {
+    @apply pl-[1.5em];
+
+    &::before {
+      content: var(--current-bullet);
+      @apply absolute left-[0.5em];
+    }
+  }
+
+  ul {
+    --current-bullet: var(--bullet-2);
+  }
+  ul ul {
+    --current-bullet: var(--bullet-3);
+  }
+  ul ul ul {
+    --current-bullet: var(--bullet-1);
+  }
+  ul ul ul ul {
+    --current-bullet: var(--bullet-2);
+  }
+  ul ul ul ul ul {
+    --current-bullet: var(--bullet-3);
+  }
+}
+
+ol > li {
+  @apply pl-[2em];
+
+  &::before {
+    content: counter(list-item) ". ";
+    @apply absolute left-0 text-right w-[1.5em];
+  }
+}