Admonitions

src/styles/publications.css

@@ -83,21 +83,116 @@
         @apply ps-5 my-2;
     }
 
+    .audioblock .title,
+    .imageblock .title,
+    .literalblock .title,
+    .tableblock .title,
+    .videoblock .title,
+    .olist .title,
+    .ulist .title {
+        @apply my-2;
+    }
+
     .note-leather li p {
         @apply inline;
     }
 
     /* blockquote */
-    .note-leather .quoteblock {
+    .note-leather .quoteblock,
+    .note-leather .verseblock {
         @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;
+        @apply mt-3 italic clear-both;
     }
 
     .note-leather .quoteblock cite {
         @apply text-sm;
     }
 
+    /* admonition */
+    .note-leather .admonitionblock .title {
+        @apply font-semibold;
+    }
+
+
+    .note-leather .admonitionblock table {
+        @apply w-full border-collapse;
+    }
+
+    .note-leather .admonitionblock tr {
+        @apply flex flex-col;
+    }
+
+    .note-leather .admonitionblock {
+        @apply rounded overflow-hidden border;
+    }
+
+    .note-leather .admonitionblock .icon,
+    .note-leather .admonitionblock .content {
+        @apply p-4;
+    }
+
+    .note-leather .admonitionblock .content {
+        @apply pt-0;
+    }
+
+
+    .note-leather .admonitionblock.tip {
+        @apply rounded-lg overflow-hidden border border-success-100 dark:border-success-800;
+    }
+
+    .note-leather .admonitionblock.tip .icon,
+    .note-leather .admonitionblock.tip .content {
+        @apply bg-success-100 dark:bg-success-800;
+    }
+
+    .note-leather .admonitionblock.note {
+        @apply rounded-lg overflow-hidden border border-info-100 dark:border-info-800;
+    }
+
+    .note-leather .admonitionblock.note .icon,
+    .note-leather .admonitionblock.note .content {
+        @apply bg-info-100 dark:bg-info-800;
+    }
+
+    .note-leather .admonitionblock.important {
+        @apply rounded-lg overflow-hidden border border-primary-200 dark:border-primary-700;
+    }
+
+    .note-leather .admonitionblock.important .icon,
+    .note-leather .admonitionblock.important .content {
+        @apply bg-primary-200 dark:bg-primary-700;
+    }
+
+    .note-leather .admonitionblock.caution {
+        @apply rounded-lg overflow-hidden border border-warning-200 dark:border-warning-700;
+    }
+
+    .note-leather .admonitionblock.caution .icon,
+    .note-leather .admonitionblock.caution .content {
+        @apply bg-warning-200 dark:bg-warning-700;
+    }
+
+    .note-leather .admonitionblock.warning {
+        @apply rounded-lg overflow-hidden border border-danger-200 dark:border-danger-800;
+    }
+
+    .note-leather .admonitionblock.warning .icon,
+    .note-leather .admonitionblock.warning .content {
+        @apply bg-danger-200 dark:bg-danger-800;
+    }
+
+
+
+    /* video */
+    .videoblock .content {
+        @apply w-full aspect-video;
+    }
+
+    .videoblock .content iframe,
+    .videoblock .content video {
+        @apply w-full h-full;
+    }
 }

tailwind.config.cjs

@@ -25,6 +25,54 @@ const config = {
           900: '#231a10',
           1000: '#110d08',
         },
+        success: {
+          50: '#e3f2e7',
+          100: '#c7e6cf',
+          200: '#a2d4ae',
+          300: '#7dbf8e',
+          400: '#5ea571',
+          500: '#4e8e5f',
+          600: '#3e744c',
+          700: '#305b3b',
+          800: '#22412a',
+          900: '#15281b',
+        },
+        info: {
+          50: '#e7eff6',
+          100: '#c5d9ea',
+          200: '#9fbfdb',
+          300: '#7aa5cc',
+          400: '#5e90be',
+          500: '#4779a5',
+          600: '#365d80',
+          700: '#27445d',
+          800: '#192b3a',
+          900: '#0d161f',
+        },
+        warning: {
+          50: '#fef4e6',
+          100: '#fde4bf',
+          200: '#fcd18e',
+          300: '#fbbc5c',
+          400: '#f9aa33',
+          500: '#f7971b',
+          600: '#c97a14',
+          700: '#9a5c0e',
+          800: '#6c3e08',
+          900: '#3e2404',
+        },
+        danger: {
+          50: '#fbeaea',
+          100: '#f5cccc',
+          200: '#eba5a5',
+          300: '#e17e7e',
+          400: '#d96060',
+          500: '#c94848',
+          600: '#a53939',
+          700: '#7c2b2b',
+          800: '#521c1c',
+          900: '#2b0e0e',
+        },
       },
       listStyleType: {
         'upper-alpha': 'upper-alpha', // Uppercase letters