Copy Makefile and CSS from Linux201-docs

ustclug · Jan 19, 2025 · 50e6440 · 50e6440
1 parent 28d785a
commit 50e6440
Show file tree

Hide file tree

Showing 5 changed files with 305 additions and 0 deletions.
diff --git a/Makefile b/Makefile
@@ -0,0 +1,12 @@
+.PHONY: all css
+
+all:
+	mkdocs build
+
+css: docs/css/extra.css
+
+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
@@ -0,0 +1,38 @@
+:root {
+  --md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29z"/></svg>');
+  --md-admonition-icon--lab: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 22a3 3 0 0 1-3-3c0-.6.18-1.16.5-1.63L9 7.81V6a1 1 0 0 1-1-1V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1v1.81l5.5 9.56c.32.47.5 1.03.5 1.63a3 3 0 0 1-3 3zm-1-3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1c0-.21-.07-.41-.18-.57l-2.29-3.96L14 17l-5.07-5.07-3.75 6.5c-.11.16-.18.36-.18.57m8-9a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1"/></svg>');
+}
+
+.md-typeset {
+  .admonition.comment,
+  details.comment {
+    border-color: rgb(0, 200, 83);
+  }
+
+  .comment > .admonition-title,
+  .comment > summary {
+    background-color: rgba(0, 200, 83, 0.1);
+
+    &::before {
+      background-color: rgb(0, 200, 83);
+      -webkit-mask-image: var(--md-admonition-icon--comment);
+              mask-image: var(--md-admonition-icon--comment);
+    }
+  }
+
+  .admonition.lab,
+  details.lab {
+    border-color: rgb(255, 179, 77);
+  }
+
+  .lab > .admonition-title,
+  .lab > summary {
+    background-color: rgba(255, 179, 77, 0.1);
+
+    &::before {
+      background-color: rgb(255, 179, 77);
+      -webkit-mask-image: var(--md-admonition-icon--lab);
+              mask-image: var(--md-admonition-icon--lab);
+    }
+  }
+}
diff --git a/docs/css/extra.css b/docs/css/extra.css
@@ -0,0 +1,67 @@
+:root { --md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29z"/></svg>'); --md-admonition-icon--lab: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 22a3 3 0 0 1-3-3c0-.6.18-1.16.5-1.63L9 7.81V6a1 1 0 0 1-1-1V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1v1.81l5.5 9.56c.32.47.5 1.03.5 1.63a3 3 0 0 1-3 3zm-1-3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1c0-.21-.07-.41-.18-.57l-2.29-3.96L14 17l-5.07-5.07-3.75 6.5c-.11.16-.18.36-.18.57m8-9a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1"/></svg>'); }
+
+.md-typeset .admonition.comment, .md-typeset details.comment { border-color: #00c853; }
+
+.md-typeset .comment > .admonition-title, .md-typeset .comment > summary { background-color: rgba(0, 200, 83, 0.1); }
+
+.md-typeset .comment > .admonition-title::before, .md-typeset .comment > summary::before { background-color: #00c853; -webkit-mask-image: var(--md-admonition-icon--comment); mask-image: var(--md-admonition-icon--comment); }
+
+.md-typeset .admonition.lab, .md-typeset details.lab { border-color: #ffb34d; }
+
+.md-typeset .lab > .admonition-title, .md-typeset .lab > summary { background-color: rgba(255, 179, 77, 0.1); }
+
+.md-typeset .lab > .admonition-title::before, .md-typeset .lab > summary::before { background-color: #ffb34d; -webkit-mask-image: var(--md-admonition-icon--lab); mask-image: var(--md-admonition-icon--lab); }
+
+.red, .red-important { color: red !important; }
+
+.darkred, .darkred-important { color: darkred !important; }
+
+.orangered, .orangered-important { color: orangered !important; }
+
+.green, .green-important { color: green !important; }
+
+.limegreen, .limegreen-important { color: limegreen !important; }
+
+:root { --md-code-font-family: Roboto Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important; }
+
+.mermaid { text-align: center; }
+
+.md-typeset { font-feature-settings: "kern" 0; }
+
+.md-typeset #references, .md-typeset .no-underline { margin-bottom: 0; padding-bottom: 0; border: none; }
+
+.md-typeset h2 { padding-bottom: 0.2em; border-bottom: 1px solid #d3d3d3; }
+
+.md-typeset h3 { padding-bottom: 0.2em; border-bottom: 1px dashed #d3d3d3; }
+
+.md-typeset h4 { font-size: 1.17em; }
+
+.md-typeset h5 { font-size: 1.08em; }
+
+.md-typeset h6 { font-size: 1em; }
+
+.md-typeset img { display: block; margin-left: auto; margin-right: auto; }
+
+.md-typeset .img-inline { display: inline-block; vertical-align: text-bottom; }
+
+.md-typeset .img-border { border: 1px solid black; }
+
+.md-typeset kbd { box-shadow: 0 0 0 0.05rem var(--md-default-fg-color--lighter), 0 0.1rem 0 var(--md-default-fg-color--lighter), inset 0 -0.1rem 0.2rem var(--md-default-bg-color); }
+
+.md-typeset .admonition, .md-typeset details { font-size: 0.9em; }
+
+.md-typeset .md-typeset__table { display: block; margin-left: auto; margin-right: auto; }
+
+.md-typeset .md-typeset__table > table { display: table; width: auto; margin: 0 auto; }
+
+.md-typeset p.caption { text-align: center; font-size: 0.94em; color: grey; margin: -0.7em 0 0; }
+
+.md-typeset .md-annotation__index { margin-left: 0; margin-right: 0; }
+
+.md-typeset .footnote hr { margin-top: 0.2em; }
+
+.md-typeset .footnote-ref::before { content: "["; }
+
+.md-typeset .footnote-ref::after { content: "]"; }
+
+@media screen and (min-width: 76.25em) { .md-nav__item--section > .md-nav > .md-nav__list { padding-left: 2rem; } }
diff --git a/docs/css/extra.scss b/docs/css/extra.scss
@@ -0,0 +1,119 @@
+// Manually compile this file:
+//
+// sassc -t compact extra.scss extra.css
+
+@import "admonitions.scss";
+
+$color-codes: red, darkred, orangered, green, limegreen;
+@each $color in $color-codes {
+  .#{"" + $color}, .#{"" + $color}-important {
+    color: #{$color} !important;
+  }
+}
+
+:root {
+  --md-code-font-family: Roboto Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
+}
+
+.mermaid {
+  text-align: center;
+}
+
+.md-typeset {
+  font-feature-settings: "kern" 0;
+
+  #references,
+  .no-underline {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border: none;
+  }
+
+  h2 {
+    padding-bottom: 0.2em;
+    border-bottom: 1px solid #d3d3d3;
+  }
+
+  h3 {
+    padding-bottom: 0.2em;
+    border-bottom: 1px dashed #d3d3d3;
+  }
+
+  h4 {
+    font-size: 1.17em;
+  }
+
+  h5 {
+    font-size: 1.08em;
+  }
+
+  h6 {
+    font-size: 1em;
+  }
+
+  img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .img-inline {
+    display: inline-block;
+    vertical-align: text-bottom;
+  }
+  .img-border {
+    border: 1px solid black;
+  }
+
+  kbd {
+    box-shadow: 0 0 0 0.05rem var(--md-default-fg-color--lighter), 0 0.1rem 0 var(--md-default-fg-color--lighter),
+      inset 0 -0.1rem 0.2rem var(--md-default-bg-color);
+  }
+
+  .admonition,
+  details {
+    font-size: 0.9em;
+  }
+
+  .md-typeset__table {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    > table {
+      display: table;
+      width: auto;
+      margin: 0 auto;
+    }
+  }
+
+  p.caption {
+    text-align: center;
+    font-size: 0.94em;
+    color: grey;
+    margin: -0.7em 0 0;
+  }
+
+  .md-annotation__index {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .footnote hr {
+    margin-top: 0.2em;
+  }
+
+  .footnote-ref::before {
+    content: "[";
+  }
+
+  .footnote-ref::after {
+    content: "]";
+  }
+}
+
+.md-nav__item--section > .md-nav > .md-nav__list {
+  @media screen and (min-width: 76.25em) {
+    padding-left: 2rem;
+  }
+}
diff --git a/scripts/custom-admonitions.py b/scripts/custom-admonitions.py
@@ -0,0 +1,69 @@
+#!/usr/bin/env python3
+
+import inspect
+import os
+
+import material
+
+
+CUSTOM_ADMONITIONS = {
+    "comment": {
+        "icon": "material/comment",
+        "rgb": [0x00, 0xC8, 0x53],
+    },
+    "lab": {
+        "icon": "material/flask",
+        "rgb": [0xFF, 0xB3, 0x4D],
+    }
+}
+
+# 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)