open #119 lists and blockquotes

src/app.css

@@ -1,6 +1,5 @@
-@tailwind base;
+@import './styles/base.css';
-@tailwind components;
+@import './styles/publications.css';
-@tailwind utilities;
 
 @layer components {
   /* General */
@@ -60,64 +59,6 @@
     @apply hover:bg-primary-100 dark:hover:bg-primary-800;
   }
 
-  /* AsciiDoc content */
-  .note-leather p a {
-    @apply underline hover:text-primary-500 dark:hover:text-primary-400;
-  }
-
-  .note-leather section p {
-    @apply w-full;
-  }
-
-  .note-leather section p table {
-    @apply w-full table-fixed space-x-2 space-y-2;
-  }
-
-  .note-leather section p table td {
-    @apply p-2;
-  }
-
-  .note-leather section p table td .content:has(> .imageblock) {
-    @apply flex flex-col items-center;
-  }
-
-  .note-leather .imageblock {
-    @apply flex flex-col space-y-2;
-  }
-
-  .note-leather .imageblock .content {
-    @apply flex justify-center;
-  }
-  .note-leather .imageblock .title {
-    @apply text-center;
-  }
-
-  .note-leather .imageblock.left .content {
-    @apply justify-start;
-  }
-  .note-leather .imageblock.left .title {  
-    @apply text-left;
-  }
-
-  .note-leather .imageblock.right .content {
-    @apply justify-end;
-  }
-  .note-leather .imageblock.right .title {
-    @apply text-right;
-  }
-
-  .note-leather section p table td .literalblock {
-    @apply my-2 p-2 border rounded border-gray-400 dark:border-gray-600;
-  }
-
-  .note-leather .literalblock pre {
-    @apply text-wrap break-words;
-  }
-
-  .note-leather .listingblock pre {
-    @apply overflow-x-auto;
-  }
-
   /* Heading */
   h1.h-leather,
   h2.h-leather,
@@ -244,6 +185,7 @@
     @apply fill-[#d6c1a8];
   }
 }
+
 @layer components {
   .leather-legend {
     @apply flex-shrink-0 p-4 bg-primary-0 dark:bg-primary-1000 rounded-lg shadow

src/styles/base.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/styles/publications.css

@@ -0,0 +1,103 @@
+@layer components {
+    /* AsciiDoc content */
+    .note-leather p a {
+        @apply underline hover:text-primary-500 dark:hover:text-primary-400;
+    }
+
+    .note-leather section p {
+        @apply w-full;
+    }
+
+    .note-leather section p table {
+        @apply w-full table-fixed space-x-2 space-y-2;
+    }
+
+    .note-leather section p table td {
+        @apply p-2;
+    }
+
+    .note-leather section p table td .content:has(> .imageblock) {
+        @apply flex flex-col items-center;
+    }
+
+    .note-leather .imageblock {
+        @apply flex flex-col space-y-2;
+    }
+
+    .note-leather .imageblock .content {
+        @apply flex justify-center;
+    }
+    .note-leather .imageblock .title {
+        @apply text-center;
+    }
+
+    .note-leather .imageblock.left .content {
+        @apply justify-start;
+    }
+    .note-leather .imageblock.left .title {
+        @apply text-left;
+    }
+
+    .note-leather .imageblock.right .content {
+        @apply justify-end;
+    }
+    .note-leather .imageblock.right .title {
+        @apply text-right;
+    }
+
+    .note-leather section p table td .literalblock {
+        @apply my-2 p-2 border rounded border-gray-400 dark:border-gray-600;
+    }
+
+    .note-leather .literalblock pre {
+        @apply p-3 text-wrap break-words;
+    }
+
+    .note-leather .listingblock pre {
+        @apply overflow-x-auto;
+    }
+
+    /* lists */
+    .note-leather .ulist ul {
+        @apply space-y-1 list-disc list-inside;
+    }
+
+    .note-leather .olist ol {
+        @apply space-y-1 list-inside;
+    }
+
+    .note-leather ol.arabic {
+        @apply list-decimal;
+    }
+
+    .note-leather ol.loweralpha {
+        @apply list-lower-alpha;
+    }
+
+    .note-leather ol.upperalpha {
+        @apply list-upper-alpha;
+    }
+
+    .note-leather li ol,
+    .note-leather li ul {
+        @apply ps-5 my-2;
+    }
+
+    .note-leather li p {
+        @apply inline;
+    }
+
+    /* blockquote */
+    .note-leather .quoteblock {
+        @apply p-4 my-4 border-s-4 rounded border-primary-300 bg-primary-50 dark:border-primary-500 dark:bg-primary-700;
+    }
+
+    .note-leather .quoteblock .attribution {
+        @apply mt-3 italic;
+    }
+
+    .note-leather .quoteblock cite {
+        @apply text-sm;
+    }
+
+}

tailwind.config.cjs

@@ -25,6 +25,10 @@ const config = {
           900: '#231a10',
           1000: '#110d08',
         },
+      },
+      listStyleType: {
+        'upper-alpha': 'upper-alpha', // Uppercase letters
+        'lower-alpha': 'lower-alpha', // Lowercase letters
       }
     },
   },