apos-docs/src/styles/custom.css

Documentation static site generator built with Eleventy.

@utility break-anywhere {
   overflow-wrap: anywhere;
}

.prose img.inline-image {
   @apply inline align-middle my-0 me-1;
}
@utility edit-link {
   @apply text-stone-700! dark:text-stone-400! hover:text-stone-900! dark:hover:text-stone-100!;
}

/* Admonitions */
.admonition {
   @apply my-4 p-4 rounded-lg border-l-4;
}
.admonition-title {
   @apply flex items-center gap-2 font-semibold my-2;
}
.admonition-title svg {
   @apply shrink-0;
}
.admonition p:last-child {
   @apply my-0;
}

/* Note - Blue */
.admonition-note {
   @apply bg-blue-100 dark:bg-blue-950 border-blue-500 text-blue-900 dark:text-blue-100;
}
.admonition-note .admonition-title {
   @apply text-blue-700 dark:text-blue-400;
}

/* Tip - Green */
.admonition-tip {
   @apply bg-green-100 dark:bg-green-950 border-green-500 text-green-900 dark:text-green-100;
}
.admonition-tip .admonition-title {
   @apply text-green-700 dark:text-green-400;
}

/* Important - Purple */
.admonition-important {
   @apply bg-purple-100 dark:bg-purple-950 border-purple-500 text-purple-900 dark:text-purple-100;
}
.admonition-important .admonition-title {
   @apply text-purple-700 dark:text-purple-400;
}

/* Warning - Yellow/Amber */
.admonition-warning {
   @apply bg-amber-100 dark:bg-amber-950 border-amber-500 text-amber-900 dark:text-amber-100;
}
.admonition-warning .admonition-title {
   @apply text-amber-700 dark:text-amber-400;
}

/* Caution - Red */
.admonition-caution {
   @apply bg-red-100 dark:bg-red-950 border-red-500 text-red-900 dark:text-red-100;
}
.admonition-caution .admonition-title {
   @apply text-red-700 dark:text-red-400;
}