feat: add optional hint/admonition icons (#383)

BREAKING CHANGE: The types of the `hint` short code have been renamed to `[note|tip|important|caution|warning]` the old types `[info|ok|warning|danger]` are still working, but should be considered as deprecated.

BREAKING CHANGE: The `hint` short code is using named arguments now. You have to change, e.g. `{{< hint warning >}}` to `{{< hint type=warning >}}`.
This commit is contained in:
Robert Kaussow 2022-04-23 15:14:42 +02:00 committed by GitHub
parent 1563cd228b
commit f6966b8513
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 310 additions and 35 deletions

View File

@ -26,7 +26,7 @@ steps:
NPM_CONFIG_LOGLEVEL: error NPM_CONFIG_LOGLEVEL: error
- name: testbuild - name: testbuild
image: thegeeklab/hugo:0.93.2 image: thegeeklab/hugo:0.97.3
commands: commands:
- mkdir -p exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekdoc - mkdir -p exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekdoc
- hugo --panicOnWarning -s exampleSite/ -b http://localhost/ - hugo --panicOnWarning -s exampleSite/ -b http://localhost/
@ -203,7 +203,7 @@ steps:
- refs/pull/** - refs/pull/**
- name: build - name: build
image: thegeeklab/hugo:0.93.2 image: thegeeklab/hugo:0.97.3
commands: commands:
- hugo --panicOnWarning -s exampleSite/ - hugo --panicOnWarning -s exampleSite/
@ -284,6 +284,6 @@ depends_on:
--- ---
kind: signature kind: signature
hmac: bd8e739515bc29102da412272b61aa89cf18f9b4d1f62b502172131a51009c71 hmac: b43a67b7ebd42ae6e180cd5aaa2ffa9740f7bf649fbf9cfa76c5ea84ae94d8bd
... ...

View File

@ -37,3 +37,8 @@ outputs:
- HTML - HTML
term: term:
- HTML - HTML
security:
exec:
allow:
- "^asciidoctor$"

View File

@ -0,0 +1,29 @@
+++
title = "Admonition Icons"
+++
: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.

View File

@ -0,0 +1,72 @@
+++
title = "Admonitions"
+++
: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:[&#128293;]
[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:[&#128293;]
[TIP]
It's possible to use Unicode glyphs as admonition icons.

View File

@ -3,11 +3,20 @@ title: Hints
--- ---
Hint shortcode can be used as hint/alerts/notification block. Hint shortcode can be used as hint/alerts/notification block.
There are four colors to choose: `info`, `ok`, `warning` and `danger`.
Attributes:
| Name | Usage | default |
| ---------------- | --------------------------------------------------------------------------------- | --------------------- |
| type | color types to choose from | note |
| icon (optional) | custom icon to use | undefined (type name) |
| title (optional) | custom icon to use, need to be an icon from an [SVG sprite](/features/icon-sets/) | undefined (type name) |
Syntax:
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
```tpl ```tpl
{{</* hint [info|ok|warning|danger] */>}} {{</* hint type=[note|tip|important|caution|warning] (icon=gdoc_github) (title=GitHub) */>}}
**Markdown content**\ **Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. 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. Ornateness bland it ex enc, est yeti am bongo detract re.
@ -17,26 +26,44 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
## Example ## Example
{{< hint info >}} {{< hint type=note >}}
**Markdown content**\ **Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. 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. Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}} {{< /hint >}}
{{< hint ok >}} {{< hint type=tip >}}
**Markdown content**\ **Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. 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. Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}} {{< /hint >}}
{{< hint warning >}} {{< hint type=important >}}
**Markdown content**\ **Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. 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. Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}} {{< /hint >}}
{{< hint danger >}} {{< hint type=caution >}}
**Markdown content**\ **Markdown content**\
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. 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. Ornateness bland it ex enc, est yeti am bongo detract re.
{{< /hint >}} {{< /hint >}}
{{< hint type=warning >}}
**Markdown content**\
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.
{{< /hint >}}
Example with a custom icon and title:
<!-- prettier-ignore-start -->
<!-- spellchecker-disable -->
{{< hint type=note icon=gdoc_github title=GitHub >}}
**Markdown content**\
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.
{{< /hint >}}
<!-- spellchecker-enable -->
<!-- prettier-ignore-end -->

View File

@ -14,7 +14,7 @@
height: 4rem; height: 4rem;
} }
.icon-grid__line .icon { .icon-grid__line .gdoc-icon {
font-size: 3em; font-size: 3em;
} }

View File

@ -39,7 +39,7 @@
/> />
<label <label
{{ if $doCollapse }} {{ if $doCollapse }}
for="{{ printf "navtree-%s" $id }}" class="flex justify-between" for="{{ printf "navtree-%s" $id }}" class="flex justify-between align-center"
{{ end }} {{ end }}
> >
<span class="flex"> <span class="flex">

View File

@ -40,7 +40,6 @@
{{ range $rangeBy }} {{ range $rangeBy }}
{{ if not .Params.GeekdocHidden }} {{ if not .Params.GeekdocHidden }}
{{ $numberOfPages := (add (len .Pages) (len .Sections)) }} {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
{{ $isParent := and (ne $numberOfPages 0) (not .Params.GeekdocFlatSection) }} {{ $isParent := and (ne $numberOfPages 0) (not .Params.GeekdocFlatSection) }}
{{ $isCurrent := eq $current . }} {{ $isCurrent := eq $current . }}
@ -61,7 +60,7 @@
/> />
<label <label
{{ if $doCollapse }} {{ if $doCollapse }}
for="{{ printf "navtree-%s" $id }}" class="flex justify-between" for="{{ printf "navtree-%s" $id }}" class="flex justify-between align-center"
{{ end }} {{ end }}
> >
{{ if or .Content .Params.GeekdocFlatSection }} {{ if or .Content .Params.GeekdocFlatSection }}

View File

@ -1,5 +1,5 @@
{{ if default true .Site.Params.GeekdocSearch }} {{ if default true .Site.Params.GeekdocSearch }}
<div class="gdoc-search"> <div class="gdoc-search flex align-center">
<svg class="gdoc-icon gdoc_search"><use xlink:href="#gdoc_search"></use></svg> <svg class="gdoc-icon gdoc_search"><use xlink:href="#gdoc_search"></use></svg>
<input <input
type="text" type="text"

View File

@ -1,3 +1,16 @@
<blockquote class="gdoc-hint {{ .Get 0 }}"> {{ $type := default "note" (.Get "type") }}
{{ .Inner | $.Page.RenderString }} {{ $icon := .Get "icon" }}
{{ $title := default ($type | title) (.Get "title") }}
<blockquote class="gdoc-hint {{ $type | lower }}">
<div class="gdoc-hint__title flex align-center">
{{ with $icon }}
<svg class="gdoc-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
<span>{{ $title }}</span>
{{ else }}
<i class="fa {{ $type | lower }}" title="{{ $title }}"></i>
{{ end }}
</div>
<div class="gdoc-hint__text">{{ .Inner | $.Page.RenderString }}</div>
</blockquote> </blockquote>

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>check_circle_outline</title>
<path d="M14 25.239q4.601 0 7.92-3.319t3.319-7.92-3.319-7.92-7.92-3.319-7.92 3.319-3.319 7.92 3.319 7.92 7.92 3.319zM14 0q5.784 0 9.892 4.108t4.108 9.892-4.108 9.892-9.892 4.108-9.892-4.108-4.108-9.892 4.108-9.892 9.892-4.108zM20.441 7.822l1.972 1.972-11.239 11.239-6.967-7.033 1.972-1.972 4.995 4.995z"></path>
</svg>

After

Width:  |  Height:  |  Size: 486 B

5
src/icons/dangerous.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>dangerous</title>
<path d="M21.802 19.833l-5.833-5.833 5.833-5.833-1.969-1.969-5.833 5.833-5.833-5.833-1.969 1.969 5.833 5.833-5.833 5.833 1.969 1.969 5.833-5.833 5.833 5.833zM19.833 0l8.167 8.167v11.666l-8.167 8.167h-11.666l-8.167-8.167v-11.666l8.167-8.167h11.666z"></path>
</svg>

After

Width:  |  Height:  |  Size: 420 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>error_outline</title>
<path d="M14 25.239q4.601 0 7.92-3.319t3.319-7.92-3.319-7.92-7.92-3.319-7.92 3.319-3.319 7.92 3.319 7.92 7.92 3.319zM14 0q5.784 0 9.892 4.108t4.108 9.892-4.108 9.892-9.892 4.108-9.892-4.108-4.108-9.892 4.108-9.892 9.892-4.108zM12.62 6.967h2.761v8.413h-2.761v-8.413zM12.62 18.206h2.761v2.826h-2.761v-2.826z"></path>
</svg>

After

Width:  |  Height:  |  Size: 482 B

5
src/icons/fire.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>fire</title>
<path d="M17.689 21.998q-0.32 0.32-0.8 0.576t-0.864 0.384q-1.152 0.384-2.272 0.032t-1.888-0.992q-0.128-0.128-0.096-0.256t0.16-0.192q1.216-0.384 1.92-1.216t0.96-1.792q0.192-0.896-0.064-1.728t-0.384-1.728q-0.128-0.704-0.096-1.376t0.288-1.312q0-0.128 0.128-0.128t0.192 0.064q0.384 0.832 0.992 1.472t1.28 1.216 1.216 1.248 0.672 1.568q0.064 0.384 0.064 0.704 0.064 0.96-0.32 1.92t-1.088 1.536zM21.529 11.054q-0.768-0.704-1.6-1.28t-1.6-1.344q-1.536-1.536-2.016-3.584t0.16-4.16q0.128-0.32-0.096-0.544t-0.544-0.096q-0.768 0.32-1.44 0.768t-1.312 0.896q-1.984 1.664-3.136 3.936t-1.312 4.864 0.8 5.088q0 0.128 0.032 0.256t0.032 0.256q0 0.576-0.512 0.832t-1.024-0.192q-0.128-0.192-0.192-0.32-1.024-1.28-1.376-2.912t-0.096-3.232q0.064-0.384-0.288-0.576t-0.608 0.128q-1.28 1.664-1.856 3.68t-0.448 4.064q0 0.576 0.096 1.184t0.288 1.184q0.448 1.536 1.216 2.816 1.216 2.048 3.264 3.424t4.416 1.696q2.496 0.32 5.024-0.256t4.448-2.304q1.408-1.344 2.208-3.104t0.864-3.68-0.704-3.712q-0.064-0.128-0.096-0.224t-0.096-0.224q-0.576-1.088-1.28-1.984-0.256-0.384-0.544-0.704t-0.672-0.64z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>info_outline</title>
<path d="M12.62 9.793v-2.826h2.761v2.826h-2.761zM14 25.239q4.601 0 7.92-3.319t3.319-7.92-3.319-7.92-7.92-3.319-7.92 3.319-3.319 7.92 3.319 7.92 7.92 3.319zM14 0q5.784 0 9.892 4.108t4.108 9.892-4.108 9.892-9.892 4.108-9.892-4.108-4.108-9.892 4.108-9.892 9.892-4.108zM12.62 21.033v-8.413h2.761v8.413h-2.761z"></path>
</svg>

After

Width:  |  Height:  |  Size: 481 B

View File

@ -9,14 +9,14 @@
} }
margin: $padding-16 0; margin: $padding-16 0;
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp padding: 0;
border-left: $border-4 solid var(--accent-color); border-left: $border-4 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
table { table {
padding: 0 !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important;
tr { tr {
border: 0 !important; border: 0 !important;
@ -24,9 +24,39 @@
td { td {
&:first-child { &:first-child {
background-color: scale-color($gray-600, $alpha: -95%);
font-weight: bold; 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: table-row;
display: flex;
padding: $padding-4 $padding-16 !important;
} }
} }
} }

View File

@ -163,8 +163,8 @@ img {
svg.gdoc-icon { svg.gdoc-icon {
display: inline-block; display: inline-block;
width: 1.3em; width: $font-size-20;
height: 1.3em; height: $font-size-20;
vertical-align: middle; vertical-align: middle;
stroke-width: 0; stroke-width: 0;
stroke: currentColor; stroke: currentColor;
@ -289,7 +289,8 @@ svg.gdoc-icon {
cursor: pointer; cursor: pointer;
svg.gdoc-icon.toggle { svg.gdoc-icon.toggle {
font-size: $font-size-12; width: $font-size-16;
height: $font-size-16;
} }
} }
@ -354,7 +355,7 @@ svg.gdoc-icon {
} }
.gdoc-page { .gdoc-page {
min-width: calc($body-min-width - $padding-16 * 2); min-width: calc($body-min-width - $padding-32);
flex-grow: 1; flex-grow: 1;
padding: $padding-16 0; padding: $padding-16 0;
@ -369,7 +370,7 @@ svg.gdoc-icon {
&__header, &__header,
&__footer { &__footer {
margin-bottom: $padding-16 * 1.2; margin-bottom: $padding-24;
svg.gdoc-icon { svg.gdoc-icon {
color: var(--control-icons); color: var(--control-icons);
@ -490,7 +491,7 @@ svg.gdoc-icon {
} }
svg.gdoc-icon { svg.gdoc-icon {
font-size: 1.2em; font-size: $font-size-20;
} }
.gdoc-button { .gdoc-button {
@ -573,8 +574,7 @@ svg.gdoc-icon {
svg.gdoc-icon { svg.gdoc-icon {
position: absolute; position: absolute;
top: 0.625em; left: $padding-8;
left: $padding-16 * 0.5;
color: var(--control-icons); color: var(--control-icons);
width: $font-size-16; width: $font-size-16;
height: $font-size-16; height: $font-size-16;
@ -680,7 +680,7 @@ svg.gdoc-icon {
} }
.gdoc-error { .gdoc-error {
padding: $padding-16 * 6 $padding-16; padding: $padding-96 $padding-16;
margin: 0 auto; margin: 0 auto;
max-width: 45em; max-width: 45em;
@ -696,7 +696,7 @@ svg.gdoc-icon {
} }
&__message { &__message {
padding-left: $padding-16 * 4; padding-left: $padding-64;
} }
&__line { &__line {

View File

@ -41,9 +41,16 @@
} }
.gdoc-markdown { .gdoc-markdown {
.gdoc-hint { .gdoc-hint,
.admonitionblock,
.gdoc-post__codecopy--success {
filter: none; filter: none;
} }
.gdoc-hint__title,
.admonitionblock table td:first-child {
background-color: scale-color($gray-600, $alpha: -95%);
}
} }
} }
@ -91,8 +98,14 @@
.gdoc-markdown { .gdoc-markdown {
.gdoc-hint, .gdoc-hint,
.admonitionblock,
.gdoc-post__codecopy--success { .gdoc-post__codecopy--success {
filter: saturate(2.5) brightness(0.85); filter: saturate(2.5) brightness(0.85);
} }
.gdoc-hint__title,
.admonitionblock table td:first-child {
background-color: scale-color($gray-600, $alpha: -85%);
}
} }
} }

View File

@ -3,7 +3,10 @@ $padding-2: 0.125rem !default;
$padding-4: 0.25rem !default; $padding-4: 0.25rem !default;
$padding-8: 0.5rem !default; $padding-8: 0.5rem !default;
$padding-16: 1rem !default; $padding-16: 1rem !default;
$padding-24: 1.5rem !default;
$padding-32: 2rem !default; $padding-32: 2rem !default;
$padding-64: 4rem !default;
$padding-96: 6rem !default;
$font-size-base: 16px !default; $font-size-base: 16px !default;
$font-size-12: 0.75rem !default; $font-size-12: 0.75rem !default;
@ -74,8 +77,20 @@ $hint-colors: (
note: rgba(0, 145, 234, 1), note: rgba(0, 145, 234, 1),
ok: rgba(0, 200, 83, 1), ok: rgba(0, 200, 83, 1),
tip: rgba(0, 200, 83, 1), tip: rgba(0, 200, 83, 1),
warning: rgba(255, 171, 0, 1), important: rgba(255, 171, 0, 1),
caution: rgba(115, 0, 211, 1), caution: rgba(115, 0, 211, 1),
danger: rgba(213, 0, 0, 1), danger: rgba(213, 0, 0, 1),
important: rgba(213, 0, 0, 1) warning: rgba(213, 0, 0, 1)
) !default;
// Panel colors
$hint-icons: (
info: "gdoc_info_outline",
note: "gdoc_info_outline",
ok: "gdoc_check_circle_outline",
tip: "gdoc_check_circle_outline",
important: "gdoc_error_outline",
caution: "gdoc_dangerous",
danger: "gdoc_fire",
warning: "gdoc_fire"
) !default; ) !default;

View File

@ -166,7 +166,7 @@
ul, ul,
ol { ol {
padding-left: $padding-16 * 2; padding-left: $padding-32;
} }
dl { dl {
@ -176,7 +176,7 @@
} }
dd { dd {
margin-left: $padding-16 * 2; margin-left: $padding-32;
} }
} }

View File

@ -36,7 +36,7 @@
} }
.gdoc-error { .gdoc-error {
padding: $padding-16 * 6 $padding-16; padding: $padding-96 $padding-16;
svg.gdoc-icon { svg.gdoc-icon {
width: $font-size-96; width: $font-size-96;

View File

@ -131,9 +131,47 @@
border-left-color: $color; border-left-color: $color;
background-color: scale-color($color, $lightness: 95%, $saturation: -30%); background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
color: $body-font-color; color: $body-font-color;
padding: 0;
} }
} }
&__title {
padding: $padding-4 $padding-16;
background-color: scale-color($gray-600, $alpha: -95%);
font-weight: bold;
color: scale-color($body-font-color, $alpha: -15%);
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.#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon});
}
}
.gdoc-icon {
width: $font-size-24;
height: $font-size-24;
margin-left: -5px;
}
}
&__text {
padding: $padding-4 $padding-16;
}
.gdoc-page__anchor { .gdoc-page__anchor {
display: none; display: none;
} }

View File

@ -25,6 +25,11 @@
"dest": "build/sprites/", "dest": "build/sprites/",
"sprite": "geekdoc.svg", "sprite": "geekdoc.svg",
"bust": false "bust": false
},
"stack": {
"dest": "build/img/",
"sprite": "geekdoc-stack.svg",
"bust": false
} }
} }
} }

View File

@ -47,6 +47,10 @@ var config = {
from: "sprites/*.svg", from: "sprites/*.svg",
to: path.resolve(__dirname, "assets"), to: path.resolve(__dirname, "assets"),
context: path.resolve(__dirname, "build") context: path.resolve(__dirname, "build")
},
{
from: "img/*.svg",
context: path.resolve(__dirname, "build")
} }
] ]
}), }),