From d104a8a32f780c934a58493309720f9910c2a234 Mon Sep 17 00:00:00 2001
From: Mark Bundschuh <mark@mbund.org>
Date: Sat, 15 Jul 2023 15:19:14 -0400
Subject: [PATCH] update docs meta

---
 docs/css/customizations.css          | 31 ++++++++++++++++++++++++++++
 docs/reference/technical-overview.md |  4 ++--
 mkdocs.yaml                          | 18 ++++++++++------
 3 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 docs/css/customizations.css

diff --git a/docs/css/customizations.css b/docs/css/customizations.css
new file mode 100644
index 0000000..8d40277
--- /dev/null
+++ b/docs/css/customizations.css
@@ -0,0 +1,31 @@
+/*
+    UX Bugfix for permalink affecting typography in headings.
+    Upstream will not fix: https://github.com/squidfunk/mkdocs-material/issues/2369
+  */
+
+/* Headings are configured to be links (instead of only the permalink symbol), removes the link colour */
+div.md-content article.md-content__inner a.toclink {
+  color: currentColor;
+}
+
+/* Instead of a permalink symbol at the end of heading text, use a border line on the left spanning height of heading */
+/* Includes optional background fill with rounded right-side corners, and restores inline code style */
+/* NOTE: Headings with markdown links embedded disrupt the bg fill style, as they're not children of `a.toclink` element */
+div.md-content article.md-content__inner a.toclink {
+  display: inline-block; /* Enables multi-line support for both border and bg color */
+  border-left: 0.2rem solid transparent; /* transparent placeholder to avoid heading shift during reveal transition */
+  margin-left: -0.6rem; /* Offset heading to the left */
+  padding-left: 0.4rem; /* Push heading back to original position, margin-left - border-left widths */
+  transition: background-color 200ms, border-left 200ms;
+
+  /* Only relevant if using background highlight style */
+  border-radius: 0 0.25rem 0.25rem 0;
+  padding-right: 0.4rem;
+}
+
+div.md-content article.md-content__inner a.toclink:hover,
+div.md-content article.md-content__inner :target > a.toclink {
+  border-left: 0.2rem solid #448aff; /* highlight line on the left */
+  background-color: #b3dbff6e; /* background highlight fill */
+  transition: background-color 200ms, border-left 200ms;
+}
diff --git a/docs/reference/technical-overview.md b/docs/reference/technical-overview.md
index 150dbb6..89b2d1d 100644
--- a/docs/reference/technical-overview.md
+++ b/docs/reference/technical-overview.md
@@ -37,7 +37,7 @@
         <td>Kubernetes package manager</td>
     </tr>
     <tr>
-        <td><img src="https://cncf-branding.netlify.app/img/projects/longhorn/icon/color/longhorn-icon-color.svg" width="48"></td>
+        <td><img src="https://raw.githubusercontent.com/loganmarchione/homelab-svg-assets/main/assets/longhorn.svg" width="48"></td>
         <td><a href="https://longhorn.io">Longhorn</a></td>
         <td>Cloud native distributed block storage for Kubernetes</td>
     </tr>
@@ -62,7 +62,7 @@
         <td>Log aggregation</td>
     </tr>
     <tr>
-        <td><img src="https://cncf-branding.netlify.app/img/projects/prometheus/icon/color/prometheus-icon-color.svg" width="48"></td>
+        <td><img src="https://raw.githubusercontent.com/loganmarchione/homelab-svg-assets/main/assets/prometheus.svg" width="48"></td>
         <td><a href="https://prometheus.io">Prometheus</a></td>
         <td>Systems monitoring</td>
     </tr>
diff --git a/mkdocs.yaml b/mkdocs.yaml
index 756e829..bc0b6f4 100644
--- a/mkdocs.yaml
+++ b/mkdocs.yaml
@@ -12,17 +12,19 @@ repo_url: https://github.com/mbund/homelab
 theme:
   name: material
   palette:
-    - scheme: default
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
       primary: indigo
       accent: indigo
       toggle:
-        icon: material/brightness-7
+        icon: material/weather-sunny
         name: Switch to dark mode
-    - scheme: slate
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
       primary: indigo
-      accent: indigo
+      accent: blue
       toggle:
-        icon: material/brightness-4
+        icon: material/weather-night
         name: Switch to light mode
   features:
     - content.action.edit
@@ -58,7 +60,7 @@ markdown_extensions:
   - pymdownx.tasklist:
       custom_checkbox: true
   - toc:
-      permalink: true
+      anchorlink: true
   - md_in_html
   - attr_list
   - def_list
@@ -67,6 +69,9 @@ markdown_extensions:
 plugins:
   - social
 
+extra_css:
+  - css/customizations.css
+
 extra:
   generator: false
   social:
@@ -87,3 +92,4 @@ nav:
       - reference/matrix.md
       - reference/relay.md
       - reference/k3sup.md
+      - reference/nvidia.md