Make home page look more colorful and vibrant

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

Hide file tree

Showing 5 changed files with 94 additions and 48 deletions.
diff --git a/docs/css/admonitions.scss b/docs/css/admonitions.scss
@@ -1,38 +1,72 @@
 :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-admonition-icon--homepage-workflow: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M352 320c88.4 0 160-71.6 160-160 0-15.3-2.2-30.1-6.2-44.2-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7H336c-8.8 0-16-7.2-16-16v-57.4c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0c-88.4 0-160 71.6-160 160 0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1 0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9l181.6-181.6c17 6.2 35.4 9.5 54.5 9.5M80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48"/></svg>');
+  --md-admonition-icon--homepage-infrastructure: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6V5a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v1h-2V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v1H3v14h18V6Z"/></svg>');
+  --md-admonition-icon--homepage-services: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M211 7.3C205 1 196-1.4 187.6.8s-14.9 8.9-17.1 17.3l-15.8 62.5-62-17.5c-8.4-2.4-17.4 0-23.5 6.1s-8.5 15.1-6.1 23.5l17.5 62-62.5 15.9c-8.4 2.1-15 8.7-17.3 17.1S1 205 7.3 211l46.2 45-46.2 45c-6.3 6-8.7 15-6.5 23.4s8.9 14.9 17.3 17.1l62.5 15.8-17.5 62c-2.4 8.4 0 17.4 6.1 23.5s15.1 8.5 23.5 6.1l62-17.5 15.8 62.5c2.1 8.4 8.7 15 17.1 17.3s17.3-.2 23.4-6.4l45-46.2 45 46.2c6.1 6.2 15 8.7 23.4 6.4s14.9-8.9 17.1-17.3l15.8-62.5 62 17.5c8.4 2.4 17.4 0 23.5-6.1s8.5-15.1 6.1-23.5l-17.5-62 62.5-15.8c8.4-2.1 15-8.7 17.3-17.1s-.2-17.4-6.4-23.4l-46.2-45 46.2-45c6.2-6.1 8.7-15 6.4-23.4s-8.9-14.9-17.3-17.1l-62.5-15.8 17.5-62c2.4-8.4 0-17.4-6.1-23.5s-15.1-8.5-23.5-6.1l-62 17.5-15.9-62.5c-2.1-8.4-8.7-15-17.1-17.3S307 1 301 7.3l-45 46.2z"/></svg>');
+  --md-admonition-icon--homepage-faq: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512m-86.2-346.7c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1 0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6-13.3 0-24-10.7-24-24v-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1 0-8.4-6.8-15.1-15.1-15.1h-58.3c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1-64 0"/></svg>');
 }
 
 .md-typeset {
-  .admonition.comment,
-  details.comment {
-    border-color: rgb(0, 200, 83);
+  .admonition.homepage-workflow,
+  details.homepage-workflow {
+    border-color: rgb(241, 79, 33);
   }
 
-  .comment > .admonition-title,
-  .comment > summary {
-    background-color: rgba(0, 200, 83, 0.1);
+  .homepage-workflow > .admonition-title,
+  .homepage-workflow > summary {
+    background-color: rgba(241, 79, 33, 0.1);
 
     &::before {
-      background-color: rgb(0, 200, 83);
-      -webkit-mask-image: var(--md-admonition-icon--comment);
-              mask-image: var(--md-admonition-icon--comment);
+      background-color: rgb(241, 79, 33);
+      -webkit-mask-image: var(--md-admonition-icon--homepage-workflow);
+              mask-image: var(--md-admonition-icon--homepage-workflow);
     }
   }
 
-  .admonition.lab,
-  details.lab {
-    border-color: rgb(255, 179, 77);
+  .admonition.homepage-infrastructure,
+  details.homepage-infrastructure {
+    border-color: rgb(126, 185, 0);
   }
 
-  .lab > .admonition-title,
-  .lab > summary {
-    background-color: rgba(255, 179, 77, 0.1);
+  .homepage-infrastructure > .admonition-title,
+  .homepage-infrastructure > summary {
+    background-color: rgba(126, 185, 0, 0.1);
 
     &::before {
-      background-color: rgb(255, 179, 77);
-      -webkit-mask-image: var(--md-admonition-icon--lab);
-              mask-image: var(--md-admonition-icon--lab);
+      background-color: rgb(126, 185, 0);
+      -webkit-mask-image: var(--md-admonition-icon--homepage-infrastructure);
+              mask-image: var(--md-admonition-icon--homepage-infrastructure);
+    }
+  }
+
+  .admonition.homepage-services,
+  details.homepage-services {
+    border-color: rgb(0, 163, 238);
+  }
+
+  .homepage-services > .admonition-title,
+  .homepage-services > summary {
+    background-color: rgba(0, 163, 238, 0.1);
+
+    &::before {
+      background-color: rgb(0, 163, 238);
+      -webkit-mask-image: var(--md-admonition-icon--homepage-services);
+              mask-image: var(--md-admonition-icon--homepage-services);
+    }
+  }
+
+  .admonition.homepage-faq,
+  details.homepage-faq {
+    border-color: rgb(254, 184, 0);
+  }
+
+  .homepage-faq > .admonition-title,
+  .homepage-faq > summary {
+    background-color: rgba(254, 184, 0, 0.1);
+
+    &::before {
+      background-color: rgb(254, 184, 0);
+      -webkit-mask-image: var(--md-admonition-icon--homepage-faq);
+              mask-image: var(--md-admonition-icon--homepage-faq);
     }
   }
 }
diff --git a/docs/css/extra.css b/docs/css/extra.css
@@ -1,16 +1,28 @@
-: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>'); }
+:root { --md-admonition-icon--homepage-workflow: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M352 320c88.4 0 160-71.6 160-160 0-15.3-2.2-30.1-6.2-44.2-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7H336c-8.8 0-16-7.2-16-16v-57.4c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0c-88.4 0-160 71.6-160 160 0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1 0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9l181.6-181.6c17 6.2 35.4 9.5 54.5 9.5M80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48"/></svg>'); --md-admonition-icon--homepage-infrastructure: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6V5a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v1h-2V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v1H3v14h18V6Z"/></svg>'); --md-admonition-icon--homepage-services: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M211 7.3C205 1 196-1.4 187.6.8s-14.9 8.9-17.1 17.3l-15.8 62.5-62-17.5c-8.4-2.4-17.4 0-23.5 6.1s-8.5 15.1-6.1 23.5l17.5 62-62.5 15.9c-8.4 2.1-15 8.7-17.3 17.1S1 205 7.3 211l46.2 45-46.2 45c-6.3 6-8.7 15-6.5 23.4s8.9 14.9 17.3 17.1l62.5 15.8-17.5 62c-2.4 8.4 0 17.4 6.1 23.5s15.1 8.5 23.5 6.1l62-17.5 15.8 62.5c2.1 8.4 8.7 15 17.1 17.3s17.3-.2 23.4-6.4l45-46.2 45 46.2c6.1 6.2 15 8.7 23.4 6.4s14.9-8.9 17.1-17.3l15.8-62.5 62 17.5c8.4 2.4 17.4 0 23.5-6.1s8.5-15.1 6.1-23.5l-17.5-62 62.5-15.8c8.4-2.1 15-8.7 17.3-17.1s-.2-17.4-6.4-23.4l-46.2-45 46.2-45c6.2-6.1 8.7-15 6.4-23.4s-8.9-14.9-17.3-17.1l-62.5-15.8 17.5-62c2.4-8.4 0-17.4-6.1-23.5s-15.1-8.5-23.5-6.1l-62 17.5-15.9-62.5c-2.1-8.4-8.7-15-17.1-17.3S307 1 301 7.3l-45 46.2z"/></svg>'); --md-admonition-icon--homepage-faq: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512m-86.2-346.7c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1 0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6-13.3 0-24-10.7-24-24v-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1 0-8.4-6.8-15.1-15.1-15.1h-58.3c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1-64 0"/></svg>'); }
 
-.md-typeset .admonition.comment, .md-typeset details.comment { border-color: #00c853; }
+.md-typeset .admonition.homepage-workflow, .md-typeset details.homepage-workflow { border-color: #f14f21; }
 
-.md-typeset .comment > .admonition-title, .md-typeset .comment > summary { background-color: rgba(0, 200, 83, 0.1); }
+.md-typeset .homepage-workflow > .admonition-title, .md-typeset .homepage-workflow > summary { background-color: rgba(241, 79, 33, 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 .homepage-workflow > .admonition-title::before, .md-typeset .homepage-workflow > summary::before { background-color: #f14f21; -webkit-mask-image: var(--md-admonition-icon--homepage-workflow); mask-image: var(--md-admonition-icon--homepage-workflow); }
 
-.md-typeset .admonition.lab, .md-typeset details.lab { border-color: #ffb34d; }
+.md-typeset .admonition.homepage-infrastructure, .md-typeset details.homepage-infrastructure { border-color: #7eb900; }
 
-.md-typeset .lab > .admonition-title, .md-typeset .lab > summary { background-color: rgba(255, 179, 77, 0.1); }
+.md-typeset .homepage-infrastructure > .admonition-title, .md-typeset .homepage-infrastructure > summary { background-color: rgba(126, 185, 0, 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); }
+.md-typeset .homepage-infrastructure > .admonition-title::before, .md-typeset .homepage-infrastructure > summary::before { background-color: #7eb900; -webkit-mask-image: var(--md-admonition-icon--homepage-infrastructure); mask-image: var(--md-admonition-icon--homepage-infrastructure); }
+
+.md-typeset .admonition.homepage-services, .md-typeset details.homepage-services { border-color: #00a3ee; }
+
+.md-typeset .homepage-services > .admonition-title, .md-typeset .homepage-services > summary { background-color: rgba(0, 163, 238, 0.1); }
+
+.md-typeset .homepage-services > .admonition-title::before, .md-typeset .homepage-services > summary::before { background-color: #00a3ee; -webkit-mask-image: var(--md-admonition-icon--homepage-services); mask-image: var(--md-admonition-icon--homepage-services); }
+
+.md-typeset .admonition.homepage-faq, .md-typeset details.homepage-faq { border-color: #feb800; }
+
+.md-typeset .homepage-faq > .admonition-title, .md-typeset .homepage-faq > summary { background-color: rgba(254, 184, 0, 0.1); }
+
+.md-typeset .homepage-faq > .admonition-title::before, .md-typeset .homepage-faq > summary::before { background-color: #feb800; -webkit-mask-image: var(--md-admonition-icon--homepage-faq); mask-image: var(--md-admonition-icon--homepage-faq); }
 
 .red, .red-important { color: red !important; }
 

diff --git a/docs/index.md b/docs/index.md
@@ -11,29 +11,21 @@ Documentation for LUG @ USTC technical infrastructure.
 
 Our documentation is divided into these sections, as laid out on the left navigation menu:
 
-<div class="grid cards" markdown>
+<div class="grid" markdown>
 
--   :fontawesome-solid-wrench:{ .lg .middle } **Workflow**
-
-    ---
+!!! homepage-workflow "Workflow"
 
     Provides guidance to (a few) common maintenance tasks.
 
--   :material-toy-brick:{ .lg .middle } **Infrastructure**
-
-    ---
+!!! homepage-infrastructure "Infrastructure"
 
     Describes our infrastructure, as well as common configurations across different servers (networking, firewalls, security, monitoring, etc.).
 
--   :fontawesome-solid-certificate:{ .lg .middle } **Services**
-
-    ---
+!!! homepage-services "Services"
 
     Specific configurations on individual servers and service units (software and/or Docker containers).
 
--   :fontawesome-solid-circle-question:{ .lg .middle } **Common Issues** (a.k.a. **FAQ**)
-
-    ---
+!!! homepage-faq "Common Issues (a.k.a. "FAQ")"
 
     For our troubleshooting experiences and serves partially as a "notebook" for known traps and workarounds.
 

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -49,7 +49,7 @@ extra:
       link: "https://github.com/ustclug"
 
 extra_css:
-  - https://101.ustclug.org/css/extra.css
+  - /css/extra.css
 
 # Extensions
 markdown_extensions:

diff --git a/scripts/custom-admonitions.py b/scripts/custom-admonitions.py
@@ -7,14 +7,22 @@
 
 
 CUSTOM_ADMONITIONS = {
-    "comment": {
-        "icon": "material/comment",
-        "rgb": [0x00, 0xC8, 0x53],
+    "homepage-workflow": {
+        "icon": "fontawesome/solid/wrench",
+        "rgb": (241, 79, 33),
+    },
+    "homepage-infrastructure": {
+        "icon": "material/toy-brick",
+        "rgb": (126, 185, 0),
+    },
+    "homepage-services": {
+        "icon": "fontawesome/solid/certificate",
+        "rgb": (0, 163, 238),
+    },
+    "homepage-faq": {
+        "icon": "fontawesome/solid/circle-question",
+        "rgb": (254, 184, 0),
     },
-    "lab": {
-        "icon": "material/flask",
-        "rgb": [0xFF, 0xB3, 0x4D],
-    }
 }
 
 # ensure we're in project root directory