GitHub
parent
90cfc27c3c
commit
7ce82f7b6d
25 changed files with 339 additions and 27 deletions
@ -0,0 +1,30 @@ |
||||
+++ |
||||
title = "Admonition Icons" |
||||
date = 2020-06-22T20:00:00+02:00 |
||||
+++ |
||||
|
||||
:icons: font |
||||
|
||||
By default, the admonition is rendered with a plain text label. To enable font icons the document attribute `:icons: font` need to be set. |
||||
|
||||
== Example |
||||
|
||||
[NOTE] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
|
||||
[TIP] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
|
||||
[IMPORTANT] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
|
||||
[CAUTION] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
|
||||
[WARNING] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
@ -0,0 +1,73 @@ |
||||
+++ |
||||
title = "Admonitions" |
||||
date = 2020-06-22T20:00:00+02:00 |
||||
+++ |
||||
|
||||
:toc: |
||||
:toclevels: 2 |
||||
|
||||
{{< toc >}} |
||||
|
||||
== Admonition types |
||||
|
||||
There are certain statements you may want to draw attention to by taking them out of the content's flow and labeling them with a priority. These are called admonitions. |
||||
|
||||
```tpl |
||||
[NOTE|TIP|IMPORTANT|CAUTION|WARNING] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
``` |
||||
|
||||
=== Example |
||||
|
||||
[NOTE] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
|
||||
[TIP] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
|
||||
[IMPORTANT] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
|
||||
[CAUTION] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
|
||||
[WARNING] |
||||
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. |
||||
Ornateness bland it ex enc, est yeti am bongo detract re. |
||||
|
||||
|
||||
== Admonition icons |
||||
|
||||
Icons can be added by setting a unicode glyph or a character reference to the `tip-caption` attribute: |
||||
|
||||
```text |
||||
:tip-caption: 💡 |
||||
|
||||
[TIP] |
||||
It's possible to use Unicode glyphs as admonition icons. |
||||
``` |
||||
|
||||
```text |
||||
:tip-caption: pass:[🔥] |
||||
|
||||
[TIP] |
||||
It's possible to use Unicode glyphs as admonition icons. |
||||
``` |
||||
|
||||
=== Example |
||||
|
||||
:tip-caption: 💡 |
||||
|
||||
[TIP] |
||||
It's possible to use Unicode glyphs as admonition icons. |
||||
|
||||
|
||||
:tip-caption: pass:[🔥] |
||||
|
||||
[TIP] |
||||
It's possible to use Unicode glyphs as admonition icons. |
||||
@ -1,3 +1,16 @@ |
||||
<blockquote class="gblog-hint {{ .Get 0 }}"> |
||||
{{ .Inner | $.Page.RenderString }} |
||||
{{ $type := default "note" (.Get "type") }} |
||||
{{ $icon := .Get "icon" }} |
||||
{{ $title := default ($type | title) (.Get "title") }} |
||||
|
||||
|
||||
<blockquote class="gblog-hint {{ $type | lower }}"> |
||||
<div class="gblog-hint__title flex align-center"> |
||||
{{- with $icon -}} |
||||
<svg class="gblog-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg> |
||||
<span>{{ $title }}</span> |
||||
{{- else -}} |
||||
<i class="fa {{ $type | lower }}" title="{{ $title }}"></i> |
||||
{{- end -}} |
||||
</div> |
||||
<div class="gblog-hint__text">{{ .Inner | $.Page.RenderString }}</div> |
||||
</blockquote> |
||||
|
||||
|
After Width: | Height: | Size: 486 B |
|
After Width: | Height: | Size: 420 B |
|
After Width: | Height: | Size: 482 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 481 B |
@ -0,0 +1,61 @@ |
||||
.admonitionblock { |
||||
@each $name, $color in $hint-colors { |
||||
&.#{$name} { |
||||
border-left-color: $color; |
||||
background-color: scale-color($color, $lightness: 95%, $saturation: -30%); |
||||
color: $body-font-color; |
||||
} |
||||
} |
||||
|
||||
margin: $padding-16 0; |
||||
padding: 0; |
||||
|
||||
border-left: $border-4 solid var(--accent-color); |
||||
border-radius: $border-radius; |
||||
|
||||
table { |
||||
margin: 0 !important; |
||||
padding: 0 !important; |
||||
|
||||
tr { |
||||
border: 0 !important; |
||||
} |
||||
|
||||
td { |
||||
&:first-child { |
||||
background-color: scale-color($gray-600, $alpha: -95%); |
||||
font-weight: bold; |
||||
|
||||
&.icon { |
||||
.title { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
i.fa::after { |
||||
content: attr(title); |
||||
font-style: normal; |
||||
padding-left: $padding-24; |
||||
} |
||||
|
||||
i.fa { |
||||
color: $black; |
||||
background-size: auto 90%; |
||||
background-repeat: no-repeat; |
||||
filter: invert(30%); |
||||
margin-left: -5px; |
||||
} |
||||
|
||||
@each $name, $icon in $hint-icons { |
||||
i.fa.icon-#{$name} { |
||||
background-image: url(img/geekdoc-stack.svg##{$icon}); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
display: flex; |
||||
padding: $padding-4 $padding-16 !important; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue