Fixup styles

doc/docs/index.md

@@ -20,7 +20,7 @@ You'll be able to deploy your project in [:material-kubernetes: Kubernetes](http
 
 It uses your current file and optionnaly labels to configure the result.
 
-It's an opensource project, under MIT licence, partially developped at [Smile](https://smile.eu). The project source code is hosted on the [:fontawesome-brands-github: Katenary GitHub Repository](https://github.com/metal3d/katenary).
+It's an opensource project, under MIT licence, partially developped at [Smile](https://www.smile.eu). The project source code is hosted on the [:fontawesome-brands-github: Katenary GitHub Repository](https://github.com/metal3d/katenary).
 
 
 ## Install Katenary

doc/docs/statics/addons.js

@@ -1,30 +1,3 @@
-function addSmileLogo() {
-  const logo = document.createElement("img");
-  logo.src = "/statics/Logo_Smile.png";
-  logo.classList.add("smile-logo");
-  logo.alt = "Smile logo";
-
-  const link = document.createElement("a");
-  link.href = "https://www.smile.eu";
-  link.target = "_blank";
-  link.title = "Smile website";
-  link.classList.add("smile-logo");
-  link.appendChild(logo);
-
-  const text = document.createElement("p");
-  text.innerHTML = "Sponsored by Smile";
-
-  const div = document.createElement("div");
-  div.classList.add("smile-logo");
-  div.appendChild(text);
-  div.appendChild(link);
-
-  logo.addEventListener("load", () => {
-    let side = document.querySelector(".md-footer-meta__inner");
-    side.appendChild(div);
-  });
-}
-
 function hljsInstall() {
   const version = "11.5.1";
   const theme = "github-dark";
@@ -36,13 +9,12 @@ function hljsInstall() {
     style.rel = "stylesheet";
     style.href = `//cdnjs.cloudflare.com/ajax/libs/highlight.js/${version}/styles/${theme}.min.css`;
     document.head.appendChild(style);
-    hljs.initHighlightingOnLoad();
+    hljs.highlightAll();
   };
 
   document.head.appendChild(script);
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-  addSmileLogo();
   hljsInstall();
 });

doc/docs/statics/main.css

@@ -1,17 +1,21 @@
 :root {
-  --md-primary-fg-color: #333333;
+  --code-bg-color: var(--lt-color-gray-800);
+  --code-fg-color: var(--lt-color-gray-300);
+  --md-primary-fg-color: var(--lt-color-gray-900);
 }
+
+[data-md-color-scheme="default"] {
+  --md-primary-fg-color: var(--md-code-fg-color);
+}
+
 div.smile-logo {
   display: flex;
   font-size: 0.7rem;
 }
-img.smile-logo {
+
+div.smile-logo img {
   width: 100px;
 }
-pre code.hljs {
-  background-color: var(--md-primary-fg-color);
-  color: var(--md-primary-bg-color);
-}
 
 button.md-clipboard::after {
   transition: all 0.5s ease;
@@ -38,3 +42,9 @@ article a:visited {
 .go-logo {
   font-size: 4em;
 }
+
+/* HLJS */
+pre code.hljs {
+  background-color: var(--code-bg-color);
+  color: var(--code-fg-color);
+}

doc/mkdocs.yml

@@ -2,7 +2,18 @@ site_name: Katenary documentation
 docs_dir: ./docs
 theme:
   name: material
+  custom_dir: overrides
   logo: statics/logo.png
+  palette:
+    - scheme: slate
+      toggle:
+        icon: material/brightness-4
+        name: Switch to light mode
+
+    - scheme: default
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
 markdown_extensions:
   - admonition
   - attr_list
@@ -17,6 +28,12 @@ extra_css:
   - statics/main.css
 extra_javascript:
   - statics/addons.js
+copyright: Copyright © 2021 - 2022 - Katenary authors
+extra:
+  generator: false
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/metal3d/katenary
 nav:
   - "Home": index.md
   - usage.md

doc/overrides/partials/footer.html

@@ -0,0 +1,63 @@
+{#- This file was automatically generated - do not edit -#}
+<footer class="md-footer">
+  {% if page.previous_page or page.next_page %} {% if page.meta and
+  page.meta.hide %} {% set hidden = "hidden" if "footer" in page.meta.hide %} {%
+  endif %}
+  <nav
+    class="md-footer__inner md-grid"
+    aria-label="{{ lang.t('footer.title') }}"
+    {{
+    hidden
+    }}
+  >
+    {% if page.previous_page %} {% set direction = lang.t("footer.previous") %}
+    <a
+      href="{{ page.previous_page.url | url }}"
+      class="md-footer__link md-footer__link--prev"
+      aria-label="{{ direction }}: {{ page.previous_page.title | e }}"
+      rel="prev"
+    >
+      <div class="md-footer__button md-icon">
+        {% include ".icons/material/arrow-left.svg" %}
+      </div>
+      <div class="md-footer__title">
+        <div class="md-ellipsis">
+          <span class="md-footer__direction"> {{ direction }} </span>
+          {{ page.previous_page.title }}
+        </div>
+      </div>
+    </a>
+    {% endif %} {% if page.next_page %} {% set direction = lang.t("footer.next")
+    %}
+    <a
+      href="{{ page.next_page.url | url }}"
+      class="md-footer__link md-footer__link--next"
+      aria-label="{{ direction }}: {{ page.next_page.title | e }}"
+      rel="next"
+    >
+      <div class="md-footer__title">
+        <div class="md-ellipsis">
+          <span class="md-footer__direction"> {{ direction }} </span>
+          {{ page.next_page.title }}
+        </div>
+      </div>
+      <div class="md-footer__button md-icon">
+        {% include ".icons/material/arrow-right.svg" %}
+      </div>
+    </a>
+    {% endif %}
+  </nav>
+  {% endif %}
+  <div class="md-footer-meta md-typeset">
+    <div class="md-footer-meta__inner md-grid">
+      {% include "partials/copyright.html" %} {% if config.extra.social %} {%
+      include "partials/social.html" %} {% endif %}
+      <div class="smile-logo">
+        <p>Sponsored by Smile</p>
+        <a href="https://www.smile.eu" target="_blank">
+          <img src="/statics/Logo_Smile.png" />
+        </a>
+      </div>
+    </div>
+  </div>
+</footer>