From 35cbf374176e346ce4d257e41ef67cc98c5c88ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= Date: Tue, 18 Feb 2025 19:21:39 +0100 Subject: [PATCH] Admonitions --- src/styles/publications.css | 99 ++++++++++++++++++++++++++++++++++++- tailwind.config.cjs | 48 ++++++++++++++++++ 2 files changed, 145 insertions(+), 2 deletions(-) diff --git a/src/styles/publications.css b/src/styles/publications.css index 9dcd002..c531ce9 100644 --- a/src/styles/publications.css +++ b/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; + } } \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 4a2b022..62ecb01 100644 --- a/tailwind.config.cjs +++ b/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