Render admonitions with some style

This commit is contained in:
Gabriel Augendre 2020-12-31 08:46:23 +01:00
parent 345ab6ec1e
commit 158c9622fd
No known key found for this signature in database
GPG key ID: 1E693F4CE4AEE7B4
3 changed files with 68 additions and 0 deletions

View file

@ -3,6 +3,7 @@ from django_assets import Bundle, register
public_no_code = Bundle( public_no_code = Bundle(
"vendor/newcss.css", "vendor/newcss.css",
"public.css", "public.css",
"admonitions.css",
filters="rcssmin", filters="rcssmin",
output="public_bundled.css", output="public_bundled.css",
) )
@ -10,6 +11,7 @@ public_with_code = Bundle(
"vendor/newcss.css", "vendor/newcss.css",
"vendor/codehilite.css", "vendor/codehilite.css",
"public.css", "public.css",
"admonitions.css",
filters="rcssmin", filters="rcssmin",
output="public_code_bundled.css", output="public_code_bundled.css",
) )

View file

@ -34,6 +34,7 @@ def format_article_content(content):
md = markdown.Markdown( md = markdown.Markdown(
extensions=[ extensions=[
"extra", "extra",
"admonition",
CodeHiliteExtension(linenums=False, guess_lang=False), CodeHiliteExtension(linenums=False, guess_lang=False),
LazyLoadingImageExtension(), LazyLoadingImageExtension(),
] ]

View file

@ -0,0 +1,65 @@
:root {
--info-background: #d1ecf1;
--info-text: #0c5460;
--success-background: #d4edda;
--success-text: #155724;
--danger-background: #f8d7da;
--danger-text: #721c24;
--warning-background: #fff3cd;
--warning-text: #856404;
}
@media(prefers-color-scheme: dark) {
:root {
--info-background: #0c5460;
--info-text: #d1ecf1;
--success-background: #155724;
--success-text: #d4edda;
--danger-background: #721c24;
--danger-text: #f8d7da;
--warning-background: #856404;
--warning-text: #fff3cd;
}
}
.admonition-title {
font-weight: bold;
margin-bottom: 0;
}
.admonition {
background-color: var(--nc-bg-2);
box-shadow: 0 0 8px -1px var(--nc-bg-3);
border: 1px solid var(--nc-bg-3);
padding: 1ex;
border-radius: 5px;
margin-bottom: 1rem;
}
.admonition > :last-child {
margin-bottom: 0;
}
.admonition.info {
--nc-bg-2: var(--info-background);
--nc-bg-3: var(--info-text);
color: var(--info-text);
}
.admonition.success {
--nc-bg-2: var(--success-background);
--nc-bg-3: var(--success-text);
color: var(--success-text);
}
.admonition.warning {
--nc-bg-2: var(--warning-background);
--nc-bg-3: var(--warning-text);
color: var(--warning-text);
}
.admonition.danger {
--nc-bg-2: var(--danger-background);
--nc-bg-3: var(--danger-text);
color: var(--danger-text);
}