Add support for admonitions (#191)
* Add support for admonitions * Use bootstrap color model * Build style.min.css
This commit is contained in:
parent
37f8420cde
commit
6c2f3a21cc
3 changed files with 170 additions and 1 deletions
|
@ -566,3 +566,135 @@ ul.social {
|
|||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
// Admonition
|
||||
div.admonition {
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
p.admonition-title::before {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
}
|
||||
|
||||
p.admonition-title {
|
||||
border-radius: 4px 4px 0 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.25em;
|
||||
padding: .5em 1em;
|
||||
margin-bottom: 1.25em;
|
||||
margin-top: inherit;
|
||||
}
|
||||
|
||||
p, div {
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 1.25em 1.25em 0 1.25em;
|
||||
margin-top: -1.25em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p.last, div.last {
|
||||
padding-bottom: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
div.admonition.attention {
|
||||
p.admonition-title::before {
|
||||
content: @admonition-attention-icon;
|
||||
}
|
||||
|
||||
p, div {
|
||||
color: @admonition-attention-color;
|
||||
background-color: @admonition-attention-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.admonition.caution {
|
||||
p.admonition-title::before {
|
||||
content: @admonition-caution-icon;
|
||||
}
|
||||
|
||||
p, div {
|
||||
color: @admonition-caution-color;
|
||||
background-color: @admonition-caution-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.admonition.danger {
|
||||
p.admonition-title::before {
|
||||
content: @admonition-danger-icon;
|
||||
}
|
||||
|
||||
p, div {
|
||||
color: @admonition-danger-color;
|
||||
background-color: @admonition-danger-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.admonition.error {
|
||||
p.admonition-title::before {
|
||||
content: @admonition-error-icon;
|
||||
}
|
||||
|
||||
p, div {
|
||||
color: @admonition-error-color;
|
||||
background-color: @admonition-error-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.admonition.hint {
|
||||
p.admonition-title::before {
|
||||
content: @admonition-hint-icon;
|
||||
}
|
||||
|
||||
p, div {
|
||||
color: @admonition-hint-color;
|
||||
background-color: @admonition-hint-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.admonition.important {
|
||||
p.admonition-title::before {
|
||||
content: @admonition-important-icon;
|
||||
}
|
||||
|
||||
p, div {
|
||||
color: @admonition-important-color;
|
||||
background-color: @admonition-important-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.admonition.note {
|
||||
p.admonition-title::before {
|
||||
content: @admonition-note-icon;
|
||||
}
|
||||
|
||||
p, div {
|
||||
color: @admonition-note-color;
|
||||
background-color: @admonition-note-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.admonition.tip {
|
||||
p.admonition-title::before {
|
||||
content: @admonition-tip-icon;
|
||||
}
|
||||
|
||||
p, div {
|
||||
color: @admonition-tip-color;
|
||||
background-color: @admonition-tip-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
div.admonition.warning {
|
||||
p.admonition-title::before {
|
||||
content: @admonition-warning-icon;
|
||||
}
|
||||
|
||||
p, div {
|
||||
color: @admonition-warning-color;
|
||||
background-color: @admonition-warning-bg-color;
|
||||
}
|
||||
}
|
||||
|
|
2
static/stylesheet/style.min.css
vendored
2
static/stylesheet/style.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -72,3 +72,40 @@
|
|||
@mastodon-bg-color: #3088d4;
|
||||
@flickr-bg-color: #ff0084;
|
||||
@lastfm-bg-color: #d92323;
|
||||
|
||||
// Admonition colors
|
||||
@admonition-attention-color: #856404;
|
||||
@admonition-attention-bg-color: #fff3cd;
|
||||
@admonition-attention-icon: "\f071\00a0 ";
|
||||
|
||||
@admonition-caution-color: @admonition-attention-color;
|
||||
@admonition-caution-bg-color: @admonition-attention-bg-color;
|
||||
@admonition-caution-icon: @admonition-attention-icon;
|
||||
|
||||
@admonition-warning-color: @admonition-attention-color;
|
||||
@admonition-warning-bg-color: @admonition-attention-bg-color;
|
||||
@admonition-warning-icon: @admonition-attention-icon;
|
||||
|
||||
@admonition-danger-color: #721c24;
|
||||
@admonition-danger-bg-color: #f8d7da;
|
||||
@admonition-danger-icon: "\f06a\00a0 ";
|
||||
|
||||
@admonition-error-color: @admonition-danger-color;
|
||||
@admonition-error-bg-color: @admonition-danger-bg-color;
|
||||
@admonition-error-icon: @admonition-danger-icon;
|
||||
|
||||
@admonition-hint-color: #004085 ;
|
||||
@admonition-hint-bg-color: #cce5ff;
|
||||
@admonition-hint-icon: "\f0eb\00a0 ";
|
||||
|
||||
@admonition-tip-color: @admonition-hint-color;
|
||||
@admonition-tip-bg-color: @admonition-hint-bg-color;
|
||||
@admonition-tip-icon: @admonition-hint-icon;
|
||||
|
||||
@admonition-important-color: #155724;
|
||||
@admonition-important-bg-color: #d4edda;
|
||||
@admonition-important-icon: "\f05a\00a0 ";
|
||||
|
||||
@admonition-note-color: @admonition-important-color;
|
||||
@admonition-note-bg-color: @admonition-important-bg-color;
|
||||
@admonition-note-icon: @admonition-important-icon;
|
||||
|
|
Loading…
Reference in a new issue