diff --git a/static/stylesheet/style.less b/static/stylesheet/style.less index 67aa52a..e4796ca 100644 --- a/static/stylesheet/style.less +++ b/static/stylesheet/style.less @@ -571,6 +571,14 @@ ul.social { 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; @@ -593,6 +601,10 @@ div.admonition { } div.admonition.attention { + p.admonition-title::before { + content: @admonition-attention-icon; + } + p, div { color: @admonition-attention-color; background-color: @admonition-attention-bg-color; @@ -600,6 +612,10 @@ div.admonition.attention { } div.admonition.caution { + p.admonition-title::before { + content: @admonition-caution-icon; + } + p, div { color: @admonition-caution-color; background-color: @admonition-caution-bg-color; @@ -607,6 +623,10 @@ div.admonition.caution { } div.admonition.danger { + p.admonition-title::before { + content: @admonition-danger-icon; + } + p, div { color: @admonition-danger-color; background-color: @admonition-danger-bg-color; @@ -614,6 +634,10 @@ div.admonition.danger { } div.admonition.error { + p.admonition-title::before { + content: @admonition-error-icon; + } + p, div { color: @admonition-error-color; background-color: @admonition-error-bg-color; @@ -621,6 +645,10 @@ div.admonition.error { } div.admonition.hint { + p.admonition-title::before { + content: @admonition-hint-icon; + } + p, div { color: @admonition-hint-color; background-color: @admonition-hint-bg-color; @@ -628,6 +656,10 @@ div.admonition.hint { } div.admonition.important { + p.admonition-title::before { + content: @admonition-important-icon; + } + p, div { color: @admonition-important-color; background-color: @admonition-important-bg-color; @@ -635,6 +667,10 @@ div.admonition.important { } div.admonition.note { + p.admonition-title::before { + content: @admonition-note-icon; + } + p, div { color: @admonition-note-color; background-color: @admonition-note-bg-color; @@ -642,6 +678,10 @@ div.admonition.note { } div.admonition.tip { + p.admonition-title::before { + content: @admonition-tip-icon; + } + p, div { color: @admonition-tip-color; background-color: @admonition-tip-bg-color; @@ -649,6 +689,10 @@ div.admonition.tip { } div.admonition.warning { + p.admonition-title::before { + content: @admonition-warning-icon; + } + p, div { color: @admonition-warning-color; background-color: @admonition-warning-bg-color; diff --git a/static/stylesheet/variables.less b/static/stylesheet/variables.less index d779aa7..1ab5150 100644 --- a/static/stylesheet/variables.less +++ b/static/stylesheet/variables.less @@ -76,27 +76,36 @@ // 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-note-color; -@admonition-tip-bg-color: @admonition-note-bg-color; +@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;