diff --git a/docs/content/shortcodes/icon.en.md b/docs/content/shortcodes/icon.en.md index 624fd9381a..83f398db3e 100644 --- a/docs/content/shortcodes/icon.en.md +++ b/docs/content/shortcodes/icon.en.md @@ -6,7 +6,7 @@ title = 'Icon' The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome.com) library. -{{% icon skull-crossbones %}} +{{% icon skull-crossbones blue %}} {{% icon style="warning" %}} {{% icon icon="angle-double-up" color="blue" %}} @@ -16,7 +16,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome {{% tab title="shortcode" %}} ````go -{{%/* icon icon="skull-crossbones" */%}} +{{%/* icon icon="skull-crossbones" style="blue" */%}} {{%/* icon style="warning" */%}} {{%/* icon icon="angle-double-up" color="blue" */%}} ```` @@ -25,9 +25,9 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome {{% tab title="shortcode (positional)" %}} ````go -{{%/* icon skull-crossbones */%}} -{{%/* icon exclamation-triangle */%}} -{{%/* icon angle-double-up */%}} +{{%/* icon skull-crossbones blue */%}} +{{%/* icon exclamation-triangle red */%}} +{{%/* icon angle-double-up blue */%}} ```` {{% /tab %}} @@ -37,6 +37,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome {{ partial "shortcodes/icon.html" (dict "page" . "icon" "skull-crossbones" + "style" "blue" )}} {{ partial "shortcodes/icon.html" (dict "page" . @@ -57,7 +58,7 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome | Name | Position | Default | Notes | |-----------------------|----------|-----------------|-------------| | **icon** | 1 | _<empty>_ | [Font Awesome icon name](#finding-an-icon) to be displayed. It will be displayed in the text color of its according context. | -| **style** | | _<empty>_ | The style scheme used for the icon.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code`

You can also [define your own styles](shortcodes/notice#defining-own-styles). | +| **style** | 2 | _<empty>_ | The style scheme used for the icon.

- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
- by special color: `default`, `transparent`, `code`

You can also [define your own styles](shortcodes/notice#defining-own-styles). | | **color** | | _<empty>_ | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color

| ### Finding an icon @@ -90,10 +91,14 @@ Built with {{% icon heart %}} by Relearn and Hugo ### With color ````go -Built with {{%/* icon icon="heart" style="red" */%}} by Relearn and Hugo +- Built with {{%/* icon heart red */%}} by Relearn and Hugo +- Built with {{%/* icon icon="heart" style="red" */%}} by Relearn and Hugo - long form, same as above +- Built with {{%/* icon icon="heart" color="red" */%}} by Relearn and Hugo - this uses the HTML color red instead of the red style ```` -Built with {{% icon icon="heart" style="red" %}} by Relearn and Hugo +- Built with {{% icon heart red %}} by Relearn and Hugo +- Built with {{% icon icon="heart" style="red" %}} by Relearn and Hugo - long form, same as above +- Built with {{% icon icon="heart" color="red" %}} by Relearn and Hugo - this uses the HTML color red instead of the red style ### Advanced HTML Usage diff --git a/layouts/partials/_relearn/boxStyle.gotmpl b/layouts/partials/_relearn/boxStyle.gotmpl index a871f3ab56..cbb35a8f7f 100644 --- a/layouts/partials/_relearn/boxStyle.gotmpl +++ b/layouts/partials/_relearn/boxStyle.gotmpl @@ -38,6 +38,8 @@ (dict "identifier" "default") (dict "identifier" "transparent") (dict "identifier" "code") + (dict "identifier" "filled") + (dict "identifier" "initial") ) }} {{- if eq .identifier $style }} {{- $set = dict "style" $style "title" "" "icon" "" }} diff --git a/layouts/partials/shortcodes/attachments.html b/layouts/partials/shortcodes/attachments.html index 356292b8bb..8c22314f23 100644 --- a/layouts/partials/shortcodes/attachments.html +++ b/layouts/partials/shortcodes/attachments.html @@ -12,6 +12,10 @@ {{- $style = .style | default "transparent" }} {{- end }} {{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "title" .title "icon" .icon) }} +{{- if and (not $boxStyle.style) (not $color) }} + {{- $color = $style }} + {{- $style = "" }} +{{- end }} {{- $title := trim ($boxStyle.title | default ("Attachments-label" | T)) " " }} {{- $icon := trim ($boxStyle.icon | default "paperclip") " " }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} @@ -30,7 +34,7 @@ {{- if ne .BundleType "leaf" }} {{- warnf "%q: UNSUPPORTED usage of 'attachments' shortcode found while using Hugo >= 0.112.0, use a leaf bundle instead; see https://mcshelby.github.io/hugo-theme-relearn/shortcodes/attachments/index.html#single-language" $filepath }} {{- end -}} -
+
{{ if $icon }}{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}