diff --git a/Makefile b/Makefile index 8824038..ab9868d 100644 --- a/Makefile +++ b/Makefile @@ -5,5 +5,8 @@ all: css: docs/css/extra.css -docs/css/extra.css: docs/css/extra.scss - sassc -t compact $^ > $@ +docs/css/extra.css: docs/css/extra.scss docs/css/admonitions.scss + sassc -t compact $< $@ + +docs/css/admonitions.scss: scripts/custom-admonitions.py + python3 $< diff --git a/docs/css/admonitions.scss b/docs/css/admonitions.scss new file mode 100644 index 0000000..75f5efc --- /dev/null +++ b/docs/css/admonitions.scss @@ -0,0 +1,21 @@ +:root { + --md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,'); +} + +.md-typeset { + .admonition.comment, + details.comment { + border-color: rgb(43, 155, 70); + } + + .comment > .admonition-title, + .comment > summary { + background-color: rgba(43, 155, 70, 0.1); + + &::before { + background-color: rgb(43, 155, 70); + -webkit-mask-image: var(--md-admonition-icon--comment); + mask-image: var(--md-admonition-icon--comment); + } + } +} diff --git a/docs/css/extra.css b/docs/css/extra.css index 71099ee..d525cdf 100644 --- a/docs/css/extra.css +++ b/docs/css/extra.css @@ -1,3 +1,11 @@ +:root { --md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,'); } + +.md-typeset .admonition.comment, .md-typeset details.comment { border-color: #2b9b46; } + +.md-typeset .comment > .admonition-title, .md-typeset .comment > summary { background-color: rgba(43, 155, 70, 0.1); } + +.md-typeset .comment > .admonition-title::before, .md-typeset .comment > summary::before { background-color: #2b9b46; -webkit-mask-image: var(--md-admonition-icon--comment); mask-image: var(--md-admonition-icon--comment); } + .red, .red-important { color: red !important; } .darkred, .darkred-important { color: darkred !important; } @@ -8,7 +16,7 @@ .limegreen, .limegreen-important { color: limegreen !important; } -:root { --md-code-font-family: Roboto Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important; --md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,'); } +:root { --md-code-font-family: Roboto Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important; } .mermaid { text-align: center; } @@ -41,9 +49,3 @@ .md-typeset p.caption { text-align: center; font-size: 0.94em; color: grey; margin: -0.7em 0 0; } .md-typeset .footnote hr { margin-top: 0.2em; } - -.md-typeset .admonition.comment, .md-typeset details.comment { border-color: #2b9b46; } - -.md-typeset .comment > .admonition-title, .md-typeset .comment > summary { background-color: rgba(43, 155, 70, 0.1); } - -.md-typeset .comment > .admonition-title::before, .md-typeset .comment > summary::before { background-color: #2b9b46; -webkit-mask-image: var(--md-admonition-icon--comment); mask-image: var(--md-admonition-icon--comment); } diff --git a/docs/css/extra.scss b/docs/css/extra.scss index 45c3c5a..e1abea8 100644 --- a/docs/css/extra.scss +++ b/docs/css/extra.scss @@ -1,6 +1,8 @@ // Manually compile this file: // -// sassc -t compact > extra.css +// sassc -t compact extra.scss extra.css + +@import "admonitions.scss"; $color-codes: red, darkred, orangered, green, limegreen; @each $color in $color-codes { @@ -11,8 +13,6 @@ $color-codes: red, darkred, orangered, green, limegreen; :root { --md-code-font-family: Roboto Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important; - // https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/templates/.icons/material/comment.svg - --md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,'); } .mermaid { @@ -95,21 +95,4 @@ $color-codes: red, darkred, orangered, green, limegreen; .footnote hr { margin-top: 0.2em; } - - .admonition.comment, - details.comment { - border-color: rgb(43, 155, 70); - } - - .comment > .admonition-title, - .comment > summary { - background-color: rgba(43, 155, 70, 0.1); - } - - .comment > .admonition-title::before, - .comment > summary::before { - background-color: rgb(43, 155, 70); - -webkit-mask-image: var(--md-admonition-icon--comment); - mask-image: var(--md-admonition-icon--comment); - } } diff --git a/scripts/custom-admonitions.py b/scripts/custom-admonitions.py new file mode 100755 index 0000000..f65c4bb --- /dev/null +++ b/scripts/custom-admonitions.py @@ -0,0 +1,66 @@ +#!/usr/bin/env python3 + +import inspect +import io +import os + +import material + + +CUSTOM_ADMONITIONS = { + "comment": { + "icon": "material/comment", + "rgb": [43, 155, 70], + }, +} + +# ensure we're in project root directory +if not os.path.isfile("mkdocs.yml"): + raise FileNotFoundError("mkdocs.yml not found") + + +material_root = os.path.dirname(inspect.getfile(material)) +material_root = os.path.join(material_root, "templates", ".icons") + + +def get_icon(name): + with open(os.path.join(material_root, name + ".svg")) as f: + return f.read() + + +root_defs = [] +typeset_defs = [] +for name, data in CUSTOM_ADMONITIONS.items(): + varname = f"--md-admonition-icon--{name}" + content = get_icon(data["icon"]) + s = f" {varname}: url('data:image/svg+xml;charset=utf-8,{content}');" + root_defs.append(s) + + rgb = data["rgb"] + rgb_s = f"{rgb[0]}, {rgb[1]}, {rgb[2]}" + s = f""" + .admonition.{name}, + details.{name} {{ + border-color: rgb({rgb_s}); + }} + + .{name} > .admonition-title, + .{name} > summary {{ + background-color: rgba({rgb_s}, 0.1); + + &::before {{ + background-color: rgb({rgb_s}); + -webkit-mask-image: var({varname}); + mask-image: var({varname}); + }} + }}""".lstrip("\n") + typeset_defs.append(s) + +with open("docs/css/admonitions.scss", "w") as f: + print(":root {", file=f) + print("\n".join(root_defs), file=f) + print("}", file=f, end="\n\n") + + print(".md-typeset {", file=f) + print("\n\n".join(typeset_defs), file=f) + print("}", file=f)