diff --git a/docs/handbook/meta/editing.md b/docs/handbook/meta/editing.md index 919fbc9..f6051bf 100644 --- a/docs/handbook/meta/editing.md +++ b/docs/handbook/meta/editing.md @@ -8,11 +8,33 @@ This site is written in Markdown and is generated using [:simple-materialformkdo ## Icons Reference for all available Material for MkDocs icons: [:simple-materialformkdocs: Icons, Emojis](https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/) -### Commonly-used icons for links: +### Commonly-used icons for links :octicons-arrow-right-16: `:octicons-arrow-right-16:` - used for links within the wiki :octicons-tab-external-16: `:octicons-tab-external-16:` - used for links outside the wiki, but within StarCat Systems :octicons-link-external-16: `:octicons-link-external-16:` - used for external links to sites not controlled by StarCat Systems +### Coloring icons +You can add a color to an icon by adding the CSS color after the icon, like this: +:fontawesome-solid-dragon:{ .bug-pink } `:fontawesome-solid-dragon:{ .bug-pink }` + + +Currently, the available configured colors are based off the built-in admonition colors and icons, as follows: + +:fontawesome-regular-note-sticky:{ .note-blue } `:fontawesome-regular-note-sticky:{ .note-blue }` +:octicons-info-16:{ .info-blue } `:octicons-info-16:{ .info-blue }` +:octicons-flame-16:{ .tip-teal } `:octicons-flame-16:{ .tip-teal }` +:octicons-check-16:{ .success-green } `:octicons-check-16:{ .success-green }` +:octicons-question-16:{ .question-green } `:octicons-question-16:{ .question-green }` +:octicons-alert-16:{ .warning-yellow } `:octicons-alert-16:{ .warning-yellow }` +:octicons-x-circle-16:{ .failure-red } `:octicons-x-circle-16:{ .failure-red }` +:octicons-zap-16:{ .danger-red } `:octicons-zap-16:{ .danger-red }` +:octicons-bug-16:{ .bug-pink } `:octicons-bug-16:{ .bug-pink }` +:octicons-beaker-16:{ .example-purple } `:octicons-beaker-16:{ .example-purple }` +:octicons-quote-16:{ .quote-grey } `:octicons-quote-16:{ .quote-grey }` + +:octicons-flame-16:{ .tip-teal } Want to know how these colors work? Check out [:simple-forgejo: the CSS in the source](https://git.starcat.systems/starcatsys/about_docs/src/branch/main/docs/stylesheets/extra.css). + + --- diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index c660b58..c61704b 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,6 +1,33 @@ +.note-blue { + color: #448AFF; + } +.info-blue { + color: #00B8D4; + } +.tip-teal { + color: #00BFA5; + } +.success-green { + color: #00C853; + } +.question-green { + color: #64DD17; + } .warning-yellow { color: #FF9100; } - .info-blue { - color: #00B8D4; +.failure-red { + color: #FF5252; + } +.danger-red { + color: #FF1744; + } +.bug-pink { + color: #F50057; + } +.example-purple { + color: #7C4DFF; + } +.quote-grey { + color: #9E9E9E; } \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 1f1f1f0..b7575b3 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -21,7 +21,7 @@ theme: favicon: assets/favicon.svg icon: admonition: - note: octicons/tag-16 + note: fontawesome/regular/note-sticky abstract: material/select-multiple info: octicons/info-16 tip: octicons/flame-16